1. 15 minute break

2. MIT GSL
2018
week 1 | day 5
ReactJS I

3. ReactJS
React is a JavaScript library for building reactive user interfaces developed and distributed by the Facebook team
In other words, it is a tool for web apps, to enable them to have reusable, interactive, and stateful UI’s. It adds some liveliness to otherwise static web-pages.
It is a rendering tool used by Meteor - the View in a Model-View- Controller

4. Meteor
Supports three rendering libraries: Blaze(Meteor), Angular(Google), ReactJs(Facebook)
React and Angular enforce a better component structure, which makes developing larger apps easier
React uses JSX, with which you write your HTML in JavaScript. While it doesn’t have the logic-view separation most libraries have, it also has the most flexibility. Template functions and event handlers are defined in the same file as the HTML part of the component, which usually makes it easier to understand how they are tied together.

5. Principal Aspects of React
Components
Organizing a hierarchy between them
Props
Passing data around (uni-directionally)
State
Container immutability
Event
Triggers and handlers
Forms

6. JSX Allows you to embed HTML inside javascript
Syntax extension inside javascript
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display
reactjs.org
const element = <h1>Hello, world!</h1>;

7. ReatJS Examples
const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>; ReactDOM.render( element, document.getElementById('root') );
//try this is at
//In javascript settings, set preprocessor to Babel

8. ReatJS Examples function formatName(user){
return user.firstName + ‘ ‘ + user.lastName; }
const user = {firstName: ‘Harper’, lastName: ‘Perez’};
const element = (<h1>Hello, {formatName(user )}!</h1>); ReactDOM.render( element, document.getElementById('root') );

9. Rendering in React
To render a React element into a root DOM node, pass both to ReactDOM.render() (see previous examples)
React elements are immutable(can not be changed). Once created you can not change its children or attributes.
Currently the only way we know to update is to create a new element and pass it to ReactDOM.render()
React automatically renders only what is necessary by comparing it to the previous element

10. Rendering Example
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);
//try this in codepen, what does this do? What happens when we inspect the page?

11. Components
Allow you to separate UI into independent, reusable pieces and think about each piece isolation.
Components are like JavaScript functions. They accept any inputs( called “props”) and return React elements describing what should appear on the screen.
Simplest React component is a function:
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }

12. These components are equal
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
class Welcome extends React.Component { render(){
return <h1>Hello, {this.props.name}</h1>; } }

13. Composing Components
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
const element = <Welcome name=”Sara”/>; ReactDOM.render( element, document.getElementById('root') );
User created tag

14. Composing Components
React treats components starting with lowercase letters as DOM tags.
ex. <div /> represents HTML div tag. <Welcome /> represents a component and requires Welcome to be in scope.
Components can refer to other components in their output.
A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

15. Composing Components
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'));

16. Splitting up Components
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> );}
Accepts author(object), text (string) and date (date) as props and describes a comment on a social media website

17. How can we split this up?

18. How can we split this up? First, let is extract Avatar
function Avatar(props){
return (
<img className="Avatar" src={props.author.avatarUrl} alt={props.author.name}/> );}

19. How can we split this up?
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> );}

20. How can we split this up?
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> );}

21. How can we split this up?
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> );}

22. How can we split this up? Next, we will extract UserInfo
function Avatar(props){
return (
<div className="UserInfo"> <Avatar user={props.user}/> <div className="UserInfo-name">{props.user.name}</div> </div> );}

23. How can we split this up?
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> );}

24. How can we split this up?
function Comment(props) { return ( <div className="Comment"> <UserInfo user="UserInfo"> <div className="Comment-text">{props.text}</div> <div className="Comment-date">{formatDate(props.date)}</div> </div> );}

25. To split or not to split?
Splitting up components may seem tiresome at first but having a range of reusable components saves you time in the future.
Rule of thumb: If part of UI is used several times, or is complex enough on its own, it should be made into a reusable component.

26. Props
Props that are pass to components as a function or class must never be modified.
Accessed via this.props in the child component
Props allow data to be passed from parent to child component

27. Principal Aspects of React
Components
Organizing a hierarchy between them
Props
Passing data around (uni-directionally)
State
Container immutability
Event
Triggers and handlers
Forms

28. Any Questions on JavaScript, HTML, CSS, ReactJS?

29. ReactJS Project!