Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Reactjs

Intro to Reactjs

A quick intro to React.js

Michael Lancaster

May 12, 2015
Tweet

More Decks by Michael Lancaster

Other Decks in Technology

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