Tweet
Tweet

Slide 1

Slide 1 text

Intro to React.js

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Composability Encapsulation Reusability Declarative Flexibility Performance Interoperability

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

JSX

Slide 9

Slide 9 text

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);

    Slide 10

    Slide 10 text

    No content

    Slide 11

    Slide 11 text

    Compiled

    Slide 12

    Slide 12 text

    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); };

    Slide 13

    Slide 13 text

    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);

    Slide 14

    Slide 14 text

    Diff Algorithm

    Slide 15

    Slide 15 text

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

    Slide 16

    Slide 16 text

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

    Slide 17

    Slide 17 text

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

    Slide 18

    Slide 18 text

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

    Slide 19

    Slide 19 text

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

    Slide 20

    Slide 20 text

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

    Slide 21

    Slide 21 text

    Component Lifecycle

    Slide 22

    Slide 22 text

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

    Slide 23

    Slide 23 text

    Props vs State

    Slide 24

    Slide 24 text

    - 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

    Slide 25

    Slide 25 text

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

    Slide 26

    Slide 26 text

    Demo

    Slide 27

    Slide 27 text

    Thanks!