Downloaded 72 times
Uploaded bySergey Romaneko
React JS - Introduction
React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.
React JS - Introduction
- 1.
- 2.
- 3. React is aJavaScript library created by a collaboration of Facebook and Instagram. Its aim is to allow developers to create fast user interfaces easily.
- 4. Big companies useReact
- 5.
- 6. React isn’t acomplete framework.
- 7. React is justthe V in MVC.
- 8. Main aspects ofReact
- 9. VIRTUAL DOM REALDOM PATCH virtial dom tree real dom tree
- 10. SERVER-SIDE RENDERING BROWSER REACT NODE.JS Updates Markup DataData Page Render HTTP Request
- 11.
- 12. Getting Started withReact
- 13.
- 14. COMPONENTS var MyComponent =React.createClass({ render: function() { return ( React.createElement("div", null, "Hello World"); ) } }); React.render( <MyComponent/>, document.body );
- 15.
- 16. JSX var MyComponent =React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }); React.render( <MyComponent/>, document.body );
- 17.
- 18. PROPS var MyComponent =React.createClass({ render: function() { return ( <h1>{this.props.message}</h1> ) } }); React.render( <MyComponent message="Hello World"/>, document.body );
- 19.
- 20. STATE var MyComponent =React.createClass({ getInitialState: function() { return { message: "Hello World" } }, render: function() { return ( <h1>{this.state.message}</h1> ) } }); React.render(<MyComponent/>, document.body);
- 21. Simple APP withReact
- 22. index.html <html> <head> <title>Hello World withReact</title> </head> <body> <script src="https://fb.me/react-0.12.2.js"></script> <script src="https://fb.me/JSXTransformer-0.12.2.js"></script> <script type="text/jsx" src="hello.jsx"></script> <script type="text/jsx" src="main.jsx"></script> </body> </html>
- 23. hello.jsx var Hello =React.createClass({ render: function() { return <p>{this.props.message}</p>; } });
- 24. main.jsx React.render( <Hello message="Hello, world!"/>, document.body );
- 25.