React & Redux JS

ReactJS
A JavaScript library for building user interfaces
By Hamed Farag
@hamed_farag

console.info(‘Hello, I am Hamed Farag!’);
// Hello, I am Hamed Farag!

 ReactJS:
 History, What, Why, How it works?
 Environment
 Component
 Functional & Class Components
 Component Lifecycle
 Handling Events
 Conditional Rendering
 Render List
 Form
 Communication
 External Data
 Routing
 Extensions
 File Structure
 Tips & Tricks.
Agenda
 JS History.
 ES6 Basics For ReactJS.
 Recommended Books.
 Web Components.
 Component Architecture.
 SPA.

 Browsers War.
 Netscape, 1995.
 Scheme in browser.
 Java.
 Scheme, Self and Java.
 10 days!
 Mocha, LiveScript and JavaScript.
 ECMAScript.
A brief history of JS

console.warn(‘ES6 Basics’);
// ECMAScript 2015 Basics

ES6 – ECMAScript 2015
 Modules, Import and Export
 Arrow functions
 Constructor functions
 Classes and Extends
 Bind, apply, call
 Var, let and const
 Template Literals – Back-tick
 Object Destructuring
 Default, Rest and Spread

ES6 – ECMAScript 2015 – Cont.
Modules, Import and Export
 Modular programming is used to break large applications into smaller blocks of manageable code.
 Module based coding eases the effort for maintenance and increases reusability.

ES5
Modules at ES5

ES5
Modules with libraries, CommonJS and RequireJS(AMD)
OR

ES5
Modules with libraries, CommonJS and RequireJS(AMD)

ES6
Modules at ES6
OR

Arrow functions
ES5

Arrow functions
ES6
With ECMAScript 2015, JavaScript got arrow functions, which are mainly syntactic sugar for defining function
expressions and does not have its own this, arguments, super or new.target.
These function expressions are best suited for non-method functions, and they cannot be used as
constructors.

Constructor functions
ES5

ES5All JavaScript objects inherit properties and methods from a prototype.

ES6

Classes and Extends
ES6
 JavaScript classes, introduced in ECMAScript 2015
 Syntactical sugar over JavaScript's existing prototype-based inheritance.
 The class syntax does not introduce a new object-oriented inheritance model to JavaScript.
 Classes support static methods so you can called without instantiating their class and cannot be called through a
class instance.
 The extends keyword is used in class declarations or class expressions to create a class as a child of another class.
 The super keyword is used to call corresponding methods of super class.

Classes and Extends
ES6
// stephen hawking
// Hi Neil Person
// Hi Neil astrophysicist
// Hello Neil Person

Bind, Apply, Call and of course ‘THIS’
ES3/ES5
 Functions can be used in many different contexts, and they need to be able to work in each
situation. Even though this is typically assigned automatically, you can change its value to achieve
different goals.
There are three function methods that allow you to change the value of this.
 Remember that functions are objects, and objects can have methods, so functions can, too.

Bind, Apply, Call and of course ‘THIS’
ES3/ES5
// Family Name(Call) : Tyson
// My Family Name(Call) : Hawking
// Family Name(Apply) : Tyson
// My Family Name(Apply) : Hawking
// Family Name(Bind) : Tyson
// My Family Name(Bind) : Hawking

Var, let
ES5/ES6
var vs let
 Scope essentially means where these variables are
available for use. var declarations are globally scoped or
function/locally scoped.
 It is globally scoped when a var variable is declared
outside a function.
 var is function scoped when it is declared within a
function. This means that it is available and can be
accessed only within that function.
 let is block scoped { }

const
const
 const declarations are block scoped
 const cannot be updated or re-declared
ES6

ES6
Template literals are string literals allowing embedded expressions. You can use multi-line strings and
string interpolation features with them.
Template Literals – Back-tick

ES6
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values
from arrays, or properties from objects, into distinct variables.
// ["The Universe in a Nutshell", "On the Shoulders of Giants"]
Object Destructuring

ES6
Default function parameters allow formal parameters to be initialized with default values if no value or
undefined is passed.
Default

ES6
The rest parameter syntax allows us to represent an indefinite number of arguments as an array.
Rest

ES6
Spread syntax allows an iterable such as an array expression or string to be expanded in places where
zero or more arguments (for function calls) or elements (for array literals) are expected, or an object
expression to be expanded in places where zero or mor
Spread

BabelJS
ES6
* Polyfill is code that implements a feature on web browsers that do not support the feature
*

Useful Books
 The Good Parts 1st Edition by Douglas Crockford
 The Principles of object-oriented javascript - by Nicholas C. Zakas
 You don’t know JS by Kyle Simpson
Books

human.need(‘A Break’);
// don't be late

console.warn(‘Web Components’);
// Web Components

Web Components
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their
functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Four main technologies
 Custom elements.
 <Galaxy /> and register this custom tag so you can use it with your document.
 Shadow DOM.
 Attaching an encapsulated "shadow" DOM tree to an element.
 Resolve CSS Rules Problem for example.
 HTML templates.
 <template>
 HTTML imports.
 Example: <link rel="import" href="myfile.html">

Web Components
 The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in
web components
 Browser support
 Not all browsers support this feature yet
 Polymer 2.0
 webcomponents.org

console.warn(‘Component Architecture’);
// Component-Based-Architecture

Component Architecture
 A method for encapsulating individual pieces of a larger user interface (aka components) into self-
sustaining, independent micro-systems.
 Components have their own structure, their own methods and their own APIs.
 Components are also reusable and can be “pasted” into interfaces at will.
 The independent nature of components allows for developers to create a UI with many different
moving parts.
 Components each have their own interfaces that can make calls to the server and update their
interfaces.
 Separation of Concern Component, MVC splits responsibilities horizontally, CBA splits them vertically.

console.info(‘Jacuzzi and SPA’);
// You mean Single-Page Application !?

SPA – Single-Page Application
 Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically
update that page as the user interacts with the app.
 SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page
reloads.
 This approach avoids interruption of the user experience between successive pages, making the application
behave more like a desktop application.
 Just HTML, JavaScript, and CSS.
 JavaScript frameworks (ReactJS, AngularJS, EmberJS, VueJS and so on)
 Ajax
 Websockets
 Browser History

Traditional Page Lifecycle
In a traditional Web app, every time
the app calls the server, the server
renders a new HTML page. This
triggers a page refresh in the
browser. If you’ve ever written a
Web Forms application, this page
lifecycle should look familiar.
Page
Reload
Initial Request
HTML
Form Post
HTML
Client Server

SPA Lifecycle
In an SPA, after the first page loads,
all interaction with the server
happens through AJAX calls. These
AJAX calls return data—not
markup—usually in JSON format.
The app uses the JSON data to
update the page dynamically,
without reloading the page.
Initial Request
HTML
Ajax
JSON
Client Server
{…}

console.info(‘Q & A’);
// Any Question ?

<UserCard user={cosmologist} />
/* Time to React */
const cosmologist = {
name: 'Neil Tyson',
imgURL: 'https://www.thefamouspeople.com/profiles/images/neil-degrasse-tyson-2.jpg'
}

React
History
 Created by Jordan Walke, a software engineer at Facebook.
 He was influenced by XHP, an HTML component framework for PHP.
 Allow XML syntax for the purpose of creating custom and reusable HTML elements.
 FaxJS
 Facebook 2011, Instagram 2012 and open-sourced 2013.
16.3.2 Called React Fiber.
 React Native 2015.

React
What?
 React is a JS library Building interactive user interfaces.
 So it is a View JS Library
 React can be used to create SPA and mobile applications.
 Still maintained by Facebook.
 Not a Framework it is just a Library.
 React is often used in conjunction with other libraries such as Redux or Flux.

React
 Component-Based, Reusable Components.
 Unidirectional data flow.
 Not templates to create.
 Work with any stack or framework.
 Native
 Declarative not Imperative
 Easy to learn
 Facebook
Why?

React
Why?
Declarative not Imperative, Imperative

React
Why?
Declarative not Imperative, Declarative

React
How it works?
Two-way Data Binding
Model View
Change to the VIEW
Update the MODEL
Change to the MODEL
Update the VIEW

React
How it works?
Dispatcher
Store/StateView
 Single Source of Truth.
 Provides predictable application state.
 Much easier to pinpoint where the error
lies, as data follows a strict pipeline
React is a Unidirectional-Data Binding
Bind Data
Update storeDispatch Action

React
How it works?
 DOM stands for Document Object Model and is an abstraction of a structured text. For web
developers, this text is an HTML code, and the DOM is simply called HTML DOM.
 So, while HTML is a text, the DOM is an in-memory (tree-structured) representation of this text.
1. Browser have to parses the HTML
2. It removes the child element of elementId
3. Updates the DOM with the “New Value”
4. Re-calculate the CSS for the parent and child
5. Update the layout i.e. each elements exact co-ordinates on the screen
6. Traverse the render tree and paint it on the browser display
DOM

React
How it works?
Virtual DOM
 Virtual DOM is in-memory representation of Real DOM. It is lightweight JavaScript object
which is copy of Real DOM.
 Updating virtual DOM in ReactJS is faster because ReactJS uses
1. Diff algorithm, compares both the Virtual DOM to find the minimum number of steps to
update the Real DOM.
2. Batched update operations.
3. Efficient update of sub tree only.
4. Uses observable instead of dirty checking to detect change.
ReactJS maintains two virtual DOM, one with the updated state Virtual DOM and other with the
previous state Virtual DOM.

React
How it works?
Virtual DOM
DOM
Different
Virtual DOM
Updated Virtual DOM

React
How it works?
JSX
 This funny tag :D syntax is neither a string nor HTML.
 JSX may remind you of a template language, but it comes with the full power of JavaScript.
 JavaScript XML
 React doesn’t require using JSX, but most people find it helpful as a visual aid when working
with UI inside the JavaScript code. It also allows React to show more useful error and warning
messages.
 Embedding Expressions in JSX, Like Razor engine for example.

React
How it works?
JSX
 Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming
convention instead of HTML attribute names.
 For example, class becomes className in JSX, and tabindex becomes tabIndex.

React
How it works?
React-DOM
React-DOM

React
How it works?
React-DOM
 React and ReactDOM were only recently split into two different libraries.
 From 0.14 and up.
 ReactDOM is the glue between React and the DOM.
 Use it for one single thing: mounting with ReactDOM.render().
 Another useful feature of ReactDOM is ReactDOM.findDOMNode() which you can use to gain
direct access to a DOM element.

developer.need(‘A Demo’);
// hooooray :D

React
Recap
 What are the elements that I can render them?
 Strings.
 Components or HTML tags.
 Array of Strings, Components or HTML tags
 How to create React Element?
 Using JSX Syntax

 Note: Don’t forget to wrap the elements with a container

React
Environment
create-react-app

React
Environment
 Your preferred text editor. (Notepad :D, Notepad++, sublime, atom, VS Code ….)
 Install Node.JS 8.1
 GIT , https://git-scm.com/downloads
 npm install –g create-react-app
 create-react-app your-app-name *
 npm start
* Don’t forget to navigate into your-app-name folder before you
run npm start command

you.will(‘Prepare your Environment’);
// Loading …..

student.need(‘To Practice’);
// Lab time

React
React Component
 Components let you split the UI into independent, reusable pieces, and think about each
piece in isolation.
 Like JavaScript functions.
 Accept any types and any numbers of properties ‘props’.
 React elements describing what should appear on the screen
 Two ways to define a component
 Functional Component
 Class Component

React
React Component
OR
Must start with Capital Case

React
React Component Properties - Props
 Component Properties – Props
 Can be anything (string, number, array, simple object, complex object).
 Props are Read-Only (immutable).
 Can have default values (static defaultProps).
 Can be validated at runtime (PropTypes).
 Top-Down, Parent can send whatever prop values it likes to a child, but the child cannot
modify its own props.

React
React Component State
 As Component has props, component has state.
 You can consider that "state" is a database in object shape.
 The heart of every React component (Statefull).
 Determines how that component renders & behaves.
 Private and fully controlled by the component.
 You can add initial values to the state.
 State cannot modified directly.
 Only with SetState(nextState, callback) function
 State Updates May Be Asynchronous
 State Updates are Merge

React
React Component State
 SetState(nextState, callback)
 React may batch multiple setState() calls into a single update for performance.
 It Rerender the whole component,
 The parent one and all children of this parent.
 Whenever setState() method is called, ReactJS creates the whole Virtual DOM from scratch. Creating a
whole tree is very fast so it does not affect the performance

programmer.need(‘A Demo’);
// finally !

React
Functional Component vs Class Component
Functional vs Class
 Receive parameter (Props) - Optional
 Stateless or dumb component.
 Just Plain old JavaScript functions.
 Shorter to write
 For UI Components
 Has local State
 Receive parameter (Props) - Optional
 Statefull or smart component
 Has Lifecycle hooks.
 Can Handles fetching data via ajax calls

React
Component Lifecycle
The Component Lifecycle
Each component has several “lifecycle methods” that you can override to run code at particular times
in the process.
Methods prefixed with will are called right before something happens, and methods prefixed
with did are called right after something happens.

React
Component Lifecycle – 4 Phases
Initialization Mounting
props
Unmounting
Setup props & state componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentWillUnmount
render
componentDidUpdate
componentWillUpdate
render
componentDidUpdate
Updating
state
true
true
false
false

React
Component Lifecycle
 componentWillMount
 render
 componentDidMount
 componentWillReceiveProps
 shouldComponentUpdate
 componentWillUpdate
 componentDidupdate
 componentWillUnmount
 Immediately before initial rendering
 Render the elements.
 Immediately after initial rendering
 When component receives new props
 Before rendering, after receiving news props or state.
 Before rendering, after receiving news props or state.
 After component's updates are flushed to DOM.
 Immediately before removing component from DOM.

React
Component Lifecycle – Phase 1
Initialization
In this phase the React setting up the initial states
and default props, if any.
The component is setting up the initial state in
the constructor, which can be changed later by
using the setState method.
The defaultProps is defined as a property of
Component to define all the default value of
props, which can be overridden with new prop
values.

React
Mounting
React Component now is ready to mount in the browser
DOM.
This phase gives hook methods for before and after
mounting of components.
• componentWillMount is executed just before the
React Component is about to mount on the DOM.
• render mounts the component onto the browser.
• componentDidMount this is the hook method which is
executed after the component did mount on the
DOM.

React
Updating - Props
This phase starts when the react component has
taken birth on the browser and grows by receiving
new updates.
Can be updated by two ways, sending new props or
updating the state.
componentWillReceiveProps gets executed when
the props have changed and is not first render.
Usage: This is how the state can be kept synced with
the new props.

React
Component Lifecycle – Phase 3 - cont
Updating - Props
shouldComponentUpdate tells the React that when
the component receives new props or state is being
updated, should React re-render or it can skip
rendering?
Enhance performance of a slow component

React
Updating - Props
componentWillUpdate is executed only after the
shouldComponentUpdate returns true. This method
is only used to do the preparation for the upcoming
render, similar to componentWillMount or
constructor.

React
Updating - Props
componentDidUpdate is executed when the new
updated component has been updated in the DOM.
This method is used to re trigger the third party
libraries used to make sure these libraries also
update and reload themselves.

React
Unmounting
componentWillUnmount This method is the last
method in the lifecycle. This is executed just before
the component gets removed from the DOM.
Usage: In this method, we do all the cleanups
related to the component.

React
Component Lifecycle
So
 Don’t use setState with
 constructor
 componentDidMount, and will cause a performance issue.
 componentWillUpdate, would trigger an update to a React component before
componentWillUpdate() returns

React
Component Lifecycle – Other Hooks
 forceUpdate()
 Calling forceUpdate() will cause render() to be called on the component, skipping
shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components,
including the shouldComponentUpdate() method of each child. React will still only update the DOM if
the markup changes.
 Normally you should try to avoid all uses of forceUpdate() and only read from this.props and
this.state in render().
 componentDidCatch(error, info)
 catch JavaScript errors anywhere in their child component tree, log those errors, and display a
fallback UI instead of the component tree that crashed.
 Calling setState() in it lets you capture an unhandled JavaScript error in the below tree and display a
fallback UI.

React
Component Lifecycle – Diagrams
Component Creation Steps
render
constructor
componentWillMount
create and render all direct
child components
componentDidMount
A New Props Received
componentWillUpdate
componentWillReceiveProps
render
componentDidUpdate
stop
true false
setState
componentWillUpdate
render
stop
true false
Send new props to all
direct child components
componentDidUpdate
Send new props to all
direct child components

React
Handling Events
 Handling events with React elements is very similar to handling events on DOM elements.
There are some syntactic differences:
 React events are named using camelCase, rather than lowercase.
 With JSX you pass a function as the event handler, rather than a string.
 You cannot return false to prevent default behavior in React. You must call preventDefault explicitly.

React
Handling Events
 The BIND
 In JavaScript, class methods are not bound by default
 If you forget to bind this.onHandleClick and pass it to onClick, this will be undeﬁned when the
function is actually called

engineer.need(‘A Demonstration’);
// why ?!

React
Conditional Rendering
 In React, you can create distinct components that encapsulate behavior you need. Then, you
can render only some of them, depending on the state of your application.
 It is all about if, else, switch statements and conditional (ternary) - ? : - operator.
 Logical && Operator
 Logical || Operator
 To Prevent a component from rendering just return null.

someone.need(‘A Demo’);
// again !!

React
How to render a List
 As we said before, What are the elements that I can render them?
 Strings.
 Components or HTML tags.
 Array of Strings, Components or HTML tags.
Must be An Array
creates a new array with the
results of calling a provided
function on every element in
the calling array.

React
How to render a List
 A “key” is a special string attribute you need to include when creating lists of elements.
Keys help React identify which items have
changed, are added, or are removed.
Keys should be given to the elements
inside the array to give the elements a
stable identity.
Keys Must Only Be Unique Among
Siblings

React
Form
 HTML form elements work a little bit differently from other DOM elements in React, because
form elements naturally keep some internal state.
 Controlled components, input form element whose value is controlled by React
 In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their
own state and update it based on user input. In React, mutable state is typically kept in the
state property of components, and only updated with setState().
 We can combine the two by making the React state be the “single source of truth”

React
Form - cont
Dispatcher
Store/StateView
Bind Data
Update storeDispatch Action

React
Form - cont
 Textarea Tag
 Select Tag

React
Form - cont
 Uncontrolled components, where form data is handled by the DOM itself.
 To write an uncontrolled component, instead of writing an event handler for every state update, you
can use a ref to get form values from the DOM.
 When to use refs?
 Managing focus, text selection, or media playback.
 Triggering imperative animations.
 Integrating with third-party DOM libraries Like Jquery.

geek.need(‘A Demo’);
// oh GOD !

React
Communication
Shared State (Lifting state up)
 Shared a state between two components.
 Removing the local state from the descendant component and move
it into its ancestor instead.
 When we update an input, an other component should reflect the
change (and vice versa).
 Remember: single source of truth
ancestor
descendants
Lifting State Up

React
Communication
Shared State (Lifting state up)
 What about this?

React
Communication
State Management Store

React
Communication
State Management
FluxJS RefluxJS ReduxJS MobXJS

React
Redux
Redux
 Motivation
 Lost control over the when, why, and how of its state.
 Single Source of truth is to hard to maintain.
 Hard to reproduce bugs or add new features.
 Handle optimistic updates, server-side rendering, fetching data before performing route transitions will be
impossible.

React
Redux
State Management
Action Store
UI

React
Redux
State Management
Action Reducer Store
UI

React
Redux
Main Concepts
 Like React, Redux guarantee that data will be updated via Unidirectional data-binding
technique.
 So to update the state and it called Store at Redux, you need to
 Dispatch an action to update a portion at the store and it called Action Creator
 Action Creator return plain JS object called Action Object that describes what happened.
 Enforcing that every change is described as an action lets us have a clear understanding of what’s
going on in the app.
 Okay, to tie the state (store) with the action creators we need a function that handle the checks
and this function we called it (Reducer).
 Every time when you dispatches an action, store will broadcast this action to all the reducers
(including its sub-reducers). and if the action.type matches, then the reducer will handle this action
accordingly.

React
Redux
Three Principles
 Single source of truth.
 State is read-only.
 The only way to change the state is to emit an action, an object describing (action.type) what
happened.
 This ensures that neither the views nor the network callbacks will ever write directly to the state.
 Changes are made with pure functions
 Reducers are just pure functions that take the previous state and an action, and return the next state.

React
Redux Workflow
Action Creator
UI
Dispatch
Calculate and
return new store
Redux
Broadcast The
Action Object and
the current store
Reducer
Reducer
Reducer
Reducer
ReduxStore
Send the new
store to save it
Send Action
Object
Send the new
state for
updating

React
Redux
Action Creators & Actions
 Actions are payloads of information that send data from your application to your store.
 The only source of information for the store.
 You send them to the store using store.dispatch() as it dispatch Action Creator.

React
Redux
Reducer
 Specify how the application's state changes in response to actions sent to the store.Normal (Pure)
function
 Computes only the new state.
 Should be completely predictable: calling it with the same inputs many times should produce the
same outputs.
 Shouldn't perform any side effects like API calls or router transitions.
 You cannot update in state directly, you create a new object using Object.assign({}, state) then return it and the
redux will handle how to update the store.
 You can split the reducer to sub-reducers to so you can maintain it easily then you can combine them

React
Redux
Store
 You'll only have a single store in a Redux application.
 If You want to split your data handling logic, you'll use reducer composition instead of many stores.
 New Reducer = New Store
 The store has the following responsibilities:
 Holds application state;
Allows access to state via getState();
Allows state to be updated via dispatch(action)

redux.need(‘A Demo’);
// sure !

React
Redux – Advanced Topics -Middleware
Middleware
 Redux middleware is nothing more than a function which is invoked after an action is dispatched
but before a reducer takes care of the action.
 Middleware are functions that allow us extend the functionality of our redux application.

React
Broadcast The
Action Object and
the current store
Re
n Creator
Send Action
Object
Reduc
Middleware#1
Middleware#2
Middleware#3
Middleware#4

React
Middleware

store => next => action => {
console.log(“Middleware need a Demo");
next(action);
}

we.need(‘A BONUS’);
// Ooooooooooooooooooooo

React
External Data
Ajax Calls
Axios
Library

ajax.call({ data: ‘A Demo’ });
// { status: 200, data: ‘Yesssss’ }

React
Routing
 Components are the heart of React's powerful, declarative programming model.
 React Router is a collection of navigational components that compose declaratively with your
application.
 Work with Web Application and React Native.

BrowserHistory.Push(‘/demo’);
// redirecting…

HamedFarag.Say(‘Thanks 4 ur attention’);
{
twitter: @hamed_farag
www: hamedfarag.com
slack: frontend-geeks.slack.com
}

React & Redux JS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à React & Redux JS

Similaire à React & Redux JS (20)

Dernier

Dernier (20)

React & Redux JS

Notes de l'éditeur