Intro to Reactjs

A quick intro to React.js

Transcript

1. Intro to React.js
2. How a Chinese Company built a 57-storey skyscrapers in 19 days?
6. Composability Encapsulation Reusability Declarative Flexibility Performance Interoperability
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);
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!