Scribd
Upload
0 views

Reactredux

The document provides an overview of React and Redux, highlighting their features such as the Virtual DOM, JSX syntax, and the concept of state management in applications. It covers the creation and rendering of components, the use of stateless function components, and the integration of Redux for predictable state management. Additionally, it emphasizes the benefits of using these technologies in building reusable and efficient user interfaces.

Uploaded by

liztijara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Reactredux

The document provides an overview of React and Redux, highlighting their features such as the Virtual DOM, JSX syntax, and the concept of state management in applications. It covers the creation and rendering of components, the use of stateless function components, and the integration of Redux for predictable state management. Additionally, it emphasizes the benefits of using these technologies in building reusable and efficient user interfaces.

Uploaded by

liztijara
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

React + Redux

Nik Graf
@nikgraf

[email protected]

Creator of Belle (UI Components)

Working with StarterSquad

Travelled around the World


React + Redux @nikgraf
ECMAScript2015

const sum = (first, second) => {


return first + second;
}

React + Redux @nikgraf


Created by Sebastian McKenzie

- ECMAScript 2015 Support, JSX Support


- Widely adopted

React + Redux @nikgraf


Let’s get started

Source: https://www.flickr.com/photos/mike52ad/
React

React is a JavaScript Library for building user


interfaces.

• Focus on the UI, not a Framework

• One-way reactive data flow (no two-way data binding)

• Virtual DOM

React + Redux @nikgraf


Virtual DOM

Keep track of state in DOM is hard.

The DOM API is slow.


(Try to re-render the whole DOM on every change)

React + Redux @nikgraf


Virtual DOM

Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

React + Redux @nikgraf


Virtual DOM

Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

React + Redux @nikgraf


Virtual DOM Benefits

Batched DOM read/write operations.

Efficient update of sub-tree only.

React + Redux @nikgraf


Our first Experiment Part I

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="bundle.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>

index.html

React + Redux @nikgraf


Our first Experiment Part II

import React from 'react';


import ReactDOM from 'react-dom';

const exampleElement = document.getElementById('example');


ReactDOM.render(<h1>Hello, world!</h1>, exampleElement);

main.js -> bundle.js

React + Redux @nikgraf


JSX
JSX is a JavaScript syntax extension
that looks similar to XML.

// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

React + Redux @nikgraf


Rendering a Component

import React from 'react';


import ReactDOM from 'react-dom';

const App = () => {


return (<p>Hello World!</p>);
}

const exampleNode = document.getElementById('example');


ReactDOM.render(<App />, exampleNode);

main.js -> bundle.js

React + Redux @nikgraf


Rendering a Component

<body>
<div id="example">
<p> <!-- App start -->
Hello World!
</p> <!-- App end -->
</div>
</body>

index.html

React + Redux @nikgraf


Nested Components Part I

import React from 'react';

const Profile = ({avatar, name}) => {


return (
<div>
<img src={avatar} />
<span>{name}</span>
</div>
);
}

profile.js

React + Redux @nikgraf


Nested Components Part II
import React from 'react';
import ReactDOM from 'react-dom';
import Profile from ‘./profile';

const App = () => {


return (
<div>
<h1>Hello World!</h1>
<Profile avatar="http://test.png" name="Nik" />
</div>
);
}

const exampleNode = document.getElementById('example');


ReactDOM.render(<App />, exampleNode);
main.js -> bundle.js

React + Redux @nikgraf


Nested Components Part III

<body>
<div id="example">
<div> <!-- App start -->
<h1>Hello World!</h1>
<div> <!-- Profile start -->
<img src="http://test.png" />
<span>Nik</span>
</div> <!-- Profile end -->
</div> <!-- App end -->
</div>
</body>
index.html

React + Redux @nikgraf


Stateless Function Components
Functional Programming:
- avoid changing-state
- avoid mutable data
- calling a function twice with the same values as arguments will
produce the same result

Stateless Function Components:


- avoid changing-state
- avoid mutable data
- calling a function twice with the same values as arguments will
produce the same result
React + Redux @nikgraf
Wait, but why?
Predictable

easy to understand
&
easy to test
React + Redux @nikgraf
React + Redux @nikgraf
If/Else
const Profile = ({name, isOnline}) => {
let onlineIndicator;
if (isOnline) {
onlineIndicator = (<span>green</span>);
} else {
onlineIndicator = (<span>red</span>);
}

return (
<div>
{name} {onlineIndicator}
</div>
);
} profile.js

React + Redux @nikgraf


If/Else
<Profile name="Nik" isOnline={false}/>

<div>
Nik <span>red</span>
</div>

React + Redux @nikgraf


Loop

const FriendList = ({friends}) => {


return (
<ul>
{friends.map((friend) => {
return <li>{friend.name}</li>;
})}
</ul>
);
}

friendlist.js

React + Redux @nikgraf


Loop
const friends = [
{ name: 'Max'},
{ name: 'Tom'},
];

<FriendList friends={friends} />

<ul>
<li>Max</li>
<li>Tom</li>
</ul>

React + Redux @nikgraf


React Summary

- We can create out own components

- We can nest components as we like

- Stateless Function Components are pure

- We can control flow via JS (if, else, for, map …)

React + Redux @nikgraf


Interaction
const Profile = ({name}) => {
return (
<div>
{name}
<button onClick={ console.log('Clicked!'); }>
Click me!
</button>
</div>
);
}

profile.js

React + Redux @nikgraf


What to do with interactions like
onMouseOver,
onSubmit &
onClick?

React + Redux @nikgraf


Redux to rescue!
Redux allows you to manage the state with a
minimal API but completely predictable behaviour.

React + Redux @nikgraf


What about Flux?

Source: https://twitter.com/codecartoons/status/667348216669741056

React + Redux @nikgraf


Basic Principle

(previousState, action) => newState

React + Redux @nikgraf


React + Redux @nikgraf
Redux Flow
dispatch(action) (previousState, action)
Action
Store Reducers
Creators
(newState)
(state)

React
Components
Interaction e.g onClick

React + Redux @nikgraf


Feels like Fear just turned
into a Superpower

React + Redux @nikgraf


Action

const action = {
type: 'ADD_TODO',
text: 'Call Mom',
}

React + Redux @nikgraf


Action Creator
function addTodo(text) {
const trimmedText = text.trim();
return {
type: 'ADD_TODO',
text: trimmedText,
}
}
actions.js

<button onClick={ dispatch(addTodo('Call Mom ') }>


Add Todo
</button>

React + Redux @nikgraf


Reducer
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
{
text: action.text,
completed: false
}
]
default:
return state
}
} reducers.js

React + Redux @nikgraf


Store
import { createStore } from 'redux'
import todoReducer from '../reducers'
let store = createStore(todoReducer);

store.subscribe(() =>
console.log(store.getState())
)

store.dispatch(addTodo('Learn about reducers'));


store.dispatch(addTodo(‘Call Mom'));

React + Redux @nikgraf


Connect React with Redux
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import todoApp from './reducers';
import App from './containers/App';

let store = createStore(todoApp);

let exampleNode = document.getElementById('example');


ReactDOM.render(
<Provider store={store}><App /></Provider>,
exampleNode
);

React + Redux @nikgraf


Connect React +Redux
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions.js';

const App = ({dispatch, state}) => {


return (
<button onClick={ dispatch(addTodo('Call Mom') }>
Add Todo
</button>
);
};

export default connect(App);

React + Redux @nikgraf


Redux Summary

- Redux allows you to manage the state with


predictable behaviour.

- (previousState, action) => newState

React + Redux @nikgraf


React + Redux @nikgraf
Time-travel Demo

React + Redux @nikgraf


Why this Stack?

- Reusable Components

- Predictable Code (functional)

- TimeTravel

- Performant & lightweight

React + Redux @nikgraf


Is it production ready?
React

- used by Facebook, Firefox, Airbnb and many more

Redux

- used by Firefox, Docker, Technical University of


Vienna, Mattermark and many more

- “Love what you’re doing with Redux”


Jing Chen, creator of Flux
React + Redux @nikgraf
Vienna React Meetup

Source: http://www.wolfography.at/
The End
Thanks for listening!

https://github.com/nikgraf
https://twitter.com/nikgraf

Vienna React Meetup

http://www.meetup.com/Vienna-ReactJS-Meetup/

React + Redux @nikgraf

You might also like