Intro to Reactjs

Intro to Reactjs

A quick intro to React.js

4804f554e4517c893086e6abb1ef6559?s=128

Michael Lancaster

May 12, 2015
Tweet

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!