Reactjs
•Download as PPTX, PDF•
19 likes•11,347 views
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Report
Share
Related slideshows
More Related Content
What's hot
What's hot (20)
Similar to Reactjs
Similar to Reactjs (20)
More from Neha Sharma
Recently uploaded
Recently uploaded (20)
Reactjs
- 1. Neha Sharma - nehha255@gmail.com | twitter.com/hellonehha
- 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. Who is using Reactjs? • Facebook – Partial • Instagram • Khan Academy - Partial
- 4. 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
- 5. Core Concept of Reactjs Unidirectional Data Flow ComponentsJSX Virtual DOM
- 6. 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.
- 7. Line 8-19 : Telling browser the code between the script block is JSX and not normal JavaScript. Line no 12 : This is how we write the HTML in JSX
- 8. If you don’t want to use JSX, you can still work in react however the code would be like the above as compare to the last slide without JSX
- 9. Components In Reactjs the whole application is break into the components. Components are interactive, reusable and stageful too.
- 10. Line 9 : We are creating our component with name MyApp Line 18 : We are calling/rendering our component in the content div on the HTML page
- 11. 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
- 12. 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
- 13. Lets Start • Download react • Download JSX • Install React debugger tool (Chrome)
- 14. Start your HTML Page
- 15. 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.
- 17. 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
- 18. React.render(<MyComponent name=“Neha” />) : name is the one of the props of the component MyComponent . To access the value of the props in the react we use {this.props.name}.
- 19. 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
- 20. Reactjs maintained the state – getIntialState, setState, getDefaultProps. In the above example we are getting the count variable to 5 and accessing it by {this.state.count}
- 21. Component Lifecycle • componentWillMount – Client and server side componenet Will Occur only once (before) • componentDidMount – Only once (after) • shouldComponentUpdate – Return value determines weather component should update • componentWillUnmount – Before unmounting component
- 22. Events • Reactjs has the events that are attached with the components as the props of the components and can trigger methods.
- 23. We have created a custom method clickCount and onClick of the button we are calling it onClick = {this.clickCount}
- 24. Unidriectional 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 – to pass the value to the child components
- 25. Angular Backbone React Type MV* MVC V Technology HTML/CSS/JS/Ang ular HTML/CSS/JS/bac kbone JSX Core MVC MVC Components View HTML HTML Virtual DOM Data Flowing 2 way binding - Unidirectional Creator Google - FB* & Instagram Architchure - - React Native & Flux SEO Support Phantom js - SEO friendly
- 27. Thank you! Please share your feedback @ nehha255@gmail.com 27