ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Getting started with react & redux

?Download as PPTX, PDF?
?
Girish Talekar
Girish Talekar

React is a JavaScript library for building user interfaces using reusable components. The core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM. Everything in React is components that can interact with each other and maintain state. Data flows unidirectionally via state and props from parent to child components. The virtual DOM selectively re-renders the UI when the state changes, improving performance. Redux follows a similar unidirectional data flow architecture, with data moving from actions to reducers to the store.

1 of 22
Download to read offline
GETTING STARTED WITH REACT & REDUX
What is React.js? ? A JavaScript library for building user interfaces. Reactjs is created by the Facebook for the V of MVC by reusable and interactive UI components.
Why React.js? ? V(view) of MVC - Solution of View in MVC ? Virtual DOM - Reactjs use the concept of virtual DOM which helps in the performance ? Unidirectional Data Flow - Compare to the 2 way data binding. Reactjs use the concept of Unidirectional data flow which improve the over all performance. ? UI Components - Reusable and interactive components ? SEO Friendly - Components are client side as well as server side render hence they are SEO friendly and no 3rd party plugin required ? Coding is simpler because of JSX ? Reactjs own debugger ? React Native is going to be next big thing ? Big minds are backing Reactjs
Core Concept of Reactjs ? JSX ? Components ? Unidirectional dataflow ? Virtual DOM
JSX JSX - javascript XML syntax transform. It helps in making our writing code easier and faster. JSX lets us writeHTML (not 100%) with XML based object representation.
Components In Reactjs the whole application is break into the components. Components are interactive, reusable and stageful too.
Unidirectional Data Flow - As compare to other MVC frameworks/Library Reactjs use the concept of unidirectional data flow. - In Reactjs application the data flow from the parent to the children component by the state and the props. - Only one parent is responsible to update the states and passing the value to the children components via props. - setState is used to update/refresh the UI when the state change and the value can be pass to the children component by the this.props
Virtual DOM ? Reactjs uses the concept of the virtual DOM. ? It selectively render the subtree of DOM elements into the rendering of the DOM on state change ? Use different algorithm with the browser DOM tree to identify the changes ? Instead of creating new object, Reactjs just identify what change is took place and once identify update that state. ? This way it is creating a virtual DOM and improving the performance too ? Can be render on server and sync on Local
Components Everything in reactjs is components. The core building blocks of React application is components only. Components interact with each other and maintain the state too. In Reactjs whole application is need to be break into the component only.
props ? In Reactjs props are like the HTML Properties. They are used to pass the data between the components or via the states. In Reactjs the props can be accessed by this.props.propsname ? Props can be define by name=¡°value¡±. To access this we have to call this.props.name
Getting started with react & redux
states Every component has a State object. Can be set by using setState. setState triggers UI updates and to get the initial state before the setState : getInitialState.getDefaultProps
Component Lifecycle ? componentWillMount ¨C Client and server side componenet Will Occur only once (before) ? componentDidMount ¨C Only once (after) ? shouldComponentUpdate ¨C Return value determines weather component should update ? componentWillUnmount ¨C Before unmounting component
Events ? Reactjs has the events that are attached with the components as the props of the components and can trigger methods.
Getting started with react & redux
Unidirectional Data Flow ? In reactjs, application data flows unidirectional via the state and props not like angular js where we have 2-way data binding. Which means in multiple component hierarchy , a common parent component should manage the state and pass it down the chain by props. ? setState - state should be updated by setState to ensure UI will refresh/update ? this.props ¨C to pass the value to the child components
Redux Data Flow : ? Redux architecture revolves around a strict unidirectional data flow. ? This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another.
Redux basic blocks The data lifecycle in any Redux app follows these 4 steps: ? You call store.dispatch(action). ? The Redux store calls the reducer function you gave it. ? The root reducer may combine the output of multiple reducers into a single state tree. ? The Redux store saves the complete state tree returned by the root reducer.
Getting started with react & redux
Project link ? https://github.com/girishg4t/react-native-with-redux-sample ? https://github.com/girishg4t/reactBoilerplate
Configuration Local ? Local setup (https://facebook.github.io/react-native/docs/getting- started.html) ? Debugging
Thanks

More Related Content

Getting started with react & redux

  • 2. What is React.js? ? A JavaScript library for building user interfaces. Reactjs is created by the Facebook for the V of MVC by reusable and interactive UI components.
  • 3. Why React.js? ? V(view) of MVC - Solution of View in MVC ? Virtual DOM - Reactjs use the concept of virtual DOM which helps in the performance ? Unidirectional Data Flow - Compare to the 2 way data binding. Reactjs use the concept of Unidirectional data flow which improve the over all performance. ? UI Components - Reusable and interactive components ? SEO Friendly - Components are client side as well as server side render hence they are SEO friendly and no 3rd party plugin required ? Coding is simpler because of JSX ? Reactjs own debugger ? React Native is going to be next big thing ? Big minds are backing Reactjs
  • 4. Core Concept of Reactjs ? JSX ? Components ? Unidirectional dataflow ? Virtual DOM
  • 5. JSX JSX - javascript XML syntax transform. It helps in making our writing code easier and faster. JSX lets us writeHTML (not 100%) with XML based object representation.
  • 6. Components In Reactjs the whole application is break into the components. Components are interactive, reusable and stageful too.
  • 7. Unidirectional Data Flow - As compare to other MVC frameworks/Library Reactjs use the concept of unidirectional data flow. - In Reactjs application the data flow from the parent to the children component by the state and the props. - Only one parent is responsible to update the states and passing the value to the children components via props. - setState is used to update/refresh the UI when the state change and the value can be pass to the children component by the this.props
  • 8. Virtual DOM ? Reactjs uses the concept of the virtual DOM. ? It selectively render the subtree of DOM elements into the rendering of the DOM on state change ? Use different algorithm with the browser DOM tree to identify the changes ? Instead of creating new object, Reactjs just identify what change is took place and once identify update that state. ? This way it is creating a virtual DOM and improving the performance too ? Can be render on server and sync on Local
  • 9. Components Everything in reactjs is components. The core building blocks of React application is components only. Components interact with each other and maintain the state too. In Reactjs whole application is need to be break into the component only.
  • 10. props ? In Reactjs props are like the HTML Properties. They are used to pass the data between the components or via the states. In Reactjs the props can be accessed by this.props.propsname ? Props can be define by name=¡°value¡±. To access this we have to call this.props.name
  • 12. states Every component has a State object. Can be set by using setState. setState triggers UI updates and to get the initial state before the setState : getInitialState.getDefaultProps
  • 13. Component Lifecycle ? componentWillMount ¨C Client and server side componenet Will Occur only once (before) ? componentDidMount ¨C Only once (after) ? shouldComponentUpdate ¨C Return value determines weather component should update ? componentWillUnmount ¨C Before unmounting component
  • 14. Events ? Reactjs has the events that are attached with the components as the props of the components and can trigger methods.
  • 16. Unidirectional Data Flow ? In reactjs, application data flows unidirectional via the state and props not like angular js where we have 2-way data binding. Which means in multiple component hierarchy , a common parent component should manage the state and pass it down the chain by props. ? setState - state should be updated by setState to ensure UI will refresh/update ? this.props ¨C to pass the value to the child components
  • 17. Redux Data Flow : ? Redux architecture revolves around a strict unidirectional data flow. ? This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another.
  • 18. Redux basic blocks The data lifecycle in any Redux app follows these 4 steps: ? You call store.dispatch(action). ? The Redux store calls the reducer function you gave it. ? The root reducer may combine the output of multiple reducers into a single state tree. ? The Redux store saves the complete state tree returned by the root reducer.
  • 21. Configuration Local ? Local setup (https://facebook.github.io/react-native/docs/getting- started.html) ? Debugging