Quick start with React | DreamLab Academy #2
•
1 like•640 views
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
Report
Share
Related slideshows
Quick start with React | DreamLab Academy #2
- 1. Intro to React Marcin Śpiewak Marek Mitis
- 2. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') );
- 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. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') ); Main component
- 11. First app import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <div>Hello</div>, document.getElementById('root') );
- 12. 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”
- 13. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp;
- 14. Example component import React from 'react'; export function TodoApp() { return ( <h1>Learn React</h1> ); } export default TodoApp; function
- 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; function
- 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. 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 ===
- 18. export function TodoApp() { return ( <h1>Learn React</h1> ); } XML???
- 19. JSX
- 20. Compilation function TodoApp() { return ( <h1>Learn React</h1> ); } function TodoApp() { return React.createElement( "h1", null, "Learn React" ); } compilation
- 21. Compilation function TodoApp() { return ( <h1>Learn React</h1> ); } function TodoApp() { return React.createElement( "h1", null, "Learn React" ); } compilation
- 22. Props function TodoApp({task}) { return ( <h1>{task}</h1> ); }
- 23. Props function TodoApp({task}) { return ( <h1>{task}</h1> ); } <TodoApp task={"Learn React"}/>
- 24. class TodoApp extends React.Component { render() { return ( <h1>{this.props.task}</h1> ); } } <TodoApp task={"Learn React"}/>
- 25. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.task}</h1> ); } }
- 26. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.task}</h1> ); } }
- 27. Props are immutable class TodoApp extends React.Component { render() { this.props.task = 'New task'; return ( <h1>{this.props.task}</h1> ); } }
- 28. State class TodoApp extends React.Component { constructor(props) { super(props); this.state = { task: 'Learn React' } } render() { return ( <h1>{this.state.task}</h1> ); } }
- 29. State class TodoApp extends React.Component { constructor(props) { super(props); this.state = { task: 'Learn React' } } render() { return ( <h1>{this.state.task}</h1> ); } }
- 30. State is mutable addNewTask() { this.setState({ task: 'My new task' }); }
- 31. State is mutable addNewTask() { this.setState({ task: 'My new task' }); }
- 32. Events addTask(e) { ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
- 33. Events addTask(e) { ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
- 34. Events addTask(e) { e.preventDefault(); ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); }
- 35. Events addTask(e) { e.preventDefault(); ... } render() { return ( <form onSubmit={this.addTask}> ... </form> ); } stops the default action of an element
- 36. Child component import TodoList from './TodoList'; export class TodoApp extends React.Component { render() { return ( <div> ... <TodoList items={this.state.items} /> </div> ); }}
- 37. Child component import TodoList from './TodoList'; export class TodoApp extends React.Component { render() { return ( <div> ... <TodoList items={this.state.items} /> </div> ); }}
- 38. Render multiple components render() { return ( <ul> {this.props.items.map((item) => { return ( <li key={item.id}>{item.text}</li> ) })} </ul> ) }
- 39. 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.
- 44. Render method constructor() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount() Invoke only if shouldComponentUpdate return true
- 45. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.string.isRequired };
- 46. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.string.isRequired };
- 47. Typechecking with PropTypes import React, {PropTypes} from 'react'; export class TodoList extends React.Component { ... } TodoList.propTypes = { items: PropTypes.string.isRequired };
- 48. Thanks [Dzięki]
- 49. Thanks [Dzięki]