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.

Intro to React | DreamLab Academy

116 views

Published on

Podstawy wykorzystania biblioteki React.js. Prezentacja przedstawiona na warsztatach dla studentów Politechniki Krakowskiej w ramach cyklu wartsztatów DreamLab Academy. W razie pytań zapraszamy do kontaktu academy@dreamlab.pl

The presentation was created for a DreamLab Academy workshop on React.js. For more details get in touch - academy@dreamlab.pl

Published in: Software
  • Be the first to comment

Intro to React | DreamLab Academy

  1. 1. Intro to React Mariusz Wieczorkiewicz Marek Mitis
  2. 2. controllers Services templates models
  3. 3. Controllers Services templates models COMPONENTS
  4. 4. REACT === COMPONENTS
  5. 5. Virtual DOM <=> DOM(Document Object Model)
  6. 6. Data Flow and Components Structure
  7. 7. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <AppRoot />, document.getElementById('root') );
  8. 8. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <AppRoot />, document.getElementById('root') ); Main component
  9. 9. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <AppRoot />, document.getElementById('root') ); Node managed by React DOM
  10. 10. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') );
  11. 11. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <AppRoot />, document.getElementById('root') ); “ReactDOM is the glue between React and the DOM”
  12. 12. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp;
  13. 13. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp; function
  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; function
  15. 15. 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
  16. 16. 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 ===
  17. 17. export function TodoApp() { return ( <h1>Learn React</h1> ); } XML???
  18. 18. JSX
  19. 19. Compilation function TodoApp() { return ( <h1 className="main-header"> Learn React </h1> ); } function TodoApp() { return React.createElement( "h1", {className: "main-header"}, "Learn React" ); } compilation
  20. 20. Props function TodoApp({task}) { return ( <h1>{task}</h1> ); }
  21. 21. Props function TodoApp({task}) { return ( <h1>{task}</h1> ); } <TodoApp task={"Learn React"}/>
  22. 22. class TodoApp extends React.Component { render() { return ( <h1>{this.props.task}</h1> ); } } <TodoApp task={"Learn React"}/>
  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. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.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 class TodoApp extends React.Component { constructor(props) { super(props); this.state = { task: 'Learn React' } } render() { return ( <h1>{this.state.task}</h1> ); } }
  28. 28. State is mutable addNewTask() { this.setState({ task: 'My new task' }); }
  29. 29. State is mutable addNewTask() { this.setState({ task: 'My new task' }); }
  30. 30. setState is asynchronous addNewTask() { this.setState({ task: 'My new task' }, function() { this.sendTask(this.state.task); }); }
  31. 31. Events addTask(e) { ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
  32. 32. Events addTask(e) { ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
  33. 33. Events addTask(e) { e.preventDefault(); ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
  34. 34. Events addTask(e) { e.preventDefault(); ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); } stops the default action of an element
  35. 35. Child component import TodoList from './TodoList'; export class TodoApp extends React.Component { render() { return ( <div> ... <TodoList items={this.state.items} /> </div> ); }}
  36. 36. Child component import TodoList from './TodoList'; export class TodoApp extends React.Component { render() { return ( <div> ... <TodoList items={this.state.items} /> </div> ); }}
  37. 37. Render multiple components render() { return ( <ul> {this.props.items.map((item) => { return ( <li key={item.id}>{item.text}</li> ) })} </ul> ) }
  38. 38. 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.
  39. 39. The component lifecycle constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
  40. 40. The component lifecycle constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount() mounting updating unmounting
  41. 41. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
  42. 42. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
  43. 43. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount() Invoke only if shouldComponentUpdate return true
  44. 44. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.arrayOf(PropTypes.string) };
  45. 45. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } const {arrayOf, string, bool, func, shape, oneOfType} = PropTypes; TodoList.propTypes = { items: arrayOf(string), loadNew: bool, updateItems: func.isRequired, order: oneOfType(null, shape({value: number, items:arrayOf(string)}) };
  46. 46. Want more? - React Documentation (https://reactjs.org/docs/hello-world.html) - Better State management: Redux (https://redux.js.org/introduction) - Make your data immutable for real: Immutable.js (https://facebook.github.io/immutable-js) - Test your Components: Jest (https://facebook.github.io/jest/docs/en/getting-started.html) - Make great documentation: React Story Book (https://github.com/storybooks/storybook)
  47. 47. Why i should learn React? ➔ Awesome testability and debug ➔ Strong support / Popularity ➔ Loose, extendable architecture ➔ Reusable components ➔ React is not just library, it’s a platform: Next.js -> Server Side Rendering Gatsby.js -> Static Sites React Native -> Mobile Apps ReactVR -> VR Apps
  48. 48. Questions?
  49. 49. https://goo.gl/DvVWq1

×