Introduction of React.js
-
Upload
jyaasa-technologies -
Category
Software
-
view
227 -
download
0
Transcript of Introduction of React.js
![Page 1: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/1.jpg)
Introduction of React
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
![Page 2: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/2.jpg)
Hello ! I am Nikesh Suwal
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Sr.Front End Engineer
Jyaasa Technologies
![Page 3: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/3.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
A JavaScript library for building User Interface
ReactJs
![Page 4: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/4.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
● Originated at Facebook and Instagram.
● A declarative View library, the V in MVC
● Can be used in any framework as the view Component
About React
![Page 5: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/5.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Who’s using it?● Facebook and Instagram
● Netflix
● AirBnB
● Atlassian (HipChat)
● Yahoo (mail)
● Dropbox
● BBC
● Github
● CodeAcademy
● PayPal
● Imgur
![Page 6: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/6.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
● Fundamental building block of React
● Maps to element in your DOM
● Composable units to structure your app
React Component
![Page 7: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/7.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Component● Created using React.createClass()● The only required method is render()● Inserted into DOM using ReactDOM.render
![Page 8: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/8.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Props● Passed down to component from parent component and
represents data for the component● accessed via this.props
![Page 9: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/9.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
State● Represents internal state of the
component● Accessed via this.state● When a component's state data
changes, the rendered markup will be updated by re-invoking render() method
![Page 10: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/10.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
JSX● XML-like syntax for generating component’s HTML● Easier to read and understand large DOM trees
![Page 11: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/11.jpg)
http://jyaasa.comCopyright 2016. Jyaasa Technologies.
Virtual DOM● The virtual DOM is used for efficient re-rendering of the DOM● React aims to re-render the virtual tree only when the state
changes● Uses 2 virtual trees (new and previous) to find differences
and batch update real DOM● Observes data changes (setState) and does dirty-checking to
know when to re-render component
![Page 12: Introduction of React.js](https://reader031.fdocuments.us/reader031/viewer/2022030210/58a5c4831a28ab0b068b6df9/html5/thumbnails/12.jpg)
Thank you!
Any Queries?
facebook.com/nikesh.suwalgithub.com/nikeshsuwal
http://jyaasa.comCopyright 2015. Jyaasa Technologies. Copyright 2016. Jyaasa Technologies. http://jyaasa.com