Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React JS - Introduction

  • Be the first to comment

React JS - Introduction

  1. 1. React JS Introduction
  2. 2. What is React?
  3. 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. 4. Big companies use React
  5. 5. Facebook Yahoo! Airbnb Instagram Sony
  6. 6. React isn’t a complete framework.
  7. 7. React is just the V in MVC.
  8. 8. Main aspects of React
  9. 9. VIRTUAL DOM REAL DOM PATCH virtial dom tree real dom tree
  10. 10. SERVER-SIDE RENDERING BROWSER REACT NODE.JS Updates Markup Data Data Page Render HTTP Request
  11. 11. ONE-WAY DATA-BINDING MODEL
  12. 12. Getting Started with React
  13. 13. COMPONENTS
  14. 14. COMPONENTS var MyComponent = React.createClass({ render: function() { return ( React.createElement("div", null, "Hello World"); ) } }); React.render( <MyComponent/>, document.body );
  15. 15. JSX
  16. 16. JSX var MyComponent = React.createClass({ render: function() { return ( <h1>Hello World</h1> ) } }); React.render( <MyComponent/>, document.body );
  17. 17. PROPS
  18. 18. PROPS var MyComponent = React.createClass({ render: function() { return ( <h1>{this.props.message}</h1> ) } }); React.render( <MyComponent message="Hello World"/>, document.body );
  19. 19. STATE
  20. 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. 21. Simple APP with React
  22. 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. 23. hello.jsx var Hello = React.createClass({ render: function() { return <p>{this.props.message}</p>; } });
  24. 24. main.jsx React.render( <Hello message="Hello, world!" />, document.body );
  25. 25. Sergey Romanenko @AwilumIT

×