React JS - Introduction
•
4 j'aime•2,751 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (7)
Similaire à React JS - Introduction
Similaire à React JS - Introduction (20)
Dernier
Dernier (20)
React JS - Introduction
- 3. React is a JavaScript library created by a collaboration of Facebook and Instagram. Its aim is to allow developers to create fast user interfaces easily.
- 4. Big companies use React
- 6. React isn’t a complete framework.
- 7. React is just the V in MVC.
- 8. Main aspects of React
- 9. VIRTUAL DOM REAL DOM PATCH virtial dom tree real dom tree
- 10. SERVER-SIDE RENDERING BROWSER REACT NODE.JS Updates Markup Data Data Page Render HTTP Request
- 12. Getting Started with React
- 13. COMPONENTS
- 14. COMPONENTS var MyComponent = React.createClass({ render: function() { return ( React.createElement("div", null, "Hello World"); ) } }); React.render( <MyComponent/>, document.body );
- 15. JSX
- 16. JSX var MyComponent = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }); React.render( <MyComponent/>, document.body );
- 17. PROPS
- 18. PROPS var MyComponent = React.createClass({ render: function() { return ( <h1>{this.props.message}</h1> ) } }); React.render( <MyComponent message="Hello World"/>, document.body );
- 19. STATE
- 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 with React
- 22. index.html <html> <head> <title>Hello World with React</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 );