Introduction to ReactJS, with it's pillars, basics and advantages.

1. ReactJS
A quick introduction to Awesomeness
Copyright © Ronny Haase, 2017

2. Why should I care?
● Component based
● Declarative
● Fast - Client, Server, Universal
● Simple
● Free choice of ecosystem around (can also be considered a drawback)
Frontend engineering done right

3. Why should I care?
Because these guys do care a lot:
Airbnb, Atlassian, eBay, Dropbox, EyeEM, Facebook, Flipboard, Google, Khan
Academy, Mozilla, Netflix, PayPal, Pinterest, Rangle.io, Salesforce, Slack, Spotify, Tilt,
Twitch, Twitter, Uber, WalMart, Yahoo, Zalando
https://github.com/facebook/react/wiki/sites-using-react

4. The Pillars

5. <Component />s

6. Components
“Declarative
React makes it painless to create interactive UIs. Design simple views for each state in
your application, and React will efficiently update and render just the right
components when your data changes.
Declarative views make your code more predictable and easier to debug.”

7. “Component-Based
Build encapsulated components that manage their own state, then compose them to
make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass
rich data through your app and keep state out of the DOM.”
Components

8. Components
Two Types:
Presentational Container
Components are simply functions!
(internally “classes” are functions in JavaScript as well)

9. Presentational Components
Only markup, TodoItem
<div className=”TodoItem”>
<label className=”TodoItem-Title”>{props.title}</label>
<div className=”BtnGroup”>
<button className=”Btn” onClick={props.editItem}>Edit</button>
<button className=”Btn” onClick={props.removeItem}>Remove</button>
</div>
</div>

10. Presentational Components
<TodoItemWrapper>
<TodoItemTitle>{props.title}</TodoItemTitle>
<ButtonGroup>
<Button onClick={props.editItem}>Edit</Button>
<Button onClick={props.removeItem}>Remove</Button>
</ButtonGroup>
<TodoItemWrapper>

11. Presentational Components
const TodoItem = (props) =>
<TodoItemWrapper>
<TodoItemTitle>{props.title}</TodoItemTitle>
<ButtonGroup>
<Button onClick={props.editItem}>Edit</Button>
<Button onClick={props.removeItem}>Remove</Button>
</ButtonGroup>
</TodoItemWrapper>

12. Components
● Build as granular, encapsulated and generic components as possible
○ Better Performance
○ Easier Debugging
○ Easier Testing
○ More readable and declarative
○ Reusable

13. Container Components
● Components that have state (we learn about state later)
● Handles it’s state and passes it down as props to presentational components
// Component
const NameOutput = ({ enteredName }) => <h1>Hi! My name is {enteredName}</h1>
// Container
class EnterName extends Component {
render() {
return
<div>
<input onChange={(ev) => this.setState({ name: ev.target.value })} />
<NameOutput enteredName={this.state.name}
</div>
}
}

14. JSX
JavaScript XML
● No requirement
● Makes React declarative
● It’s XML (like HTML is) with full JavaScript power (you could do anything
within curly braces)

15. Elements
Elements are instances of Components

16. Lifecycle Methods
Hooks on certain state changes:
(Constructor), Mount, Unmount, Should Update?, Will Update, etc.

17. Explicit
Uni-Directional Data Flow

18. Data Types

19. The Two Data Types in React Applications
In React there are only two types of data:
● State
● Props

20. Props
● Read-only (!)
● Passed from the top
● Can be passed on down
○ Prefer specific or no passing down
○ Only pass on all props when necessary
● Are a reflection of your component tree
○ You only get relevant data
○ And only pass on the data relevant for your children

21. State
● If a component requires data that can change, or needs to store data you put them
into its State
● Immutable, plain Objects
● Pass on down as props
● Eventually Props can be the source (do not assign by reference!)
this.state = this.props.whatever
this.state = { ...this.props.whatever }

22. Data Flow

24. Looks familiar?
Yep, It’s a mess!
Your backend already did the MVC part, why repeat it on front-end?!
Just take the data and put them into your view!

25. Action = Click, request, new data
Dispatcher = Container Component, or e.g. Redux Dispatcher
Store = Container State, or e.g. Redux Store
View = Presentational Components

26. FLUX

27. React is the V in MVCReact is the V in MVC

28. VDOM

29. The Browser DOM is slow.

30. VDOM
● React keeps it’s own DOM (subtree) representation(s) and a copy of the actual
DOM in memory
● On Change (Props or State)
○ It diffs the DOMs in memory (fast!)
○ Parses tree and only rerenders elements where necessary in memory (faster!)
○ Mutates DOM all at once (even faster!)
Only one DOM mutation instead of multiple, each may requiring a browser repaint
○ Reconciliation

31. Does this concept sound familiar?

35. Bonuses

36. Flawless Server-Side & Universal Rendering
Even faster!

37. Client-side (SPA)
import { render } from ‘react-dom’;
const el = document.getElementById(‘mount’);
render(<MyComponent />, el);

38. Server-side
import { renderToString as render } from ‘react-dom/server’;
render(<MyComponent />);

39. Universal
import { renderToString as render } from ‘react-dom/server’;
return `
<div id=”mount”>
${render(<MyComponent />)}
</div>
`;
If you call the code from 2 slides before on client-side now, React will recognize the server-side rendered
component and only attach the missing parts powered by VDOM (very, very, very performant!)

40. Links
● Hacker Way: Rethinking Web App Development at Facebook
Official React announcement
● Learning Functional Programming with JavaScript by Anjana Vakil
Very basic but great introduction to Functional Programming
● Functional Programming Series by Eric Elliott
Great for diving deeper into Functional Programming
● How we built Twitter Lite
Great example for a light, mobile-first, progressive web app, built with React

41. Questions?

42. Let’s do some coding!

43. API
https://nodod-rsmmjhqasm.now.sh/todos
GET / - Get list of all tasks
POST / - Create task
GET /:id - Get specific task
PUT /:id - Update specific task
DELETE /:id - Delete specific task
Schema:
TodoItem { “title”: “Task title”, “completed”: false,
“created_at”: “1498566756549”, “updated_at”: “1498566794201” }
Run your own: https://github.com/ronnyhaase/nodod