React JS Crash Course

Presentation for React JS Crash Course held @ Ingenuity HQ

Transcript

2. • • • • • • •
6. Setup ReactJS CLI Prerequisites: 1. Code Editor (Sublime Text, Visual Studio Code, Atom, etc.) 2. Up-to-date Browsers (Chrome, Safari, Firefox, etc.) 3. You should have Node.JS installed. (https://nodejs.org/en/) Terminal npm install -g create-react-app create-react-app my-app You can try to run the app by doing the following: cd my-app yarn start
8. const element = <h1>Hello, world!</h1>;
9. 2 + 2 user.firstName formatName(user) function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );
10. function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
11. const element = <div tabIndex="0"></div>; const element = <img src={user.avatarUrl}></img>;
12. const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
13. const title = response.potentiallyMaliciousInput; // This is safe: const element = <h1>{title}</h1>;
14. const element = ( <h1 className="greeting"> Hello, world! </h1> ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
16. const element = <h1>Hello, world</h1>;
17. <div id="root"></div> ReactDOM.render(): const element = <h1>Hello, world</h1>; ReactDOM.render( element, document.getElementById('root') );
18. function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000);
21. function Welcome(props) { return <h1>Hello, {props.name}</h1>; } This function is a valid React component because it accepts a single "props" object argument with data and returns a React element. We call such components "functional" because they are literally JavaScript functions.
22. class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } Classes have some additional features that we will discuss in the next sections. Until then, we will use functional components for their conciseness.
23. const element = <div />; const element = <Welcome name="Sans" />; function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sans" />; ReactDOM.render( element, document.getElementById('root') );
24. function Welcome(props) { return <h1>Hello, {props.name}</h1>; } function App() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') );
25. function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }
26. function Avatar(props) { return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); }
27. function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <Avatar user={props.author} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }
28. function UserInfo(props) { return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> ); }
29. function Comment(props) { return ( <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }
30. function sum(a, b) { return a + b; } function withdraw(account, amount) { account.total -= amount; }
32. function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000);
33. function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000);
34. class Clock extends React.Component { render() { return ( <div className=”Clock”> <h1>Hello, world!</h1> <h2>It is {this.props.date.toLocaleTimeString()}.</h2> </div> ); } }
35. class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
36. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
37. ReactDOM.render( <Clock />, document.getElementById('root') );
38. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('root') );
40. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } // These methods are called "lifecycle hooks". componentDidMount() { } componentWillUnmount() { } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
41. The componentDidMount() hook runs after the component output has been rendered to the DOM. This is a good place to set up a timer: componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } NOTE: While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that is not used for the visual output.
42. componentWillUnmount() { clearInterval(this.timerID); }
43. class Clock extends React.Component { ... tick() { this.setState({ date: new Date() }); } ... }
44. // Wrong this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'});
45. // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); // Correct this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));
46. constructor(props) { super(props); this.state = { posts: [], comments: [] }; }
47. componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts }); }); fetchComments().then(response => { this.setState({ comments: response.comments }); }); }