0% found this document useful (0 votes)

20 views

Guide - React

This document provides an introduction and guide to React JS. It discusses key reasons to use React including that it is fast, modular, scalable, and flexible. It then covers basic JSX syntax including rendering JSX with ReactDOM.render(). It also discusses more advanced JSX topics such as using variables, conditional rendering with if/else statements and ternary operators, and event listeners.

Uploaded by

Carlos Javier Villaseñor Castillo

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

20 views

Guide - React

Uploaded by

Carlos Javier Villaseñor Castillo

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 55

React JS Guide

INTRO

Why React?

Here are several points to consider using it to create an app o even just implement it in already existing one.

1. React is fast, apps made in React can handle complex updates and still feel quick and responsive.
2. React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files, just like with
Angular, Vue, Polymer and other frameworks or libraries.
3. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.
4. React is scalable. Large programs that display a lot of changing data are where React performs best.
5. React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still
figuring out React’s potential.

Why this guide?

I do believe that creating is the best way of learning, thus i created this guide with the purpose of learning, but also i could be useful
for anyone that reads it.

This guide is based on primary on CodeAcademy´s Learn React Part I & II, Maximilian Schwarzmüller´s React 16 - The Complete
guide, of course the official React documentation: https://reactjs.org/ which offers deeper understanding of may concepts we
manage on this simple guide & also used other popular sources such as stackoverflow, dev.to & medium.
Basic JSX

1 - JSX

1.1 - What is JSX?

Before learning the React core we must learn JSX, which is a syntax extension for JavaScript. It was written to be used with React.
JSX code looks a lot like HTML.

Syntax extension means that JSX is not valid JavaScript. Web browsers can’t read it, if a JavaScript file contains JSX code, then
that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into
regular JavaScript.

A basic unit of JSX is called a JSX element, here’s an example of a JSX element:
<p>Hello world</p>
JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go, that means that a
JSX element can be saved in a variable, passed to a function, stored in an object or array, you name it.
const myArticle = <article></article>
Here is a more complex JSX element with minor features explained:
// If a JSX expression takes up more than one line, you must wrap it in parentheses.
const blog = (
{/* A JSX expression must have exactly one outermost element. */}
{/* You can nest JSX elements inside of other JSX elements, just like in HTML. */}
<div>
{/* JSX elements can have attributes, just like HTML elements can. */}
<img src="pics/192940u73.jpg" />
<h1>
Welcome to Dan's Blog!
</h1>
<article>
Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out.
</article>
</div>
);

1.2 - Rendering JSX

ReactDOM.render() is the most common way to render JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes,
and adds that tree to the DOM. That is the way to make a JSX expression appear on screen.
One special thing about ReactDOM.render() is that it only updates DOM elements that have changed.
That means that if you render the exact same thing twice in a row, the second render will do nothing and that is pretty good for the
performance of your app.

app.js\
import React from 'react';
/* ReactDOM is the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the
DOM in some way or another. */
import ReactDOM from 'react-dom';

const myList = (
<ul>
<li>Learn React</li>
<li>Become a Developer</li>
</ul>
);

ReactDOM.render(
// ReactDOM.render()‘s first argument should be a JSX expression
myList,
// The first argument is appended to whatever element is selected by the second argument.
document.getElementById('app')
);

Here in our index ReactDOM will select our app div element and append our JSX element:
index.js\
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Learn ReactJS</title>
</head>

ADVANCED JSX

2 - ADVANCED JSX

2.1 - class vs className

Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. Probably the most frequent of
these involves the word class.

In HTML, it’s common to use class as an attribute name:

<h1 class="big">Hey</h1>
In JSX, you can’t use the word class, you have to use className instead:
<h1 className="big">Hey</h1>
2.2 - Self-Closing Tags

Another JSX ‘gotcha’ involves self-closing tags.

What’s a self-closing tag?

Most HTML elements use two tags: an opening tag (<div>), and a closing tag (</div>). However, some HTML elements such as
<img> and <input> use only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag; it’s a
self-closing tag.

But, in JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error.
// Fine in JSX:
<br />

// NOT FINE AT ALL in JSX:

<br>

2.3 - JavaScript In Your JSX Inside Your JavaScript

Everything inside of the curly braces inside JSX will be treated as regular JavaScript.
ReactDOM.render(
<h1>2 + 3 = {2 + 3}</h1>
document.getElementById('app')
);
// Expected Render inside the h1 tag: 5

2.4 - Variables in JSX

When you inject JavaScript into JSX, that JavaScript is part of the same environment as the rest of the JavaScript in your file.

That means that you can access variables while inside of a JSX expression, even if those variables were declared outside.
// Declare a variable:
const name = 'Gerdo';

// Access your variable from inside of a JSX expression:

const greeting = <p>Hello, {name}!</p>;

2.5 - When should I assign a variable to a JavaScript expression that I want to use in a JSX expression?

The use of variables to store JavaScript expressions will largely be based on preference. However, we will usually want to use
variables assigned to our JS expressions when our JS code would otherwise be hard to read/follow before using our JS expression
inside of our JSX.
const myFunc = (a, b) => {
// Do some logic or calculations with the parameters here
}

/* Here, we assign a function to the variable `myFunc` then call the myFunc function from inside our JSX - this is especially
useful if the logic inside myFunc would be difficult to read and understand from inside a JSX expression */
ReactDOM.render(<h1>{myFunc(3,4)}</h1>, document.getElementById('app'));

2.6 - Variable Attributes in JSX

When writing JSX, it’s common to use variables to set attributes.

Here’s an example of how that might work:

// Use a variable to set the `height` and `width` attributes:
const sideLength = "200px";

const pandaImage = (
<img
src="images/panda.jpg"
alt="panda"
height={sideLength}
width={sideLength}
/>
);

Object properties are also often used to set attributes:

const pics = {
panda: "http://bit.ly/1Tqltv5",
owl: "http://bit.ly/1XGtkM3",
owlCat: "http://bit.ly/1Upbczi"
};

const panda = (
<img
src={pics.panda}
alt="Lazy Panda" />
);

Event Listeners in JSX

JSX elements can have event listeners, just like HTML elements can. Programming in React means constantly working with event
listeners.

You create an event listener by giving a JSX element a special attribute. Here’s an example:
// First we declare our JS function
function myFunc() {
alert("Hello, this is my function.");
}
// Then we can simply call our method with a world formed by on + a valid event
// JSX Event listeners should be written in camelCase
<img onClick={myFunc} />

An event listener attribute’s name should be something like onClick or onMouseOver: the word on, plus the type of event that you’re
listening for.

You can see a list of valid event names:

https://reactjs.org/docs/events.html#supported-events

2.7 - JSX Conditionals: If Statements That Don't Work

Here’s a rule that you need to know: you can not inject an if statement into a JSX expression.

This code will break:

(
<h1>
{
if (purchase.complete) {
'Thank you for placing an order!'
}
}
</h1>
)
2.8 - JSX Conditionals: If Statements That Do Work

You actually have lots of options to create an if statement with JSX

one option is to write an if statement, and not inject it into JSX.
function coinToss() {
// This function will randomly return either 'heads' or 'tails'.
return Math.random() < 0.5 ? "heads" : "tails";
}

const pics = {
kitty:
"https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg",
doggy:
"https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg"
};
let img;

// if/else statement begins here:

if (coinToss() === "heads") {
img = <img src={pics.kitty} />;
} else {
img = <img src={pics.doggy} />;
}

2.9 - JSX Conditionals: The Ternary Operator

A more compact way to write conditionals in JSX is the ternary operator, it works the same way in React as it does in regular
JavaScript.

you write x ? y : z, where x, y, and z are all JavaScript expressions. When your code is executed, x is evaluated as either “truthy” or
“falsy.” If x is truthy, then the entire ternary operator returns y. If x is falsy, then the entire ternary operator returns z.

function coinToss() {
// Randomly return either 'heads' or 'tails'.
return Math.random() < 0.5 ? "heads" : "tails";
};

const img = <img src={pics[coinToss() === "heads" ? "kitty" : "doggy"]} />;

2.10 - JSX Conditionals: &&

Like the ternary operator, && is not React-specific, but it shows up in React surprisingly often.

&& works best in conditionals that will sometimes do an action, but other times do nothing at all.
// judgmental will be true half the time.
const judgmental = Math.random() < 0.5;

const favoriteFoods = (
<div>
<h1>My Favorite Foods</h1>
<ul>
<li>Sushi Burrito</li>
<li>Rhubarb Pie</li>
{!judgmental && <li>Nacho Cheez Straight Out The Jar</li>}
<li>Broiled Grapefruit</li>
</ul>
</div>
);
/* <li>Nacho Cheez Straight Out The Jar</li> will only appear if !judgmental which
has a 50% of being truthy */

2.11 - .map in JSX

The array method .map() comes up often in React. It’s good to get in the habit of using it alongside JSX.

If you want to create a list of JSX elements, then .map() is often your best bet. It can look odd at first:
const people = ["Rowe", "Prevost", "Gare"];

const peopleLis = people.map(person => <li> {person} </li>);

/* peopleLis is the equal of writing the following:
let peopleLis = [
<li>Rowe</li>,
<li>Prevost</li>,
<li>Gare</li>
];
*/

const peopleRend = <ul>{peopleLis}</ul>;

ReactDOM.render(peopleRend, document.getElementById("app"));

2.12 - Keys

When you make a list in JSX, sometimes your list will need to include something called keys:
<ul>
<li key="li-01">Rowe</li>
<li key="li-02">Prevost</li>
<li key="li-03">Gare</li>
</ul>

A key is a JSX attribute. The attribute’s name is key. The attribute’s value should be something unique, similar to an id attribute.

keys don’t do anything that we can see, React uses them internally to keep track of lists. If you don’t use keys when you’re
supposed to, React might accidentally scramble your list-items into the wrong order.

Not all lists need to have keys. A list needs keys if either of the following are true:

1. The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must “remember
whether it was checked off. The items shouldn’t get amnesia when they render.

2. A list’s order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

If neither of these conditions are true, then we don’t have to worry about keys.

We can add keys in a .map the following way:

const people = ["Rowe", "Prevost", "Gare"];

// Add an i parameter to .map()‘s inner function, so that we can access each person’s unique index
const peopleLis = people.map((person, index) => (
/* We can get a unique key on each loop, by adding the {'person_' + i} attribute to our <li></li> */
<li key={"person_" + index}>{person}</li>
));

2.optional.1 - React Create Element

You can write React code without using JSX, here is a common JSX element:
const h1 = <h1>Hello world</h1>;
we can write the same element without JSX the following way:
const h1 = React.createElement(
"h1",
null,
"Hello, world"
);

But them, why would we use React.createElement() instead of JSX?

We would use React.createElement() instead of JSX when we do not want to set up compilation for our project, which the use of
JSX requires.

Class Based Components

4 - Class Based Components

4.1 - Class Based Components Introduction

React applications are made out of components.

What is a component?

A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.

When creating components, you have the choice between two different
ways:
1. Functional components (also referred to as "presentational", "dumb" or
"stateless" components - more about this later in the course)
const cmp = () => {
return <div>some JSX</div>
}
//(using ES6 arrow functions as shown here is recommended but optional)

2. class-based components (also referred to as "containers", "smart" or "stateful"

components)
class Cmp extends Component {
render () {
return <div>some JSX</div> }
}

Take a look at the code below. This code will create and render a new React class based component:
// create a variable named React
// evaluate this variable and get a particular, imported JavaScript object:
React // { imported object properties here... }
/* This imported object contains methods that you need in order to use React.
The object is called the React library. */
import React from 'react';
/* The methods imported from 'react-dom' are meant for interacting with
the DOM. */
import ReactDOM from 'react-dom';

/* Every component must come from a component class.A component class is

like a factory that creates components. If you have a component class,
then you can use that class to produce as many components as you want.
To create our own component class, we must subclass React.Component, in
this case by creating 'MyComponentClass' */
/* Also remember that classes are written in UpperCamelCase by convention:
https://en.wikipedia.org/wiki/Naming_convention_(programming)#Java */
class MyComponentClass extends React.Component {
render() {
return <h1>Hello world</h1>;
}
};

/* ReactDOM.render() will tell <MyComponentClass /> to call its render

method. which will return the JSX element <h1>Hello world</h1>.
ReactDOM.render() will then take that resulting JSX element, and add it to
the virtual DOM */
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);

But what is a component class needs to be called so? A component class needs a set of instructions, which tell the component
class how to build components. When you make a new component class, these instructions are the body of your class declaration.

4.2 - Use Multiline JSX in a Component

To create a multi-line JSX expression we should always be wrapp it in parentheses.

import React from 'react';

import ReactDOM from 'react-dom';

class MyComponent extends React.Component {

render() {
return (
<blockquote>
<p>
What is important now is to recover our senses.
</p>
<cite>
<a target="_blank"
href="https://en.wikipedia.org/wiki/Susan_Sontag">
Susan Sontag
</a>
</cite>
</blockquote>
);
}
};

ReactDOM.render(
<MyComponent />,
document.getElementById('app')
);

4.3 - Use a Variable Attribute in a Component

You can, and often will, inject JavaScript into JSX inside of a render function.
import React from 'react';
import ReactDOM from 'react-dom';

const owl = {
title: 'Excellent Owl',
src: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-owl.jpg'
};

// Component class starts here:

class Owl extends React.Component {

render() {
return (
<div>
<h1>{owl.title}</h1>
<img
src={owl.src}
alt={owl.title} />
</div>
);
}
}

ReactDOM.render(
<Owl />,
document.getElementById('app')
);

4.3 - Use a Variable Attribute in a Component

Notice that the if statement is located inside of the render function, but before the return statement. This is pretty much the only
way that you will ever see an if statement used in a render function.
import React from 'react';
import ReactDOM from 'react-dom';

const fiftyFifty = Math.random() < 0.5;

// New component class starts here:

class TonightsPlan extends React.Component {
render() {
let item;
fiftyFifty > 0.5
? item = "<h1>Tonight I'm going out WOOO</h1>"
: item = "<h1>Tonight I'm going to bed WOOO</h1>";
return { item };
}
}

ReactDOM.render(
<TonightsPlan />,
document.getElementById('app')
);

4.4 - Use this in a Component

The word this gets used in React a lot!

You are especially likely to see this inside of the body of a component class declaration. Here’s an example:
class IceCreamGuy extends React.Component {
get food() {
return 'ice cream';
}

render() {
return <h1>I like {this.food}.</h1>;
}
}

this refers to an instance of IceCreamGuy. The less simple answer is that this refers to the object on which this‘s enclosing method,
in this case .render(), is called. It is almost inevitable that this object will be an instance of IceCreamGuy, but technically it could be
something else.

Let’s assume that this refers to an instance of your component class, as will be the case in all examples in this course.
IceCreamGuy has two methods: .food and .render(). Since this will evaluate to an instance of IceCreamGuy, this.food will evaluate
to a call of IceCreamGuy‘s .food method. This method will, in turn, evaluate to the string “ice cream.”

Why don’t you need parentheses after this.food? Shouldn’t it be this.food()?

You don’t need those parentheses because .food is a getter method. You can tell this from the get in the above class declaration
body.

There’s nothing React-specific about getter methods, nor about this behaving in this way! However, in React you will see this used in
this way almost constantly.

this in JavaScript can be a difficult concept! Here is a good resource for understanding this in Javascript:
https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/

4.5 - Use an Event Listener in a Component

class Button extends React.Component {

scream() {
alert('AAAAAAAAHHH!!!!!');
}

render() {
return <button onClick={this.scream} >AAAAAH!</button>;
}
}

4.6 This.Props

4.6.1 - What are props?

Every component has something called props.

A component’s props is an object. It holds information about that component.

To see a component’s props object, you use the expression this.props.

You can pass information to a React component.

How? By giving that component an attribute:

If you want to pass information that isn’t a string, then wrap that information in curly braces. Here’s how you would pass an array:
<Greeting myInfo={["top", "secret", "lol"]} />

In this next example, we pass several pieces of information to <Greeting />. The values that aren’t strings are wrapped in curly
braces:
<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />
props is the name of the object that stores passed-in information. this.props refers to that storage object. At the same time, each
piece of passed-in information is called a prop. This means that props could refer to two pieces of passed-in information, or it
could refer to the object that stores those pieces of information :(

4.6.2 - Using props to make decisions

You can do more with props than just display them. You can also use props to make decisions.
Greeting.js \ (children of App.js)
import React from 'react';
import ReactDOM from 'react-dom';

export class Greeting extends React.Component {

render() {
if (this.props.signedIn == false) {
return <h1>GO AWAY</h1>;
} else {
return <h1>Hi there, {this.props.name}!</h1>;
}
}
}

We just assign the value signedIn to true and name to a string with a name.
App.js \ (parent of Greeting.js)
<Greeting name="Carlos" signedIn={true} />

This will be the expected output:

4.6.3 - Put an Event Handler in a Component Class

How do you define an event handler in React?

You define an event handler as a method on the component class, just like the render method. Almost all functions that you define
in React will be defined in this way, as methods in a class.
class Example extends React.Component {
/* We define an event handler method with similar syntax as the render
method. */
handleEvent() {
alert(`I am an event handler.
If you see this message,
then I have been called.`);
}

render() {
return (
<h1 onClick={this.handleEvent}>
Hello world
</h1>
);
}
}

4.6.4 - Receive an Event Handler as a prop

The same way that you attach any event handler to a JSX element: you give that JSX element a special attribute. The attribute’s
name should be something like onClick or onHover. The attribute’s value should be the event handler that you want to attach.

Talker.js \ (parent of Button.js)

import React from 'react';
import { Button } from './Button';

class Talker extends React.Component {

talk() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
}

render() {
return <Button talk={this.talk} />;
}
}

Button.js \ (children of Talker.js)

import React from 'react';

export class Button extends React.Component {

render() {
return (
<button onClick={this.props.talk}>
Click me!
</button>
);
}
}

4.6.5 - Naming conventions of the event handlers and props that pass event handlers

Here’s how the naming convention works: first, think about what type of event you are listening for. In our example, the event type
was “click.”

If you are listening for a “click” event, then you name your event handler handleClick. If you are listening for a “keyPress” event, then
you name your event handler handleKeyPress.

Talker.js \ (parent of Button.js)

import React from 'react';
import { Button } from './Button';

class Talker extends React.Component {

handleClick() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
}

render() {
return <Button talk={this.handleClick} />;
}
}

Your prop name should be the word on, plus your event type. If you are listening for a “click” event, then you name your prop
onClick. If you are listening for a “keyPress” event, then you name your prop onKeyPress:

Talker.js \ (parent of Button.js)

import React from 'react';
import { Button } from './Button';
class Talker extends React.Component {
handleClick() {
let speech = '';
for (let i = 0; i < 10000; i++) {
speech += 'blah ';
}
alert(speech);
}

render() {
return <Button onClick={this.handleClick} />;
}
}

Button.js \ (children of Talker.js)

import React from 'react';

export class Button extends React.Component {

render() {
return (
<button onClick={this.props.onClick}>
Click me!
</button>
);
}
}

4.6.6 - this.props.children

Every component’s props object has a property named children. this.props.children will return everything in between a component’s
opening and closing JSX tags.

So far, all of the components that you’ve seen have been self-closing tags, such as <MyComponentClass />. They don’t have to be!
You could write <MyComponentClass></MyComponentClass>, and it would still work.

this.props.children would return everything in between <MyComponentClass> and </MyComponentClass>.

If a component has more than one child between its JSX tags, then this.props.children will return those children in an array.
However, if a component has only one child, then this.props.children will return the single child, not wrapped in an array.

App.js \ (parent of List.js)

class App extends React.Component {
render() {
return (
<div>
<List type='Living Musician'>
<li>Sachiko M</li>
<li>Harvey Sid Fisher</li>
</List>
<List type='Living Cat Musician'>
<li>Nora the Piano Cat</li>
</List>
</div>
);
}
}

List.js \ (child of App.js)

import React from 'react';
export class List extends React.Component {
render() {
let titleText = `Favorite ${this.props.type}`;
/* We verify if our children wrapped components are single of many
by using 'instanceof' to check if the come inside an array */
if (this.props.children instanceof Array) {
titleText += 's';
}
return (
<div>
<h1>{titleText}</h1>
<ul>
{this.props.children}
</ul>
</div>
);
}
}

4.6.7 - Default Props

We can set a set default props for our components to receive in case nobody passes a value to our component and this value will
be overwritten if we pass a value to our component.
class Button extends React.Component {
render() {
return (
<button>
{this.props.text}
</button>
);
}
}

// defaultProps goes here:

Button.defaultProps = { text: 'I am a button' };

ReactDOM.render(
<Button />,
document.getElementById('app')
);

Expected browser render.

4.7 - State

4.7.1 - Introduction

React components will often need dynamic information in order to render. For example, imagine a component that displays the
score of a basketball game. The score of the game might change over time, meaning that the score is dynamic. Our component will
have to know the score, a piece of dynamic information, in order to render in a useful way.

There are two ways for a component to get dynamic information: props and state. Besides props and state, every value used in a
component should always stay exactly the same.

Unlike props, a component’s state is not passed in from the outside. A component decides its own state.

4.7.2 - Setting Initial State

To make a component have state, give the component a state property. This property should be declared inside of a constructor
method, like this:
class Example extends React.Component {
constructor(props) {
/* It is important to note that React components always
have to call super in their constructors to be set up
properly. */
super(props);
/* This object represents the initial “state” of any
component instance. */
this.state = { mood: 'decent' };
}

render() {
return <div></div>;
}
}

4.7.3 - Access a Component's state

To read a component’s state, use the expression:

this.state.<name of property>

4.7.4 - Update state with this.setState

A component changes its state by calling the function this.setState().

this.setState() takes two arguments: an object that will update the component’s state, and a callback. You basically never need the
callback.

In the following example we explain in 3 simple steps what happens in our component to update our state and also why .bind(this)
is necessary.
import React from 'react';
import ReactDOM from 'react-dom';

class Mood extends React.Component {

constructor(props) {
super(props);
this.state = { mood: 'good' };
/* This line is necessary because toggleMood()‘s body contains the word
'this', due to the way that event handlers are bound in JavaScript,
this.toggleMood() loses its 'this' when it is used. Therefore, the
expressions this.state.mood and this.setState won’t mean what they’re
supposed to… unless you have already bound the correct 'this' to
this.toggleMood. */
this.toggleMood = this.toggleMood.bind(this);
}

toggleMood() {
const newMood = this.state.mood === 'good' ? 'bad' : 'good';
// 3. this.setState() is called and the component’s state is changed
this.setState({ mood: newMood });
}

render() {
return (
<div>
<h1>I'm feeling {this.state.mood}!</h1>
{/* 1. A user triggers an event which is being listened by onClick
2. When this listened-for event occurs, it calls an event handler
function in this case toggleMood */}
<button onClick={this.toggleMood}>
Click Me
</button>
</div>
);
}
}

ReactDOM.render(<Mood />, document.getElementById('app'));

4.7.5 - this.setState Automatically Calls render

Any time that you call this.setState(), this.setState() AUTOMATICALLY calls .render() as soon as the state has changed.

Think of this.setState() as actually being two things: this.setState(), immediately followed by .render().

That is why you can’t call this.setState() from inside of the .render() method! this.setState() automatically calls .render(). If .render()
calls this.setState(), then an infinite loop is created.

4.8 - Don't Update props

You learned earlier that a component can change its state by calling this.setState(). You may have been wondering: how does a
component change its props?

The answer: it doesn’t!

A component should never update this.props. Look at Bad.js to see an example of what not to do.

import React from 'react';

class Bad extends React.Component {

render() {
this.props.message = 'yo'; // NOOOOOOOOOOOOOO!!!
return <h1>{this.props.message}</h1>;
}
}

4.9 - Stateless Components Inherit From Stateful Components

Our programming pattern uses two React components: a stateful component, and a stateless component. “Stateful” describes any
component that has a state property; “stateless” describes any component that does not.

Here we made a stateful component pass its state to a stateless component.

Parent.js \ (parent of Child.js)

import {Child} from './Child';

class Parent extends React.Component {

constructor(props) {
super(props);
this.state = {
name: 'Frarthur'
};
}

render (){
return (
<Child name={this.state.name}></Child>
);
}
}
Child.js \ (child of Parent.js)
import React from 'react';

export class Child extends React.Component {

render(){
return (
<h1>Hey, my name is {this.props.name}!</h1>
);
}
}

4.10 - Child Components Update Their Parents' state

In the following example, our child component will update the state of the parent component.

Parent.js \ (parent of Child.js)

class Parent extends React.Component {
constructor(props) {
super(props);

this.state = { name: 'Frarthur' };

this.changeName = this.changeName.bind(this);
}

changeName(newName) {
this.setState({
name: newName
});
}

render() {
return <Child name={this.state.name} onChange={this.changeName} />
}
}

Child.js \ (child of Parent.js)

export class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
const name = e.target.value;
this.props.onChange(name);
}

render() {
return (
<div>
<h1>
Hey my name is {this.props.name}!
</h1>
<select id="great-names" onChange={this.handleChange}>
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
}

4.11 - Child Components update their siblings props

One of the very first things that you learned about components is that they should only have one job.

In the last lesson, Child had two jobs:

1 - Child displayed a name.

2 - Child offered a way to change that name.

You should make like Solomon and divide Child in two: one component for displaying the name, and a different component for
allowing a user to change the name.

That brings us to the essential new concept for this lesson: you will have one stateless component display information which is
called ”Sibling”, and a different stateless component offer the ability to change that information which in this case we will be calling
“Child”.

In the parent component we will handle the changes submitted by Child with a function that will update the state and “Sibling” will
recibe that state change and update its prop.
class Parent extends React.Component {
constructor(props) {
super(props);

this.state = { name: 'Frarthur' };

this.changeName = this.changeName.bind(this);
}

changeName(newName) {
this.setState({
name: newName
});
}

render() {
return (
<div>
<Child onChange={this.changeName} />
<Sibling name={this.state.name} />
</div>
);
}
}
);

Child now will only update its value and will emit “onChange” with a payload with the value of this update.
export class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
const name = e.target.value;
this.props.onChange(name);
}

render() {
return (
<div>
<select
id="great-names"
onChange={this.handleChange}>

<option value="Frarthur">Frarthur</option>
<option value="Gromulus">Gromulus</option>
<option value="Thinkpiece">Thinkpiece</option>
</select>
</div>
);
}
}

Sibling will only show us the value of its prop “name”.

export class Sibling extends React.Component {
render() {
const name = this.props.name;

return (
<div>
<h1>Hey, my name is {name}</h1>
</div>
);
}
}

Advanced React Techniques

You’ll learn how to make a stateless functional component, how to make a propType, how to write a form, and how to use styles.

You’ll also be introduced to your second programming pattern: dividing components into presentational components and container
components.

5 - Styles

5.1 - Inline styles

An inline style is a style that’s written as an attribute, like this:

<h1 style={{ color: 'red' }}>Hello world</h1>

5.2 - Make A Style Object Variable

Defining a variable named style in the top-level scope would be an extremely bad idea in many JavaScript environments! In React,
however, it’s totally fine.
const styles = {
color: 'darkcyan',
background: 'mintcream'
};
export class StyledClass extends React.Component {
render() {
return (
<h1 style={styles}>
Hello world
</h1>
);
}
}

5.3 - Style Name Syntax

In regular JavaScript, style names are written in hyphenated-lowercase:

const styles = {
'margin-top': "20px",
'background-color': "green"
};

In React, those same names are instead written in camelCase:

const styles = {
marginTop: "20px",
backgroundColor: "green"
};

Also in React, if you write a style value as a number, then the unit "px" is assumed.

How convenient! If you want a font size of 30px, you can write:
const styles = {
fontSize: 30
};

5.4 - Share Styles Across Multiple Components

We can create a file with only styles and export them.

styles.js \
const fontFamily = 'Comic Sans MS, Lucida Handwriting, cursive';
const background = 'pink
url("https://codecademy-content.s3.amazonaws.com/programs/react/images/welcome-to-my-homepage.gif") fixed';
const fontSize = '4em';
const padding = '45px 0';
const color = 'green';

export const styles = {

fontFamily: fontFamily,
background: background,
fontSize: fontSize,
padding: padding,
color: color
};

Then we can just import then and use them in our elements.
Home.js \
import {styles} from './styles';

const divStyle = {
background: styles.background
};

export class Home extends React.Component {

render() {
return (
<div style={divStyle} >
<AttentionGrabber />
<footer>THANK YOU FOR VISITING MY HOMEPAGE!</footer>
</div>
);
}
}

5.5 - Separate Container Components From Presentational Components: Explanation

Separating container components from presentational components is a popular React programming pattern.

Here’s the basic idea behind it: if a component has to have state, make calculations based on props, or manage any other complex
logic, then that component shouldn’t also have to render HTML-like JSX.

Instead of rendering HTML-like JSX, the component should render another component. It should be that component’s job to render
HTML-like JSX.

Remember that a presentational component will always get rendered by a container component. so the container component will
be the one that call ReactDOM to render not the presentational.

Presentational components should only have the render function, many times also a value that comes from props.

5.6 - Stateless Functional Components (Also Know as Just Functional Components)

When you separate a container component from a presentational component, the presentational component will always end up like
this: one render() function, and no other properties.

If you have a component class with nothing but a render function, then you can rewrite that component class in a very different
way. Instead of using React.Component, you can write it as a JavaScript function!

A component class written as a function is called a stateless functional component. Stateless functional components have some
advantages over typical component classes. We’ll cover those advantages in this lesson.

A simple functional component can be written the following way.

import React from 'react';

export const Friend = () => {

return (
<img
src='https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-octopus.jpg'
/>;
);
}

It can have props passed to them as long as we pass then as a parameter.

export const GuineaPigs = (props) => {
let src = props.src;
return (
<div>
<h1>Cute Guinea Pigs</h1>
<img src={src} />
</div>
);
}

5.7 - PropTypes
5.7.1 - PropTypes in Class Based Components

propTypes are useful for two reasons. The first reason is prop validation.
Validation can ensure that your props are doing what they’re supposed to be doing. If props are missing, or if they’re present but
they aren’t what you’re expecting, then a warning will print in the console.

This is useful, but reason #2 is arguably more useful: documentation.

Documenting props makes it easier to glance at a file and quickly understand the component class inside. When you have a lot of
files, and you will, this can be a huge benefit.

To use it we need to install propTypes.

$ npm install --save prop-types

If a component class expects a prop, then you can give that component class a propType.
import React from 'react';
import PropTypes from "prop-types";

export class MessageDisplayer extends React.Component {

render() {
{/* Notice the expression this.props.message. From this expression,
you can deduce that MessageDisplayer expects to get passed a prop
named message */}
return <h1>{this.props.message}</h1>;
}
}

/* The first step to making a propType is to search for a property named

propTypes on the instructions object. If there isn’t one, make one! */
MessageDisplayer.propTypes = {
/* The second step is to add a property to the propTypes object. For
each prop that your component class expects to receive */
message: React.PropTypes.string
};

The value of each property in propTypes should fit this pattern:

React.PropTypes.expected-data-type-goes-here

Each property on the propTypes object is called a propType.

Runner has six propTypes! Look at each one. Note that bool and func are abbreviated, but all other datatypes are spelled normally.
If you add .isRequired to a propType, then you will get a console warning if that prop isn’t sent.
Runner.propTypes = {
message: React.PropTypes.string.isRequired,
style: React.PropTypes.object.isRequired,
isMetric: React.PropTypes.bool.isRequired,
miles: React.PropTypes.number.isRequired,
milesToKM: React.PropTypes.func.isRequired,
races: React.PropTypes.array.isRequired
};

5.7.2 - PropTypes in Functional Components

How could you write propTypes for a stateless functional component?

It turns out the process is fairly similar. To write propTypes for a stateless functional component, you define a propTypes object as
a property of the stateless functional component itself. Here’s what that looks like:
import PropTypes from "prop-types";
const Example = (props) => {
return <h1>{props.message}</h1>;
}

Example.propTypes = {
message: PropTypes.string.isRequired
};

5.8 - React Forms

Think about how forms work in a typical, non-React environment. A user types some data into a form’s input fields, and the server
doesn’t know about it. The server remains clueless until the user hits a “submit” button, which sends all of the form’s data over to
the server simultaneously.

In React, as in many other JavaScript environments, this is not the best way of doing things.

The problem is the period of time during which a form thinks that a user has typed one thing, but the server thinks that the user has
typed a different thing. What if, during that time, a third part of the website needs to know what a user has typed? It could ask the
form or the server and get two different answers. In a complex JavaScript app with many moving, interdependent parts, this kind of
conflict can easily lead to problems.

In a React form, you want the server to know about every new character or deletion, as soon as it happens. That way, your screen
will always be in sync with the rest of your application.

When a user types or deletes in the <input />, then that will trigger a change event, which will call handleUserInput, now let's
imagine some of the possibilities of what handleUserInput could do, it could easily make a petition to a server of our own to
validate its value or we can validate this value with our own methods or components for each user keystroke.
export class Input extends React.Component {
constructor(props){
super(props);
this.state = {
userInput:''
};
/* As always we need to bind 'this' inside our constructor to any method
that will use 'this' */
this.handleUserInput = this.handleUserInput.bind(this);
}

/* Here we set the value or our property userInput to the value of

input */
handleUserInput(e){
this.setState({ userInput: e.target.value })
}

render() {
return (
<div>
{/* With every keystroke we call handleUserInput which updates
userInput */}
<input type="text"
value={this.state.userInput}
onChange={this.handleUserInput}
/>
{/* Whenever the user chages the value of our input it will be
seen here */}
<h1>{this.state.userInput}</h1>
</div>
);
}
}
5.8.2 - Controlled vs Uncontrolled

There are two terms that will probably come up when you talk about React forms: controlled component and uncontrolled
component. Like automatic binding, controlled vs uncontrolled components is a topic that you should be familiar with, but don’t
need to understand deeply at this point.

An uncontrolled component is a component that maintains its own internal state. A controlled component is a component that
does not maintain any internal state. Since a controlled component has no state, it must be controlled by someone else.

Think of a typical <input type='text' /> element. It appears onscreen as a text box. If you need to know what text is currently in the
box, then you can ask the <input />, possibly with some code like this:
let input = document.querySelector('input[type="text"]');

let typedText = input.value; // input.value will be equal to whatever text is currently in the text box.

The important thing here is that the <input /> keeps track of its own text. You can ask it what its text is at any time, and it will be
able to tell you.

The fact that <input /> keeps track of information makes it an uncontrolled component. It maintains its own internal state, by
remembering data about itself.

A controlled component, on the other hand, has no memory. If you ask it for information about itself, then it will have to get that
information through props. Most React components are controlled.

In React, when you give an <input /> a value attribute, then something strange happens: the <input /> BECOMES controlled. It stops
using its internal storage. This is a more ‘React’ way of doing things.

You can find more information about controlled and uncontrolled components here:
https://reactjs.org/docs/forms.html

5.9 - Mounting Lifecycle Methods

5.9.1 - What's a Lifecycle Method?

Lifecycle methods are methods that get called at certain moments in a component’s life.

You can write a lifecycle method that gets called right before a component renders for the first time.

You can write a lifecycle method that gets called right after a component renders, every time except for the first time.

You can attach lifecycle methods to a lot of different moments in a component’s life.

There are three categories of lifecycle methods: mounting, updating, and unmounting. This lesson is about the first category:
mounting lifecycle methods.

A component “mounts” when it renders for the first time. This is when mounting lifecycle methods get called.

There are three mounting lifecycle methods:

componentWillMount
render
componentDidMount

When a component mounts, it automatically calls these three methods, in order.

5.9.2 - componentWillMount

When a component renders for the first time, componentWillMount gets called right before render.
export class Example extends React.Component {
componentWillMount() {
alert('component is about to mount! (this will be only appear once unless the component
is unmounted)');
}

render() {
return <h1>Hello world</h1>;
}
}

5.9.3 - render

render is a lifecycle method!

We won’t go over render here - we’ve already talked about it plenty. However, you should understand how render fits into the
mounting period. Whenever a component mounts, componentWillMount is called first, followed by render, followed by
componentDidMount.

render belongs to two categories: mounting lifecycle methods, and updating lifecycle methods.

5.9.4 - componentDidMount

When a component renders for the first time, componentDidMount gets called right after the HTML from render has finished
loading.

If your React app uses AJAX to fetch initial data from an API, then componentDidMount is the place to make that AJAX call. More
generally, componentDidMount is a good place to connect a React app to external applications, such as web APIs or JavaScript
frameworks. componentDidMount is also the place to set timers using setTimeout or setInterval.
export class Example extends React.Component {
componentDidMount() {
alert('component just finished mounting!');
}

render() {
return <h1>Hello world</h1>;
}
}

5.10 - Updating/ Unmounting Lifecycles Methods

5.10.1 - Intro

There are two categories that we haven’t yet discussed: updating and unmounting lifecycle methods. This lesson covers both.

What is updating?

The first time that a component instance renders, it does not update. A component updates every time that it renders, starting with
the second render.

There are five updating lifecycle methods:

1.componentWillReceiveProps
2.shouldComponentUpdate
3.componentWillUpdate
4.render
5.componentDidUpdate

Whenever a component instance updates, it automatically calls all five of these methods, in order.

5.10.2 - componentWillReceiveProps

The first updating lifecycle method is called componentWillReceiveProps.

When a component instance updates, componentWillReceiveProps gets called before the rendering begins.

As one might expect, componentWillReceiveProps only gets called if the component will receive props.
// componentWillReceiveProps will get called here:
ReactDOM.render(
<Example prop="myVal" />,
document.getElementById('app')
);

// componentWillReceiveProps will NOT get called here:

ReactDOM.render(
<Example />,
document.getElementById('app')
);

componentWillReceiveProps automatically gets passed one argument: an object called nextProps. nextProps is a preview of the
upcoming props object that the component is about to receive.
componentWillReceiveProps (nextProps){
/* Here we can compare a value our component will receive vs
a value of its own state */
if (nextProps.<prop name> > this.state.<property name>) {
// Do something here...
}
}

5.10.3 - shouldComponentUpdate

When a component updates, shouldComponentUpdate gets called after componentWillReceiveProps, but still before the rendering
begins.

shouldComponentUpdate should return either true or false.

If shouldComponentUpdate returns true, then nothing noticeable happens. But if shouldComponentUpdate returns false, then the
component will not update! None of the remaining lifecycle methods for that updating period will be called, including render. the
following will not be called:

1.componentWillUpdate
2.render
3.componentDidUpdate

The best way to use shouldComponentUpdate is to have it return false only under certain conditions. If those conditions are met,
then your component will not update.

shouldComponentUpdate automatically receives two arguments: nextProps and nextState. It’s typical to compare nextProps and
nextState to the current this.props and this.state, and use the results to decide what to do.

You can use shouldComponentUpdate to make Target only rerender when it actually needs to.
shouldComponentUpdate(nextProps, nextState) {
if ((this.props.text == nextProps.text) &&
(this.state.subtext == nextState.subtext)) {
alert("Props and state haven't changed, so I'm not gonna update!");
return false;
} else {
alert("Okay fine I will update.")
return true;
}
}

5.10.4 - componentWillUpdate
The third updating lifecycle method is componentWillUpdate.

componentWillUpdate gets called in between shouldComponentUpdate and render.

You cannot call this.setState from the body of componentWillUpdate! Which begs the question, why would you use it?

The main purpose of componentWillUpdate is to interact with things outside of the React architecture. If you need to do non-React
setup before a component renders, such as checking the window size or interacting with an API, then componentWillUpdate is a
good place to do that.

If that sounds abstract, that’s okay! All of the lifecycle methods might feel a bit theoretical, until you’ve used them in real-life
scenarios.

5.10.5 - componentDidUpdate

The last updating lifecycle method is componentDidUpdate.

When a component instance updates, componentDidUpdate gets called after any rendered HTML has finished loading.
componentDidUpdate automatically gets passed two arguments: prevProps and prevState. prevProps and prevState are references
to the component’s props and state before the current updating period began. You can compare them to the current props and
state.

componentDidUpdate is usually used for interacting with things outside of the React environment, like the browser or APIs. It’s
similar to componentWillUpdate in that way, except that it gets called after render instead of before.

componentDidUpdate(prevProps, prevState) {
alert('Component is done rendering!');
}

5.10.6 - componentWillUnmount

A component’s unmounting period occurs when the component is removed from the DOM. This could happen if the DOM is
re-rendered without the component, or if the user navigates to a different website or closes their web browser.

componentWillUnmount is the only unmounting lifecycle method!

componentWillUnmount gets called right before a component is removed from the DOM. If a component initiates any methods that
require cleanup, then componentWillUnmount is where you should put that cleanup.

The following component create an interval an when it gets unmounted it clears it.
Enthused.js \ (child of App.js)
export class Enthused extends React.Component {
/* This method that calls a setInterval function, which adds an
exclamation point to some text every 15ms. */
componentDidMount() {
this.interval = setInterval(() => {
this.props.addText('!');
}, 15);
}

/* When this component gets unmounted we use this method yo

clear the previous interval */
componentWillUnmount(prevProps, prevState) {
clearInterval(this.interval);
}
render() {
return (
<button onClick={this.props.toggle}>
Stop!
</button>
);
}
}

Here the parent component conditions the mounting of components between re-renders.
App.js \ (parent of Enthused.js)
render() {
let button;
/* Between re-renders made by state change we will condition the mounting
and unmounting of Ethused component and the button element, when one is
mounted the other will be unmounted */
if (this.state.enthused) {
button = (
<Enthused toggle={this.toggleEnthusiasm} addText={this.addText} />
);
} else {
button = (
<button onClick={this.toggleEnthusiasm}>
Add Enthusiasm!
</button>
);
}

return (
<div>
<h1>Auto-Enthusiasm</h1>
<textarea rows="7" cols="40" value={this.state.text}
onChange={this.handleChange}>
</textarea>
{button}
<h2>{this.state.text}</h2>
</div>
);
}

5.11 - Refs

Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an
instance property when a component is constructed so they can be referenced throughout the component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}

When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.
const node = this.myRef.current;
REDUX Intro

6.1 - Understanding the redux flow

The central store stores the entire application state, it's that simple, you can think about it as a giant javascript object.

Before anything can be be modified in our central store we need to set it:
const initialState = {
counter: 0
};

The cycle works this way:

1.Our component wants to manipulate the app state so it dispatches an action, which is dispatched from your javascript code. And
action is just information package in the end with a type, something like:
store.dispatch({ type: 'ADD_COUNTER', value: 10 });
*possibly it also holds a payload.
that action doesn't hold any logic, it doesn't know how to update the store, it's just a messenger. The thing changing the store is a
reducer.

2.That action reaches the reducer, which is the thing that actually changes the store.

the reducer can check the type of the action, for example if it's addIngredient and we then define the code for that type of action in
the reducer. The reducer in the end is just a pure function which receives the action and the old state as input and which then spits
out an updated state.
const rootReducer = (state = initialState,action) => {
if (action.type === 'ADD_COUNTER'){
return {
...state,
counter: state.counter + action.value
};
}
return state;
};

The important thing is that the reducer has to execute synchronous code only, no asynchronous code.

3.The store triggers all subscriptions whenever the state changes, whenever the state is updated in the store.

And of course our component can subscribe to store updates and it then receives that update automatically, this is how simple it is.
store.subscribe(() => {
console.log('[Subscription]', store.getState());
// Expected output: [Subscription] { counter: 10 }
});

6.2 - Redux in React

6.2.1 - Basic syntax to connect Redux with React

Install Redux
$ npm install --save redux
Install Redux for React
$ npm install --save react-redux

The following file shows us the basic boilerplate to connect Redux to our React App.
Index.js \
import React from 'react';
import ReactDOM from 'react-dom';
/* We need to import redux on the first place, it will allow us to create
our store */
import { createStore } from 'redux';
// This import will allow us to connect React with Redux
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// We need to import our reducer file
import reducer from './store/reducer';

/* We create our store const using the function from our redux import and
as parameter we use the reducer file we created */
const store = createStore(reducer);

ReactDOM.render(
/* To use Redux we need to wrap our app between our Provider and add
the property store with the value of our const store */
<Provider store={store}><App /></Provider>,
document.getElementById('root')
);
registerServiceWorker();

Our basic reducer can be just our initial state and a simple reducer.
reducer.js \
const initialState = {
counter: 0
}

const reducer = (state = initialState, action) => {

return state;
};

export default reducer;

6.2.2 - Making the store available in a component

We can make our store available in our component with five simple and very boilerplate steps.

1. We set our basic reducer.

reducer.js \
const initialState = {
counter: 0
}

const reducer = (state = initialState, action) => {

return state;
};

export default reducer;

2. Import connect.
Counter.js \
// connect will allow us to connect our store with our component
import { connect } from 'react-redux';

3. create a const that is a function that returns an object with the value(s) that come(s) from the store.
/* this function allow us to receive props from our store, the state parameter here is the state
of our store */
const mapStateToProps = state => {
return {
ctr: state.counter
};
};

4. export connect with our const as parameter and our component as the returned value
/* connect is a high order component, it's a function which returns a higher order component,
that is why Counter is in parenthesis at the end */
export default connect(mapStateToProps)(Counter);
5. Get the value from the store as a prop
<CounterOutput value={this.props.ctr} />

To add a way to dispatch actions to our store from our component we simply follow step 1 from above, then:

1. We add a function that returns an object with our dispatch functions.

Counter.js \
// this function will dispatch our actions to our store
const mapDispatchToProps = dispatch => {
return {
onIncrementCounter: () => dispatch({type: 'INCREMENT'})
};
};

2. We pass that function as a second argument to connect it to the store

/* connect is a high order component, it's a function which returns a higher order component,
that is why Counter is in parenthesis at the end */
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

3. We can call our new function the following way

4. Finally in our reducer we add our function.

reducer.js \
const initialState = {
counter: 0
}

const reducer = (state = initialState, action) => {

if (action.type === 'INCREMENT') {
return {
counter: state.counter + 1
}
}
return state;
};

export default reducer;

6.2.3 - Passing and retrieving data with Action

1. We are just dispatching a javascript object and only the type property is set in stone, so to say. We can obviously add more
properties to that object, no one is stopping us from doing that, we can simply add a second property, and it is a good practice to
call that one payload, because that is what it is and inside of it we can send data.
onAddCounter: () => dispatch({ type: 'ADD', payload: { value: 5 } }),

2. Then inside our reducer we can easily get our date from our action object.
const reducer = (state = initialState, action) => {
...
if (action.type === 'ADD' ){
return {
...state,
counter: state.counter + action.payload.value
}
}

6.2.4 - Updating arrays immutably

reducer.js \
case 'STORE_RESULT':
return {
...state,
// concat returns a new array so we do not modify our original one
results: state.results.concat({
id: new Date(),
value: state.counter
})
}
Counter.js \
<li key={storeResult.id} onClick={ () => this.props.onDeleteResult(storeResult.id) }>
{storeResult.value}</li>

onDeleteResult: (id) => dispatch({ type: 'DELETE_RESULT', payload: { resultElementId: id } })

reducer.js \
case 'DELETE_RESULT':
// We can use filter to clone our array without mutating our original one
const updatedArray = state.results.filter(
(result) => result.id !== action.payload.resultElementId);
return {
...state,
results: updatedArray
}

6.2.5 - Immutable Update Patterns

The key to updating nested data is that every level of nesting must be copied and updated appropriately. This is often a difficult
concept for those learning Redux, and there are some specific problems that frequently occur when trying to update nested
objects. These lead to accidental direct mutation, and should be avoided.

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

6.2.6 - Outsourcing Action Types

There always is the danger of us simply adding a tiny typo in our dispatch actions and searching for it for hours because we don't
find it. Therefore it is a good practice to outsource your action types into constants you can use in your application so that you
always just import a constant and eliminate the danger of mistyping, this is especially useful as your application grows.

actions.js \
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const ADD = 'ADD';
export const SUBTRACT = 'SUBTRACT';
export const STORE_RESULT = 'STORE_RESULT';
export const DELETE_RESULT = 'DELETE_RESULT';

reducer.js \
import * as actionTypes from './actions';

case 'STORE_RESULT':

case actionTypes.STORE_RESULT:

We can do the same in our components, in this case our container component
Counter.js \
onIncrementCounter: () => dispatch({ type: actionTypes.INCREMENT }),

6.2.6 - Multiple Reducers

All actions in the end get funneled through one reducer but redux, the package gives us a utility method we can use to combine
multiple reducers into one, so that we still follow the pattern of having only one reducer behind the scenes but for us as a developer,
that we can split up our code logically so that we don't get one huge reducer.

We can do it so with the following steps:

1. Create a new folder to store our reducers:

In this case we created one to only manage our counter value and another for our results array

*We don't need our central reducer anymore.

2. Each reducer should only work with one state:

import * as actionTypes from '../actions';

const initialState = {
results: []
}

const reducer = (state = initialState, action) => {

switch (action.type) {
case actionTypes.STORE_RESULT:
return {
...state,
// concat returns a new array so we do not modify our original one
results: state.results.concat({
id: new Date(),
value: action.payload.result
})
}
case actionTypes.DELETE_RESULT:
// We can use filter to clone our array without mutating our original one
const updatedArray = state.results.filter(
(result) => result.id !== action.payload.resultElementId);
return {
...state,
results: updatedArray
}
default:
break;
}
return state;
};

export default reducer;

3. Inside the index we made the following modifications:

Index.js \
We need to import combineReducers from redux.
import { createStore, combineReducers } from 'redux';
We need to inmport our reducers.
import resultReducer from './store/reducers/resultsReducer';
import resultReducer from './store/reducers/resultsReducer';
Create a const that will get the state we create in other reducers inside new keys, this will be
our new centrar state.
const rootReducer = combineReducers({
counterState: counterReducer,
resultsState: resultReducer
});
Instead of using our imported reducer we use our const reducer that created our new centralized
state.
/* We create our store const using the function from our redux import and
as parameter we use the reducer(s) file we created */
const store = createStore(rootReducer);

4. Inside our components we need to change our mapStateToProps, we can no longer get our centralized state directly from
state.
Counter.js \
/* this function allow us to receive props from our store, the state parameter here is the state
of our store */
const mapStateToProps = state => {
return {
counter: state.counterState.counter,
results: state.resultsState.results
};
};

!Quick note: manage state from reducer inside another reducer

To manage other state values inside a reducer that it does not owns, that value that value must always come from a payload.
case actionTypes.STORE_RESULT:
return {
...state,
// concat returns a new array so we do not modify our original one
results: state.results.concat({
id: new Date(),
value: action.payload.result
})
}

6.2.7 - Understanding state types

Do you always have to use redux to begin with?

Well the question whether you use redux or not depends on the size of your application and the complexity
of your state.

Let's consider local UI state such as showing or hiding a backdrop, opening a modal, all these things which of course change the
state to update the UI of your react application and hence to show something different, should you use redux for that? The answer
is often times, you might not use redux here, you mostly handle this within your components, that being said, you can use redux for
that.

Another important type of state is persistent state, this means the state you typically also store in server side databases like the
users of your application or posts of a blog, all burger orders, stuff like that. Now here, you typically do use redux but of course not
for all the data you have in your service side database because redux of course is just for managing the state in your application as
long as your application is alive. And always keep in mind, when the user refreshes your page, your state is gone so redux is not a
replacement for a database, instead you store such data on a server but the relevant slices are managed by redux. So the post
you're currently displaying, the users you currently need to display, the post the user currently may edit, these things are loaded and
stored in redux so that you have them available so that you can render them to the screen.

you definitely need to be aware of the current filter settings on your client in your javascript code in the react application
though.This is state you definitely use redux for, you managed that via redux because it might affect multiple components or areas
of your application, for example if the user is authenticated, it might be important for a lot of components in your app and there,
redux really shines because the central storage then offers a huge advantage.

This table splains it in a visual way:

REDUX ADVANCED

7 - MiddleWare

7.1 - Introduction to Middleware

Middleware basically is a term used for functions or the code general you hook into a process which then gets executed as part of
that process without stopping it.

In the redux context we can add middleware and our actions will still reach our reducers thereafter but we can do something with
those actions before it reaches our reducer, that can be simply logging something, but that will also become important later when
we want to execute asynchronous code.

7.2 - Adding Simple Middleware

We can simply add a Middleware to our central state the following way

Index.js \
We need to import applyMiddleware
import { createStore, combineReducers, applyMiddleware } from 'redux';
We create our middleware
/* This middleware logs each action we do to our central state, it will get the
store as a parameter because we use a method provided by redux, that will give us
the store */
const logger = store => {
/* We call this parameter 'next' because this will be a function which you can
execute to let the action continue its journey onto the reducer */
return next => {
// Next returns an action we dispatch as an input
return action => {
console.log('[Middleware] Dispatching:', action);
const result = next(action);
console.log('[Middleware] next state:', store.getState());
return result;
}
}
};
We add appyMiddleware to our createStore
const store = createStore(rootReducer, applyMiddleware(logger) );

7.3 - Use the Redux DevTools

The Redux DevTools are specialized tools, that allows us to debug our apps that are using redux and others things like watching our
current state and its previous values.

To use them we need to install them as an addon in our browser and them follow the next steps:

Index.js \
We need to import compose to use compose to compose a set of enhancers with both the dev tools features and our middleware.
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
We create a const to store our compose.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
Finally we wrap our applyMiddleware created in the last chapter with our created function composeEnhancers.
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(logger)) );

7.4 - Introducing Action Creators

Now I want to introduce a new way of creating actions, so-called action creators, how does that look like? What is that? An action
creator is just a function which returns an action or which creates an action, hence the name.

Since we are going to have more actions in the future this folder structure works better.

We can create a simple action creator this way, it is just a function that returns an object.
actions.js \
export const increment = () => {
return {
type: INCREMENT
};
};

We need to import our action.

Counter.js \
import { increment } from '../../store/actions/actions';

Then we can dispatch our action.

onIncrementCounter: () => dispatch( increment() ),

But a better way of import then would be the ‘import everything’ way and give it a name.
import * as actionCreators from '../../store/actions/actions';
In this case we need to call our function through the name we gave to our import.
onIncrementCounter: () => dispatch( actionCreators.increment() ),

We can also add a payload as a parameter.

onAddCounter: () => dispatch( actionCreators.add({ value: 5 }) ),

Then in our action we can recibe that parameter and return it.
export const add = (payload) => {
return {
type: ADD,
payload: payload // { value: 5 }
};
};

But to made it easer to read what we are sending we can show what values we are passing.
export const add = (payload) => {
return {
type: ADD,
payload: {
value: payload.value
}
};
};

In the end this actions will only call their respective reducers and this actions are a nice structure we can use as base for a more
complex state management like the Asynchronous one.

7.5 - Handling Asynchronous Code with Redux Thunk

Redux Thunk is a library which adds a middleware to your project which allows our actions to not return the action itself but return a
function which will eventually dispatch an action. With this little trick, not returning the action itself but a function which will then
dispatch one, we can run asynchronous code because the eventually dispatched one part is the part which may run
asynchronously.

But what’s a thunk?

A thunk is a function that wraps an expression to delay its evaluation.

To install it we type in the terminal in the location of our app:

$ npm install redux-thunk

Then we need to import it:

Index.js \
const ReduxThunk = require('redux-thunk').default

We can now create our ‘thunk actions’.

/* Redux Thunk middleware allows you to write action creators that return
a function instead of an action. The inner function receives the store
methods 'dispatch' and 'getState' as parameters. */
export const storeResult = (payload) => {
return (dispatch) => {
/* This setTimeout is the simulation of a petition that takes two
seconds to response */
setTimeout( () => {
dispatch(saveResult(payload))
} , 2000 );
}
}

The ‘thunk action’ in the end dispatch the action that call its reducer, like this one.
export const saveResult = (payload) => {
return {
type: STORE_RESULT,
payload: {
result: payload.result
}
};
};

7.6 - Restructuring Actions to made them modular

Instead of having a single file for our actions we can have many.

indexActions.js \
export {
add,
subtract,
increment,
decrement
} from './counterActions';
export {
storeResult,
deleteResult
} from './resultActions';

actionTypes.js \
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const ADD = 'ADD';
export const SUBTRACT = 'SUBTRACT';
export const STORE_RESULT = 'STORE_RESULT';
export const DELETE_RESULT = 'DELETE_RESULT';

resultActions.js \
import * as actionTypes from './actionsTypes';

export const storeResult = (payload) => {

return (dispatch) => {
setTimeout( () => {
dispatch(saveResult(payload))
} , 2000 );
}
}

export const saveResult = (payload) => {

return {
type: actionTypes.STORE_RESULT,
payload: {
result: payload.result
}
};
};

export const deleteResult = (payload) => {

return {
type:actionTypes.DELETE_RESULT,
payload: {
resultElementId: payload.resultElementId
}
};
};

7.7 - Get the state in your actions with getState

redux-thunk can pass as an additional argument, getState, that is a method we can execute to get the current state. Sometimes in
your asynchronous code, you need to be able to reach out to the state prior to your to-be-dispatched action, let's say you want to
save some data for a given user and you have the id of the user stored in your redux state, you can then get it with getState.

In this example we show our storeResult action using the second parameter that Redux-thunk functions gave us to simply log a
value from our state, of course we can use it do much more complex functions.
resultActions.js \
export const storeResult = (payload) => {
return (dispatch, getState) => {
setTimeout(() => {
const oldCounter = getState().counterState.counter;
console.log(oldCounter);
dispatch(saveResult(payload))
}, 2000);
}
}

try to write action creators and reducers in a way that you don't have to use getState, instead you can pass all the data you need in
your async action creator like the user id into it by accepting it as an argument.

Routing

8.1 - How does Routing Works?

The idea behind a single page application is to have, well guess what?
A single page, a single html file. We still want to provide the user with a normal web using experience, but in a SPA we actually don't
have have multiple html files, but then we instead use javascript to render different pages for different paths.

So we don't really have different files but simply we re-render parts off that single page or maybe
the entire single page depending on which path the user navigated to in our application. This is what
routing is about, parsing this path, so the path after our domain and showing the appropriate jsx or component code in our app.
And for that as I said, we're going to use a router package.

The router package first of all of course it has to parse the URL path to understand where the user wanted to go to.

Then we as a developer have to configure different paths in our application which we support and the router package can then read
our configuration basically, so that it knows which paths are supported and what should happen when the user visits one of these
paths.

In the third step, it will then render or load the appropriate jsx or component code depending on which path the user visited.
This is the idea behind routing, load different code, conditional jsx or component code for different paths and we use a router
package so that we don't have to determine which path the user is on on our own.

8.2 - Setting up links

First thing we need to do is create our navigation bar.

Blog.js \
<div className="Blog">
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/new-post">New Post</a></li>
</ul>
</nav>
</header>
...
</div>

We can add some typical styles to make it look better.

Blog.css \
.Blog ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}

.Blog li {
display: inline-block;
margin: 20px;
}

.Blog a {
text-decoration: none;
color: black;
}

/* Our anchors will be orange when the mouse overs */

.Blog a:hover,
.Blog a:active {
color: #fa923f;
}

8.3 - Setting up the router package

We need to instal this two packages react-router and react-router-dom. this is a packages are not created by Facebook but it's
de-facto standard for routing in react applications.

react-router contains the logic you could say but to be able to render something to the dom, so to tell react to render something, we
need react-router-dom too.
$ npm install --save react-router react-router-dom

Then we import a component, which we can name BrowserRouter.

App.js \
import { BrowserRouter } from 'react-router-dom';

finally we can wrap our app with the imported component.

We installed both react-router and react-router-dom . Technically, only react-router-dom is required for web development. It wraps
react-router and therefore uses it as a dependency.

We don't need to install react-router on our own for it to work. You can omit this installation step, I left it in there for historic reasons
and because I like to emphasize that the main package is named react-router. If you ever search for assistance, you probably want
to search for "react router" - that's the name of the package.

8.4 - Preparing the Project For Routing

An structure we you have a main container (Blog) that call the other containers is ideal.

8.5 - Setting up and rendering routes

To use routing in our container component we need to import Route.

Blog.js \
import { Route } from 'react-router-dom';

Our route component needs a path property which is a simple string and if that string matches our current route, route has a
property called render which actually holds a reference to a function and you can pass an anonymous function, an arrow function
there. This function then has to return jsx which should be rendered.
<Route path="/" render={() => {
return (<h1>HI</h1>);
}} />

But even if we are not in our home path, its JSX will be render!

That is so because react router to determine which path you're on sees if your current path starts with this path. So if this is a
prefix, you can override this behavior by adding one more prop which is exact.
<Route path="/" exact render={() => {
return (<h1>HI</h1>);
}} />

We can as many route components as we want and they can vary in configuration.
<Route path="/" exact render={() => {
return (<h1>HI</h1>);
}} />
<Route path="/" render={() => {
return (<h1>HI 2</h1>);
}} />
We will get the following result on our browser.
8.6 - Rendering Components for Routes

We need to import our component.

import Posts from './Posts/Posts';

We want to use the component property and as the name suggests, this allows us to pass a component which should be rendered
in this route's place.

component needs to be a reference to the function or class we want to use.

In the end here this is the default case which will use a lot in our apps, we normally want to render full components.

We will get the following result on our browser.

8.7 - Using Links to switch pages without reloading

Import Link component

Blog.js \
import { Route, Link } from 'react-router-dom';

We need to repace our anchor tags

with the Link component, and also replace our href property with the to property
<li><Link to="/">Home</Link></li>
<li><Link to="/new-post">New Post</Link></li>

to can also be a more complex element, it can be a javascript object and hence needs to be wrapped in single curly braces to
output dynamic content and then the dynamic content is a javascript object, so one more pair of curly braces.

Inside our object we can use the property pathname to set our pat.
<li><Link to={{ pathname: '/new-post' }}>New Post</Link></li>

We can add hash, this would allow us to then jump to any ID submit we have in that elements, so using that feature of appending a
fragment of the URL, you might be aware of that, you can simply add hash something after the URL to jump to that point.
<li><Link to={{
pathname: '/new-post',
hash: '#submit'
}}>New Post</Link></li>

We can also set up search and search allows us to add queryParams like quick submit equals.
<li><Link to={{
pathname: '/new-post',
hash: '#submit',
search: '?quick-submit=true'
}}>New Post</Link></li>

Our general structure will look the following way.

Blog.js \
import { Route, Link } from 'react-router-dom';

<Route path="/" exact component={Posts} />

8.8 - Using Routing-Related Props

react router gives us some extra information about the loaded route through props.
componentDidMount() {
console.log('[NewPost]',this.props);
}

history, location and match, is not something we set up, this is passed by react router.

8.9 - The "withRouter" HOC & Route Props

8.10 - Absolute vs Relative Paths

8.11 - Styling the Active Route

To add a class to our links we actually need to use another component instead of link, we use NavLink
Blog.js \
import { Route, NavLink } from 'react-router-dom';

Replace our link components with the NavLink component.

This will give our component a class called active.

Remember that react-router threats its paths as prefixes, so we need to use exact if we don´t want our active class to be present
even when our NavLink is not matching its exact route.

<li><NavLink to="/" exact>Home</NavLink></li>

Sometimes you don't want to use that default of active as an active class name and for that we can use the property
activeClassName. which uses the following syntax: activeClassName=”<class name>”.
<li><NavLink to="/" exact activeClassName="my-active-link" >Home</NavLink></li>

Then we can style our class

.Blog .my-active-link {
color: rgb(250, 140, 240);
}

We can see that our active NavLink gets styled.

8.12 - Passing Route Parameters

For passing route parameters we define a flexible, a variable route parameter with colon and then any name of your choice, the
syntax goes as following path=”/:<parameter name>”.
Blog.js \
<Route path="/:id" component={FullPost} />

This will be replaced dynamically or essentially it tells the react router ‘hey whenever you have slash something, this route here is
meant’ so in this example just call an ID.

But we also need a link that goes to a dynamic route

Post.js \
import { Link } from 'react-router-dom';

Basically we can add a dynamic link wrapping inside parentheses a dynamic value.
<Link to={'/' + post.id} key={post.id} >

Our general structure will look the following way.

return (
<section className="Posts">
{posts}
</section>
);

In our app, till this point we can see that we successfully created dynamic links, but we need to know how to extract those values.

8.13 - Extracting Route Parameters

We can log the props off our component with our lifecycle componentDidMount

Post.js \
componentDidMount () {
console.log('[FullPost]',this.props);
}

Taking a log to our object we can see that we can get our id inside the route props.match.params.id.

So we can easily get our route parameters that way.

console.log('[FullPost]',this.props.match.params.id);

Our general structure will look the following way, and we are using this values here to create a dynamic petition.
componentDidMount () {
console.log('[FullPost]',this.props.match.params.id);
if ( this.props.match.params.id ) {
if ( !this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== this.props.id) ) {
axios.get( '/posts/' + this.props.match.params.id )
.then( response => {
// console.log(response);
this.setState( { loadedPost: response.data } );
} );
}
}
}

Testing

9.1 - What is testing?

What is testing? testing does not mean that we test our application manually, we obviously do that and we should do that. With
testing here, I mean that we write automated tests.

So what we typically do is we build an application, then of course we test it manually in the browser and then we ship it to a server,
now there's one extra step we can add in any development workflow and that is that we don't just ship the app after testing it
manually but that we also have automated tests.

Now these are tests which run automatically, we write them and then each test tests a tiny fraction of
our application,that's a so-called unit test,it tests a unit of our app.
9.2 - Required testing tools

The first tool is the test runner,this is basically a tool which is responsible for executing our tests so for running the code, test code
and providing a validation library which in the end is a library which allows us to do comparisons and potentially throw some errors.

The idea behind unit tests is that they don't run in the browser but instead with nodeJS though often emulated to be in a browser
environment with the help of specific javascript packages.

the good thing is create react app already comes with a pre-configured testing environment, Jest is already installed in the app that
is the one we will use as test runner.

When working with reacting components, we also need a way of emulating these component, for this, we need testing utilities
which help us with testing and there, we specifically need the just described help to simulate the react app, mount components and
dig into that dom which is created with react.

And that's Enzyme. Enzyme is a tool developed by AirBnB, they use react in a lot of their projects and they share this tool which
makes it easy to mount components and then navigate through them.

9.2.1 - A quick summary of the required testing tools.

Jest

Enzyme Enzyme is a JavaScript Testing utility for React that makes it

easier to test your React Components' output. You can also
manipulate, traverse, and in some ways simulate runtime given
the output.

More information in:

https://www.leighhalliday.com/testing-react-jest-enzyme-sinon
9.3 - What to test?

In general, here are some things you would not want to test: you don't want to test the library,
you don't want to test react or axios or redux itself, these are third party libraries which already were tested by the developers.

you want to test the code you added to your application and there you want to test the code which does not use that library.

Additionally you don't want to test too complex connections especially in react, there is the danger of testing that you click a button
in one component and you change something in a totally different component.

what are you going to test then?

Typical examples are isolated units,you want to test that reducer function you created, you want to test that component function
you created, you also want to test conditional output if your component has a property which leads to something being rendered if
that property is true, then you want to test if this really happens.

What happens if some property changes in your component?

Does that affect the output correctly?
These are things you want to test in your unit tests.

9.4 - Writing a test

The first thing is that we need to install enzyme and then the react test renderer package, that is a dependency of enzyme which we
need to install separately and we need to install an adapter of the enzyme package to our current react version. So here this is the
enzyme adapter-react-16 version 4 react 16.

$ npm install --save enzyme react-test-renderer enzyme-adapter-react-16

Now let me start with a functional component.

WeatherCard.js \
import React from 'react';
import css from './WeatherCard.module.css';

const weatherCard = (props) => {

// Const & variables //

let data = props.data;
let renderData;

// Functions //
const parseLatLong = (string) => {
let parsedString = string.split(',');
let lat = parseInt(parsedString[0]);
let long = parseInt(parsedString[1]);
return `${lat}, ${long}`;
}

const formatDataToBeCompared = () => {

let date = new Date();
let dataArray = date.toLocaleDateString().split("/");
let newData = dataArray[2].concat("-", dataArray[0], "-", dataArray[1]);
return newData;
}

const getInfoDependingOfDay = (currentDay, data) => {

for (let i = 0; i < data.consolidated_weather.length; i++) {
if (data.consolidated_weather[i].applicable_date === currentDay) {
return i;
}
}
// In case is 23:00 and the API was updated to the next day we use the closest day
return 0;
}

const showCardStatus = () => {

switch (props.status) {
case 'Loading':
return <div className={css.loadingSection}><p>Loading...</p></div>;
case 'Success':
return renderData;
case 'Error':
default:
return <div className={css.loadingSection}><p>There was an error.</p></div>;
}
}

if (Object.entries(data).length > 0) {
let currentDay = formatDataToBeCompared();
let currentDayWeatherObject = data.consolidated_weather[getInfoDependingOfDay(currentDay, data)];

renderData = (
<React.Fragment>
<div className={css.citySection}>
<p> {`${data.title}, ${data.parent.title}`} </p>
<p> {parseLatLong(data.latt_long)} </p>
</div>
<div className={css.imageSection}>
<img

src={`https://www.metaweather.com/static/img/weather/png/64/${currentDayWeatherObject.weather_state_abbr}.png`}
alt="Weather PNG"
/>
</div>
<div className={css.weatherSection}>
<p> {currentDayWeatherObject.weather_state_name} </p>
<p> {`${parseInt(currentDayWeatherObject.min_temp)} ℃-${parseInt(currentDayWeatherObject.max_temp)} ℃`} </p>
</div>
</React.Fragment>
);
}

// Rendering //
return (
<div className={css.flexContainer}>
<h2>Weather Forecast</h2>
{showCardStatus()}
</div>
);
}

let's create a testing file for this component:

Now inside this test file, I now can start writing my test and a test uses Jest by default and Jest on
the other hand gives us a couple of methods to define the test.
The first important method is the describe method,you don't need to import it, Describe is a function that takes two arguments, the
first is just a description of the test bundle.This is only what you'll see later in the console output so it should be something which
allows you to identify which kind of tests we'll run here.

WeatherCard.test.js \
describe('<WeatherCard />', …);

The more interesting part comes in a second argument, that is your testing function.

next thing is to write the ‘it’ function, It describes or allows you to write one individual test, it also takes two arguments.

The first one is again just a string, a description which will appear in the console
it('If <WeatherCard /> has props.status === "Loading" it should render a div with class "classloadingSection"', …);

We want to create an instance of one component as it would be rendered to the DOM, so we need to import two things form
enzyme:
import { configure, shallow } from 'enzyme';
and our adapter:
import Adapter from 'enzyme-adapter-react-16';

because we are going to use JSX with a method called shallow we need to import react.
import React from 'react';

We can now execute configure and pass a javascript object to configure. There we should set up an adapter property and assign
new adapter as a constructor function, so this adapter is instantiated with new adapter and that's all, with that enzyme is
connected.
configure({ adapter: new Adapter() });

So far it was only boilerplate and strings, now we are going to use shallow, Shallow is the most popular or the best way of rendering
react components in many circumstances.

because one thing shallow does is it renders the component with all its content but the content isn't deeply rendered,we don't then
render a whole subtree of components, we just want to render a component and know what's inside of it without rendering
everything which is nested inside its included components.

To use a component with the shallow method we need to import it.

import WeatherCard from './WeatherCard';
Then we can add it to our method and also add properties
const wrapper = shallow(<WeatherCard status="Loading" />);

We can use static objects to fill those properties instead of data from a petition.
import {weatherDataObject} from '../../test_objects/testObjects';

we can simply add those values to our properties inside our shallow function.
const wrapper = shallow(<WeatherCard data={weatherDataObject} status="Loading" />);

The last part of testing is when we write our expectation, for that we use the expect method, Inside expect, we define the thing we
want to check.

Here we are expecting to find a div with the class loadingSection and with toHaveLength we establish that we expect a certain
number of items we define in the find method, in this case we expect only one.
expect( wrapper.find('div.loadingSection')).toHaveLength(1);

We can also expect for a component, we just need to import if

import MyComponent from '../../components/MyComponent';
And use the find method with it.
expect( wrapper.find(MyComponent)).toHaveLength(1);

To run our test we type on the terminal the following.

$ npm test

Our test file should look like this.

// Imports //

import React from 'react';

import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// Local Imports //

import WeatherCard from './WeatherCard';

import {weatherDataObject} from '../../test_objects/testObjects';

// Configurations //

configure({ adapter: new Adapter() });

// Tests //

describe('<WeatherCard />', () => {

it('If <WeatherCard /> has props.status === "Loading" it should render a div with class "classloadingSection"', () => {
const wrapper = shallow(<WeatherCard data={weatherDataObject} status="Loading" />);
expect( wrapper.find('div.loadingSection')).toHaveLength(1);
});
});

9.5 - beforeEach function

beforeEach takes a function as an argument and this is the function which will get executed before each test, we can use it so we
don't the need to set our wrapper for each test.
let wrapper;

beforeEach( () => {
wrapper = shallow(<WeatherCard data={weatherDataObject}/>);
});

And to set different properties to each wrapper we can use the function setProps.
wrapper.setProps({ status: "Loading" });

Now our file looks this way.

// Imports //

import React from 'react';

import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// Local Imports //

import WeatherCard from './WeatherCard';

import {weatherDataObject} from '../../test_objects/testObjects';

// Configurations //

configure({ adapter: new Adapter() });

// Tests //

describe('<WeatherCard />', () => {

let wrapper;

beforeEach( () => {
wrapper = shallow(<WeatherCard data={weatherDataObject}/>);
});

it('If <WeatherCard /> has props.status === "Loading" it should render a div with class "classloadingSection"', () => {
wrapper.setProps({ status: "Loading" });
expect( wrapper.find('div.loadingSection')).toHaveLength(1);
});

it('If <WeatherCard /> has props.status === "Success" it should render a div with class "citySection"', () => {
wrapper.setProps({ status: "Success" });
expect( wrapper.find('div.citySection')).toHaveLength(1);
});

});

9.6 - Jest & enzyme documentations

Jest:
https://jestjs.io/docs/en/getting-started

Enzyme:
https://airbnb.io/enzyme/docs/api/ShallowWrapper/prop.html
or
https://github.com/airbnb/enzyme/

Package Installations on Linux

10.1 - Reference Package Installations on Linux

Setting Up a Local React Project with Create React App

Create a React App with Create-React-App:

https://www.codecademy.com/articles/how-to-create-a-react-app

1.Install Node Package Manager

$ sudo apt-get install nodejs
2. Verify your npm version
$ node -v
3.If is the first time, in the terminal type:
$ npm install create-react-app -g
4.In the terminal type:
$ create-react-app <project name>
*It will automatically install all the dependencies that it needs
5.- in the terminal type:
$ cd <project name we chose>
$ npm start

Install the router package

$ npm install --save react-router react-router-dom
Install Prop types package
$ npm install --save prop types
Install Redux
$ npm install --save redux
Install Redux for React
$ npm install --save react-redux
Install Axios for React
$ npm install --save axios

Comparison Tables

11.1 - Table of equivalents of lifecycle methods between class-based components and functional components

Class-Based Component Functional Component with React Hooks

componentWillMount(){
// Fires immediately before initial render
}

render(){ A functional component simply return JSX items.

// Returns JSX items
}

componentDidMount(){ useEffect()
/* Fires immediately after initial render, ideal for making useEffect takes two arguments:
petitions because setState is available */
} If our second argument is an empty array our useEffect will
behave like componentDidMount executing only once.

componentWillReceiveProps(){
// Fires when component is receiving props
}

shouldComponentUpdate() {
// Fires before rendering with new props or state
}
componentWillUpdate() {
/* Fires immediately before rendering with new props or state
*/
}

componentDidUpdate() { useEffect()
/* Fires immediately after rendering with new P or S */ useEffect takes two arguments:
}
If we add state elements in the array of our second argument, it
will execute whenever those values are changed thus acting
like componentDidUpdate.

componentWillUnmount(){
/* Fires immediately before component is unmounted from
DOM (removed) */
}

The Ultimate React - Js Guide
100% (1)
The Ultimate React - Js Guide
33 pages
Reactjs - Interlace Your Interface Introduction To Reactjs: What Is Exciting Here?
No ratings yet
Reactjs - Interlace Your Interface Introduction To Reactjs: What Is Exciting Here?
19 pages
React
100% (1)
React
116 pages
The Ultimate React - Js Guide
100% (2)
The Ultimate React - Js Guide
33 pages
Main Concept of React Js
No ratings yet
Main Concept of React Js
68 pages
React Js
No ratings yet
React Js
21 pages
The React Cheatsheet
No ratings yet
The React Cheatsheet
19 pages
Unit2 ReactJS
No ratings yet
Unit2 ReactJS
33 pages
Workbook Speakout Pre - Intermediate Level 5
No ratings yet
Workbook Speakout Pre - Intermediate Level 5
234 pages
Unit V React
No ratings yet
Unit V React
38 pages
Week5 FSD
No ratings yet
Week5 FSD
84 pages
React Basics
No ratings yet
React Basics
69 pages
Learn React_ JSX Cheatsheet _ Codecademy
No ratings yet
Learn React_ JSX Cheatsheet _ Codecademy
6 pages
React Merged
No ratings yet
React Merged
38 pages
Introduction To React: JSX Cheatsheet - Codecademy
No ratings yet
Introduction To React: JSX Cheatsheet - Codecademy
7 pages
Learning React Js
No ratings yet
Learning React Js
50 pages
Learning JSX Summary Notes-3158
No ratings yet
Learning JSX Summary Notes-3158
14 pages
React JS Intro
No ratings yet
React JS Intro
19 pages
React Notes
No ratings yet
React Notes
38 pages
Unit 2
No ratings yet
Unit 2
37 pages
30 Days of React Ebook Fullstackio PDF
No ratings yet
30 Days of React Ebook Fullstackio PDF
304 pages
What Is JSX
No ratings yet
What Is JSX
12 pages
30 Days of React
100% (1)
30 Days of React
281 pages
Introduction to React_ JSX Cheatsheet _ Codecademy
No ratings yet
Introduction to React_ JSX Cheatsheet _ Codecademy
7 pages
React Book - Freebie
91% (11)
React Book - Freebie
303 pages
Report
No ratings yet
Report
37 pages
30 Days of React Ebook Fullstackio PDF
100% (1)
30 Days of React Ebook Fullstackio PDF
290 pages
IT487 M8 Ch2 STD
No ratings yet
IT487 M8 Ch2 STD
37 pages
Reactfile
No ratings yet
Reactfile
101 pages
React Js Basics
No ratings yet
React Js Basics
7 pages
React Notes
No ratings yet
React Notes
567 pages
Document 1
No ratings yet
Document 1
34 pages
React JSX
No ratings yet
React JSX
11 pages
6 - JSX
No ratings yet
6 - JSX
9 pages
React JS
No ratings yet
React JS
25 pages
React in 30 Day
No ratings yet
React in 30 Day
304 pages
React 2
No ratings yet
React 2
304 pages
Introduction To React - JSX Cheatsheet
No ratings yet
Introduction To React - JSX Cheatsheet
6 pages
React Notes
No ratings yet
React Notes
27 pages
Mark Erikson - Introduction To React, Redux, and TypeScript (2020)
100% (1)
Mark Erikson - Introduction To React, Redux, and TypeScript (2020)
111 pages
React Intro
No ratings yet
React Intro
40 pages
React: Installation
No ratings yet
React: Installation
164 pages
Delightful React Code and Sketches
100% (1)
Delightful React Code and Sketches
90 pages
React JSX
No ratings yet
React JSX
4 pages
Overview of JSX
No ratings yet
Overview of JSX
34 pages
Unit - 5
No ratings yet
Unit - 5
34 pages
Define What'S JSX?: Javascript and HTML (Kind of HTML)
No ratings yet
Define What'S JSX?: Javascript and HTML (Kind of HTML)
14 pages
Learn React - JSX Cheatsheet - Codecademy
No ratings yet
Learn React - JSX Cheatsheet - Codecademy
6 pages
React Js Material
No ratings yet
React Js Material
280 pages
React JS Interview Questions
No ratings yet
React JS Interview Questions
49 pages
React Research
No ratings yet
React Research
21 pages
React Fundamentals
No ratings yet
React Fundamentals
9 pages
React
No ratings yet
React
13 pages
React - React Native
No ratings yet
React - React Native
79 pages
Unit-1 Introduction To React and ES6 OLD
No ratings yet
Unit-1 Introduction To React and ES6 OLD
85 pages
Unit 4
No ratings yet
Unit 4
37 pages
JSX
No ratings yet
JSX
4 pages
React js
No ratings yet
React js
19 pages
FEWD Unit-2 ReactJS
No ratings yet
FEWD Unit-2 ReactJS
58 pages
JAVASCRIPT FRONT END PROGRAMMING: Crafting Dynamic and Interactive User Interfaces with JavaScript (2024 Guide for Beginners)
From Everand
JAVASCRIPT FRONT END PROGRAMMING: Crafting Dynamic and Interactive User Interfaces with JavaScript (2024 Guide for Beginners)
DAISY JOHNSTON
No ratings yet
JavaScript Merged
No ratings yet
JavaScript Merged
49 pages
Build A Custom Widget in SAP Analytics Cloud, Analytics Application - SAP Blogs
No ratings yet
Build A Custom Widget in SAP Analytics Cloud, Analytics Application - SAP Blogs
96 pages
WebKit ObjC
No ratings yet
WebKit ObjC
325 pages
Front-End Web Development With Reactjs: Presented By: Ajay Kumar Gupta B.Tech C.E. 5 Sem
No ratings yet
Front-End Web Development With Reactjs: Presented By: Ajay Kumar Gupta B.Tech C.E. 5 Sem
18 pages
LWC Tutorial
No ratings yet
LWC Tutorial
121 pages
UNIT-4: What Is Restful Web Services? Restful Web Services Is A Lightweight, Maintainable, and Scalable
No ratings yet
UNIT-4: What Is Restful Web Services? Restful Web Services Is A Lightweight, Maintainable, and Scalable
41 pages
ITS OD 302 Javascript 0922
No ratings yet
ITS OD 302 Javascript 0922
2 pages
Highlights of 49 Version of Virtua - VTLS
100% (1)
Highlights of 49 Version of Virtua - VTLS
53 pages
ASP.NET
No ratings yet
ASP.NET
261 pages
WP T and L - Syllabus
No ratings yet
WP T and L - Syllabus
2 pages
Apple Javascript Coding Guidelines: Tools & Languages: Other Languages
No ratings yet
Apple Javascript Coding Guidelines: Tools & Languages: Other Languages
26 pages
Host Objects: Browsers and The DOM: Web Technologies A Computer Science Perspective
No ratings yet
Host Objects: Browsers and The DOM: Web Technologies A Computer Science Perspective
60 pages
Certified API Testing Professional Brochure
No ratings yet
Certified API Testing Professional Brochure
6 pages
UI Technologies Course Brochure
No ratings yet
UI Technologies Course Brochure
10 pages
Using Thymeleaf
No ratings yet
Using Thymeleaf
76 pages
Core JavaScript Notes
No ratings yet
Core JavaScript Notes
62 pages
Time Schedule
No ratings yet
Time Schedule
6 pages
Mohammad Alfaiz Khan Microservices Assignment
No ratings yet
Mohammad Alfaiz Khan Microservices Assignment
10 pages
Full Stack Web Development Specialization v2 Brochure
No ratings yet
Full Stack Web Development Specialization v2 Brochure
21 pages
Week-9.2 Typescript Intro
No ratings yet
Week-9.2 Typescript Intro
29 pages
Unit - 4 XML
No ratings yet
Unit - 4 XML
82 pages
Week 1.1 - Orientation Class
No ratings yet
Week 1.1 - Orientation Class
18 pages
Smashing Ebook 25 Mastering Html5
100% (1)
Smashing Ebook 25 Mastering Html5
93 pages
Internet Programming - 03
No ratings yet
Internet Programming - 03
90 pages
WT Unit 3
No ratings yet
WT Unit 3
125 pages
1 Semester QB 2K19
No ratings yet
1 Semester QB 2K19
12 pages
Fullstack Syllabus
No ratings yet
Fullstack Syllabus
2 pages
100 JavaScript Questions
No ratings yet
100 JavaScript Questions
52 pages
WTL Feb - 2023
No ratings yet
WTL Feb - 2023
1 page