Intro to Reactjs

A quick intro to React.js

Transcript

1. Intro to React.js
   

   View Slide

2. How a Chinese Company
   built a 57-storey skyscrapers
   in 19 days?
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Composability
   Encapsulation
   Reusability
   Declarative Flexibility
   Performance
   Interoperability
   

   View Slide

7. View Slide

8. JSX
   

   View Slide

9. import React from "react";
   import ReactDOM from "react-dom";
   class App extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
   todos: ['buy soy milk', 'call mom']
   }
   }
   render() {
   return ()
   }
   }
   const Todos = ({todos}) => {
   return (
   
   {todos.map(todo => {
   return
   })}
   
   )
   };
   const TodoItem = ({todo}) => ({todo});
   const rootElement = document.getElementById("root");
   ReactDOM.render(, rootElement);
   

   View Slide

10. View Slide

11. Compiled
    

    View Slide

12. var App =
    (function(_React$Component) {
    _inherits(App, _React$Component);
    function App(props) {…}
    _createClass(App, [
    {
    key: "render",
    value: function render() {
    return React.createElement(
    "div",
    null,
    React.createElement(Todos, {
    todos: this.state.todos
    })
    );
    }
    }
    ]);
    return App;
    })(React.Component);
    var Todos = function Todos(_ref) {
    var todos = _ref.todos;
    return React.createElement(
    "ul",
    null,
    todos.map(function(todo) {
    return React.createElement(TodoItem, {
    key: todo.replace(" ", ""),
    todo: todo
    });
    })
    );
    };
    var TodoItem = function TodoItem(_ref2) {
    var todo = _ref2.todo;
    return React.createElement("li", null, todo);
    };
    

    View Slide

13. import React from "react";
    import ReactDOM from "react-dom";
    class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    todos: ['buy soy milk', 'call mom']
    }
    }
    render() {
    return ()
    }
    }
    const Todos = ({todos}) => {
    return (
    
    {todos.map(todo => {
    return
    })}
    
    )
    };
    const TodoItem = ({todo}) => ({todo});
    const rootElement = document.getElementById("root");
    ReactDOM.render(, rootElement);
    

    View Slide

14. Diff Algorithm
    

    View Slide

15. Level by Level
    * source http://calendar.perfplanet.com/2013/diff/
    

    View Slide

16. Components
    * source http://calendar.perfplanet.com/2013/diff/
    

    View Slide

17. List
    * source http://calendar.perfplanet.com/2013/diff/
    

    View Slide

18. Batching
    * source http://calendar.perfplanet.com/2013/diff/
    

    View Slide

19. Sub-tree rendering
    * source http://calendar.perfplanet.com/2013/diff/
    

    View Slide

20. Selective Sub-tree rendering
    * source http://calendar.perfplanet.com/2013/diff/
    

    View Slide

21. Component Lifecycle
    

    View Slide

22. Mounting
    Update (new props or state)
    constructor()
    static getDerivedStateFromProps()
    render()
    componentDidMount()
    static getDerivedStateFromProps()
    shouldComponentUpdate()
    render()
    getSnapshotBeforeUpdate()
    componentDidUpdate()
    Unmounting
    componentWillUnmount()
    Error Handling
    static getDerivedStateFromError()
    componentDidCatch()
    

    View Slide

23. Props vs State
    

    View Slide

24. - Props State
    Can get initial value from parent Component? Yes Yes
    Can be changed by parent Component? Yes No
    Can set default values inside Component? Yes Yes
    Can change inside Component? No Yes
    Can set initial value for child Components? Yes Yes
    

    View Slide

25. React-Native
    React-Native-Web
    React-Primitives
    React-Sketch
    React-360
    React-Native-Windows
    

    View Slide

26. Demo
    

    View Slide

27. Thanks!
    

    View Slide