Intro to Reactjs

Transcript

1. Intro to React.js

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

   days?
3. None
4. None
5. None

6. Composability Encapsulation Reusability Declarative Flexibility Performance Interoperability

7. None

8. JSX

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 (<div><Todos todos={this.state.todos} /></div>) } } const Todos = ({todos}) => { return ( <ul> {todos.map(todo => { return <TodoItem key={todo.replace(' ', ‘’)} todo={todo} /> })} </ul> ) }; const TodoItem = ({todo}) => (<li>{todo}</li>); const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
10. None

11. Compiled

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

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 (<div><Todos todos={this.state.todos} /></div>) } } const Todos = ({todos}) => { return ( <ul> {todos.map(todo => { return <TodoItem key={todo.replace(' ', ‘’)} todo={todo} /> })} </ul> ) }; const TodoItem = ({todo}) => (<li>{todo}</li>); const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

14. Diff Algorithm

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

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

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

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

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

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

21. Component Lifecycle

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

23. Props vs State

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

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

26. Demo

27. Thanks!