Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Quick start with React | DreamLab Academy #2

Szybki start z React. Prezentacja przedstawiona na warsztatach z podstaw technologii React w ramach DreamLab Academy.

W razie pytań zapraszamy do kontaktu academy@dreamlab.pl

  • Login to see the comments

Quick start with React | DreamLab Academy #2

  1. 1. Intro to React Marcin Śpiewak Marek Mitis
  2. 2. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') );
  3. 3. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') ); Node managed by React DOM
  4. 4. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') ); Main component
  5. 5. controllers Services templates models
  6. 6. Controllers Services templates models COMPONENTS
  7. 7. REACT === COMPONENTS
  8. 8. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') );
  9. 9. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') ); “ReactDOM is the glue between React and the DOM”
  10. 10. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp;
  11. 11. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp; function
  12. 12. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp; import React from 'react'; export class TodoApp extends React.Component { render() { return ( <h1>Learn React</h1> ); } } export default TodoApp; function
  13. 13. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp; import React from 'react'; export class TodoApp extends React.Component { render() { return ( <h1>Learn React</h1> ); } } export default TodoApp; classfunction
  14. 14. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp; import React from 'react'; export class TodoApp extends React.Component { render() { return ( <h1>Learn React</h1> ); } } export default TodoApp; classfunction ===
  15. 15. export function TodoApp() { return ( <h1>Learn React</h1> ); } XML???
  16. 16. JSX
  17. 17. Compilation function TodoApp() { return ( <h1>Learn React</h1> ); } function TodoApp() { return React.createElement( "h1", null, "Learn React" ); } compilation
  18. 18. Compilation function TodoApp() { return ( <h1>Learn React</h1> ); } function TodoApp() { return React.createElement( "h1", null, "Learn React" ); } compilation
  19. 19. Props function TodoApp({task}) { return ( <h1>{task}</h1> ); }
  20. 20. Props function TodoApp({task}) { return ( <h1>{task}</h1> ); } <TodoApp task={"Learn React"}/>
  21. 21. class TodoApp extends React.Component { render() { return ( <h1>{this.props.task}</h1> ); } } <TodoApp task={"Learn React"}/>
  22. 22. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.task}</h1> ); } }
  23. 23. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.task}</h1> ); } }
  24. 24. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.task}</h1> ); } }
  25. 25. State class TodoApp extends React.Component { constructor(props) { super(props); this.state = { task: 'Learn React' } } render() { return ( <h1>{this.state.task}</h1> ); } }
  26. 26. State class TodoApp extends React.Component { constructor(props) { super(props); this.state = { task: 'Learn React' } } render() { return ( <h1>{this.state.task}</h1> ); } }
  27. 27. State is mutable addNewTask() { this.setState({ task: 'My new task' }); }
  28. 28. State is mutable addNewTask() { this.setState({ task: 'My new task' }); }
  29. 29. Events addTask(e) { ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
  30. 30. Events addTask(e) { ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
  31. 31. Events addTask(e) { e.preventDefault(); ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
  32. 32. Events addTask(e) { e.preventDefault(); ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); } stops the default action of an element
  33. 33. Child component import TodoList from './TodoList'; export class TodoApp extends React.Component { render() { return ( <div> ... <TodoList items={this.state.items} /> </div> ); }}
  34. 34. Child component import TodoList from './TodoList'; export class TodoApp extends React.Component { render() { return ( <div> ... <TodoList items={this.state.items} /> </div> ); }}
  35. 35. Render multiple components render() { return ( <ul> {this.props.items.map((item) => { return ( <li key={item.id}>{item.text}</li> ) })} </ul> ) }
  36. 36. Render multiple components render() { return ( <ul> {this.props.items.map((item) => { return ( <li key={item.id}>{item.text}</li> ) })} </ul> ) } This way React can handle the minimal DOM change.
  37. 37. The component lifecycle constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
  38. 38. The component lifecycle constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount() mounting updating unmounting
  39. 39. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
  40. 40. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
  41. 41. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount() Invoke only if shouldComponentUpdate return true
  42. 42. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.string.isRequired };
  43. 43. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.string.isRequired };
  44. 44. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.string.isRequired };
  45. 45. Thanks [Dzięki]
  46. 46. Thanks [Dzięki]

×