How to Add React to Your Website
Translated by
ScribdTranslationsHow to Add React to Your Website
Translated by
ScribdTranslationsREACT
INTRODUCTION
React is a JavaScript library that was created to become the solution for frontend developers and mobile apps based on
[Link] is a declarative library based on components.
It is stated that React allows for easy development of User Interfaces (UI), making the code more readable and easier.
to debug, design interfaces for every state of the application so that with every state change in React
it will only update the parts of the UI that depend on such data.
Components are similar to HTML tags; they can be created as single components or composed with a tree structure.
for complex UIs. The interactions and logic for the components are implemented in JavaScript and this allows us
easily pass and access complex data structures at various points of the application without having to save
information about the DOM.
HOW TO ADD REACT TO A WEBSITE
To add a React component to an existing HTML page, there will be no installation requirements.
Step 1: Add a DOM Container to the HTML (root)
First of all, you need to add an empty <div> tag to the HTML page to indicate the point where it will be displayed.
something with React.
content
And you need to assign a unique attribute to this <div>. This will allow you to find it with JavaScript code and
to display a React component within it.
You can place a <div> 'container' anywhere within the <body> tag and insert all DOM containers.
independent you need on a page
Step 2: Add the Script Tags
Next, you need to add three <script> tags to the HTML page, just before the closing </body> tag:
Load React.
<script src="[Link] crossorigin></script>
The provided text is not translatable as it appears to be a code snippet.
Load our React component.
<scriptsrc="[Link]"></script>
</body>
The first two tags load React. The third one loads the component code.
The versions above are intended only for development environments and are not suitable for production environments.
Minified and optimized versions of React production are:
Invalid URL format.
<script crossorigin src="htps://[Link]/react-dom@16/umd/[Link]"></script>
Check that the CDN you are using has set the HTTP header Access-Control-Allow-Origin: *:
Step 3: Create a React Component
Create a Javascript file that defines a React component and inserts it into the HTML via the id of the div.
CREATE A NEW REACT PROJECT
When it is time to start a new React project and as the application grows, the need for
a more integrated tool. There are different recommended JavaScript toolchains for developing applications.
complexes to obtain all the advantages of React. The toolchains in React help to compile like:
Use third-party libraries imported from npm.
Immediately identify common errors.
Visualize in real time the effect of changes to JavaScript and CSS code during development.
Optimize the output for production.
Toolchains do not need configuration to be used.
React recommends these solutions:
If you are learning React by creating a new applicationsingle-pageuseCreatetthe ReactApp.
If you are creating a server-side rendered site with [Link], [Link].
If you are creating a site oriented towards static content, useGoteveryone.
If you are creating a component library by integrating an existing codebase,
to useMore Flexible Toolchains.
Create ReactApp
Create React AppIt is a comfortable environment to learn React, and it is the best way to start building.
new applicationsingle-pagein React.
It sets up the development environment to be able to use the latest features of JavaScript, provides
an excellent development experience and optimize the application for production.
I request the installation ofNode >= 8.10 and npm >= 5.6.
To create a project, run:
npx create-react-app mia-app
cdmia-app
npm start
a package executorincluded in npm.
Create React App does not handle backend logic or databases; it only creates a build chain for the frontend, so
it can be used with any backend.
When it needs to be released in production, run the command
npm run build
An optimized build of the application will be created in the build folder.
[Link]
[Link] is a popular and lightweight framework for static and server-rendered applications built with
React. Includes solutions for routing and the application of styles requires the use [Link] server environment.
Gatsby
Gatsbyit is the best way to create static sites with React, it allows you to use React components, but its output is
completely made up of pre-rendered HTML and CSS code, in order to ensure fast loading times.
More Flexible Toolchains
The following toolchains offer more choice and flexibility, recommended for more experienced users:
Newtrhinoinclude a preset for theReact applicationsand for thecomponenttReact.
Nxallows the development of full-stack monorepo, with integrated support for React, [Link],Express, and more.
Parcelit is a fast application builder with no configurations thatworks with React.
Razzleserver-side rendering framework that requires no configurations, offers more flexibility than
[Link].
PROJECT FILE STRUCTURE WITH CREATE-REACT-APP
Once the project is created with create-react-app, files and folders are created.
The file [Link]
The project folder includes a set of already installed packages, belonging [Link], contained within the
directorynode_modules.
A part of the packages are necessary for the application's execution so that it can function.
There are also other packages that provide support tools for code verification, starting a server.
Web for debugging, executing automated tests, assembling files and resources for production release
and more. They are therefore not essential at runtime, but only during development.
The file [Link]: it is a file present in applications and packages written for [Link], it contains a
objectJSONwhich summarizes the salient information of the package, such as the name (name) and the version (version), the
necessary dependencies for runtime (dependencies) and those for development only (devDependencies), plus a series of
commands that can be executed through npm, the package manager for [Link], defined in the scripts property.
I command react-scripts
create-react-app includes the package react-scripts which provides a series of ready-made scripts capable of executing various tasks.
operations from the Command Prompt.
I am learning Prompt and by moving into the project folder, it is possible to run the scripts with
npm Command.
The available commands are:
- npm start continues the transpilation of the application's source code, showing any errors. At
At the end of the process, the Web server is activated for debugging and the browser is opened to display the
home page of the application at localhost and on the default port (3000). If the browser does not
show the expected content, check for any errors in the Console sheet.
- npm build: executes the build of the project creating the corresponding directory and generating the files inside it
assembled the application, optimized for release in a production environment. The bundling tools combine
they package the files necessary for the application to function, and start the minimization process for
reduce the weight of the files that the browser will have to download, maximizing performance.
- npmtest: prepares the test suite for execution. Generally, the tool remains active and listening for
re-run the tests in light of changes to the application sources.
- npm eject: irreversible command that is executed when you want to give up support from create-react-app.
command removes the dependency on the tool from the project and extracts the configuration files for Webpack, Babel and
the other tools it relies on, leaving full control in the hands of the developer.
Source file src
The project folder contains the actual source files, which constitute the 'bricks' of the application: they are
they include JavaScript files with the component code, filesCSSwith style sheets, any 'assets' (images,
icon, font, etc.
In the folder, we find the file [Link], which represents the main component of the application (root DOM) and which
it will host all components 'children' that will make up the user interface.
The component that will act as a container will be located in the file [Link], in the public folder which serves as the 'entry point'
of the application.
JSX: COMPONENTS AND ELEMENTS
JSX is a syntax that may look like HTML, but it is an extension of the JavaScript syntax that allows for creating
elements that make up the components. The components are then redirected in the DOM.
of the application. You can think of elements as descriptions of what you want to see on the screen. React
This library is used to build the DOM and keep it updated.
Therefore, the entire application has a DOM tree structure, it is recommended to create individual files in .js distnt.
component and then redirect them to the DOM ([Link]) through the [Link] file.
In React, the elements of a component must have a single parent element, for example:
<div>
Hello World
<div>
First example
In this case, it would give an error. If we want to write the previous code, returning more elements.
correctly and without inserting the second element into the parent div, or creating another div, it is possible
wrap them in <[Link]>...</[Link]> which allows returning multiple elements as
result of a methodrender() without having to create an additional DOM element to contain them.
In practice, it is possible to write component elements directly in JavaScript; in fact, JSX is optional.
and not required to use React, as it will then be converted into Javascript, but it is much more
comfortable, simple and readable. The tool Babel converts, in fact, the JSX code into JavaScript, into calls to
[Link], for example:
<h1 className="saluto">Hello, world!</h1>
is converted to:
const element = [Link](
h1
greeting
Hello, world!
);
JavaScript code in JSX
Inside JSX elements, it is possible to execute Javascript code (expressions, variables, functions, etc.) by inserting it.
in curly braces { }, for example, we include the result of a call to a JavaScript function, in a
element<h1>.
<h1> Hello, {formatName(user)} </h1>
const user = {
Giuseppe
Verdi
};
function formatName(user) {
return [Link] + ' ' + [Link];
}
[Link](element, [Link]('root'));
We see in this example that it is possible to create elements and assign them to variables;
In the element, within the braces {}, a call is made to a JavaScript function that takes the data from a
User object. And finally, the element is redirected to the DOM through the variable name.
It is possible to use JSX inside if statements, for loops, assign it to variables, use it as an argument of
a function and return it as the result of a function.
Do not add quotes around the curly braces when including a JavaScript expression in an attribute.
You should use either quotation marks (for strings) or curly braces (for expressions), but never both at the same time.
same attribute.
React DOM uses the conventioncamelCasein assigning the name to the attributes, instead of that used
Normally in HTML, modify the name of some attributes, for example, the attribute class becomesclassNamein
JSX tabindex becomestabIndex.
React components implement unmetodorender() which receives input data and returns what should be displayed.
FIRST REACT APP: Hello World
Example of a React app that creates a HelloMessage component using a class
class HelloMessage extends [Link] {
render() {
return (
<div>
<h1>Hello {[Link]}</h1>
);
}
}
[Link](<HelloMessage name="World" />, [Link]('root'));
REACT CLOCK PROJECT
A concrete example of a React application of a clock that shows the current time and demonstrates the reactivity of React:
The application is made up of 4 files:
file [Link]
<div id="root"></div>
HTML file that contains the root tag and represents the parent element of the DOM in c0u65Zzzi will be redirected to it.
the entire application is displayed.
[Link]
This file contains the Clock component
import React from 'react';
function Clock() {
const currentMilliseconds = [Link]();
const time = new Date(milliseconds);
return (
<p> {[Link]()}</p>
)
}
export default Clock;
The React library is imported, after which the Clock component is created through a function. With
[Link]() gets the current time in milliseconds, then it creates a Date object. The component returns a
element p in which it receives the object toLocaleTimeString() displays it in hours/min/seconds format. Finally it is
exported the component.
file [Link]
import React from 'react';
import Clock from './Clock';
function App() {
return (
<div className="App">
Current Time
Watch
</div>
)
}
export default App;
It is the parent component of the entire application, importing all child components, in this case only the component.
Clock and returns the structure of all components of the application.
We see that the Clock component has been imported, it can be inserted into the application through a
simple tag <Clock/>.
Component names must always start with an uppercase letter, unlike JSX.
file [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
function schedule() {
[Link](<App/>, [Link]('root'));
}
setInterval(time, 1000)
This imports React, ReactDOM, the parent component file App.
[Link](component, where to redirect it)
redirects the <App/> component to the root of the DOM in the HTML. This component shows the current time in a way
Statco, you need to refresh the page to see the updates, which is why the redirection is implemented.
within a function that is called every second with setInterval(). With each call of the function,
it will redirect the component every second and one feature of React is that with each redirect, it is
compared the DOM with the previous one and only the elements that have changed will change. In this
In this case, among all the elements, only <p></p> will change every second, the rest will not.
PASSING FROM CLASS TO FUNCTION AND VICE VERSA
Before hooks were introduced to manage state in React, the code was written with classes.
hooks has shifted from classes to functions, and it often happens to find code with classes, but the difference between
classes and functions are minimal and it is easy to switch from a class to a function and vice versa.
Given the function:
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
First React App
</div>
);
}
To convert it into a class:
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
First React App
</header>
);
}
}
Import React, { Component } from 'react';
You use the keyword class, followed by the name, and extend Component and include the entire code block in the method.
render() which is called and executed automatically by default.
COMPONENTS AND PROPS
Components allow you to divide the UI into independent reusable parts. Conceptually, the components
they are like JavaScript functions: they accept input given the name 'props' and return elements that describe
what should appear on the screen.
Props represent an object that contains the properties of a component.
Let's take the previous example of the clock, and in addition to the current local time, let's add another clock component.
which through the props shows the time 6 hours ahead.
the file [Link] becomes:
function App() {
return (
<div className="App">
Current Time
0
Clock timezone = "6"
)
}
We see that the timezone prop is passed to the component as an attribute.
file [Link] becomes:
import React from 'react';
function Clock(props) {
const nowInMilliseconds = [Link]() + [Link] * 3600 * 1000;
const time = new Date(timeMilliseconds);
return (
<p> {[Link]()}</p>
)
}
export default Watch;
The function component receives props as a parameter. The current time in milliseconds is added to the time zone.
called by props and converted to milliseconds (* 3600 * 1000).
In an untagged component, any number of props can be specified and then called in the component (which receives
as a parameter always only props) I go through [Link].
The props object is read-only, it cannot be modified.
CLASSES AND PROPS
To call and use the props properties in a class, let's take the example of the clock converted into a class:
file [Link]
import React from 'react';
classClock extends [Link] {
constructor(props) {
super(props);
}
render() {
const currentMilliseconds = [Link]() + [Link] * 3600 * 1000;
const time = new Date(timeMilliseconds);
return (
{[Link]()}
)
}
}
export default Watch;
We can extend the class either with Component, importing it in react, or simply with
[Link].
To call the props in the class: the constructor() method is defined before the render() method, and in it,
passaprops, which is then defined in the method super().
To use the props in the class (in the render() method), you refer to them with:
[Link]
THE STATE OF THE COMPONENTS
For now, to update the UI, we call [Link]() to change the rendered output.
The state is an object where the values belonging to the component are stored, and every time that
the state changes the component re-renders (render() is called automatically).
The state is similar to props, but it is private and completely controlled by the component.
To manage the state, it is necessary for components of this class to encapsulate it within the component.
The state is defined with the keyword state and is initialized in the constructor() of the class:
constructor() {
super();
[Link] = { ... };
}
Let’s take the example of the Clock again, a fundamental requirement is missing: that the Clock component is set.
It updates its UI every second internally. And then have:
[Link](<Clock/>, [Link]('root'));
To implement this, we need to add a "state" to the Clock component, which becomes:
import React from 'react';
class Watch extends [Link] {
constructor(props) {
super(props);
[Link] = {
new Date()
}
}
render() {
const oraMilliseconds = [Link]() + [Link] * 3600 * 1000;
const time = new Date(timeMilliseconds);
return (
<p> {[Link]()}</p>
)
}
}
export default Watch;
The getTime() method is a method of the Date object, similar to now(), which returns the current time in milliseconds.
This class is redirected with
[Link](<App/>, [Link]('root'));
so for now it returns the time statically (the seconds do not pass).
LIFECYCLE OF CLASS COMPONENTS
Each React component is characterized by a Lifecycle in which we can distinguish three phases:
Initialization of the component (Mounting)
Component update (render) through setState() or receiving new Props (Updating)
Removal of the component (Unmounting)
A component, in its lifecycle, executes certain methods in order. These methods are intended to manage the cycle.
of the life of a React component and start with will when preceding an event and did when following a
event.
We have access to these methods that we can use to perform certain actions when a component is
created, updated or destroyed or, even, decide if a component needs to be modified following the
variation of at least one of the properties contained in its State object or upon receiving new Props.
Initialization of a component (MOUNTING)
The constructor is the first method that is called for correct initialization, values will be assigned to
default all props defined through the defaultProps object and therefore the state object will be initialized.
The second method to be invoked is componentWillMount() which is called before the component
come redirected (render method).
React recommends using the constructor instead of this method for any initialization.
render() is the only required method when you want to define a component. It must return at least one React.
Element or null or false, if we do not want to display anything on the screen for that component. It must be a
pure function, it must not directly modify the object state.
- ComponentDidMount() is the method that is invoked after the render() has been executed. This is the method to use for
manipulating the DOM or to retrieve any data from a server.
Component update (UPDATING)
Update of the State object
When the update of the State object is performed, a series of methods are called in sequence.
The first is shouldComponentUpdate() which receives the arguments nextProps and nextState.
represent the next value of the objectPropse of the objectStatee and return a boolean value. If false, the
subsequent methods will not be invoked, by default returning true, allowing the component to be updated
to each modification of objectState and Props. For this reason, it can be used to determine if the component should
to be updated with the next values of PropseState. Within this method, it is possible to compare the values
current objectState and Props with those of nextState and nextProps, thus allowing to decide whether to perform
the update of the component.
-If shouldComponentUpdate() returns true, componentWillUpdate() will be invoked. In this method, it is not
consent to modify the object State through [Link](), can be used to prepare the component
before the update of the State object or the Props object takes place.
After the render() method, componentDidUpdate() is invoked which can be used to fetch updated data.
from a server or to operate on the DOM.
Receiving new Props
Even in the case where a component receives new Props, almost the same methods will be invoked in the case
of the object State.
In this case, we have an additional method: ComponentWillReceiveProps(), which is not invoked during
initialization of a component, but subsequently, at the moment when new Props are passed to a
component. It can be used to update and modify the State object within a component if the
The new Props received are different from the current Props object's properties.
Destruction of a component (UNMOUNTING)
During the disassembly phase of a component, the only method componentWillUnmount() will be invoked.
to be used for operations such as invalidating events started in the componentDidMount() function and others
maintenance operations that prevent memory leaks.
ADD LIFECYCLE METHODS TO A CLASS
In our example, we wantset atmyevery time Clock is rendered in the DOM for the first time
(mounting). We also wantdelete thetseaevery time the DOM produced by the Clock is removed
(unmounting).
The method componentDidMount() is executed after the component's output has been rendered to the DOM. It is
a good point to set up a timer and we implement a method called updateTemp which will be invoked
from the Clock component every second:
componentDidMount() {
[Link] = setInterval([Link], 1000);
}
The method updateTime will be:
updateTime = () => {
[Link]({
time : new Date()
});
}
To perform an Update of the state, use the method setState() which receives the properties of the state that need to be updated.
updated. In this case we have the property time, but if there had been others in the object [Link] these
would not be taken into consideration.
setState() compares the properties of the object it receives with those in [Link], and if they have been modified,
it overwrites it. In our case, the property 'time' is simply redefined with a newer Date()
setState() compares with the one in [Link] and overwrites it.
In this way, the clock rings every second.
Let's recap what happens and the order in which the methods are invoked:
1 When <Clock/> is passed to [Link](), React invokes the constructor of the component that
initialize [Link] with an object that includes the current time. Then this state is updated.
2 React invokes the render() method of the Clock component and learns what should be displayed on the
screen. React takes care of updating the DOM to match the render output.
3 When the output of the rendering of Clock is inserted into the DOM, React calls the method
componentDidMount(). Inside it, a timer is set that calls aggiornaTempo once a second.
4 Every second, within it, the Clock component implements a UI update
invoking setState() with an object that contains the new current hour. With the call to setState(), React is
informed of the fact that the state has changed and calls the method render() again to know what needs to be done
shown on the screen. This time, [Link] method render() will have a different value and the output of the
rendering will include the updated time. React updates the DOM accordingly.
If the Clock component were to be removed from the DOM (UNMOUNTED), React would invoke the method
componentWillUnmount() is where we need to cancel the timer to free up the operations of the
component that has been removed in the DOM:
componentWillUnmount() {
clearInterval([Link]);
}
USE OF PROPS AND STATE
In summary, we can say that:
lostate: it is a set of data modified that leads to an update of the component
same.
Props: constitute immutable values for which no alteration is foreseen, useful for
configure the component or to set default values for the state.
EVENT MANAGEMENT
EventReact are declared like in HTML, with the difference that they must have a syntax:
{[Link]}
Let's take the example of the Clock and add a button that stops and restarts the time.
We need to manage the state of the component, and in it we initialize a property start:true:
[Link] = {
new Date()
start: true
}
Then we insert a button tag in the return of render():
Stop
To manage this button, you need to insert an event that calls a function:
<button onClick={[Link]}>Stop</button>
So far we have implemented the clock so that once the component is mounted in the DOM, it starts
the interval every second in componentDidMount() and we dismantle it in componentWillUnmount().
In this case, it must be managed with the event and the function that calls if:
- the clock is stopped, it needs to be started again;
- The clock is NOT stopped, it needs to be stopped by taking it apart.
Let's create a method start(), using setInterval(), and call [Link]() in componentDidMount().
Let's create a method stop(), with clearInterval(), and call [Link]() in componentWillUnmount().
When defining a class component, it is common to use a class method as an event handler:
gestTime() {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link] contrary state
})
}
setState() receives a function, which takes the previous state as a parameter and returns the opposite state. First
Verify that if state is start, call the stop() method to stop the clock; otherwise call the start() method to start it.
restart the clock.
binding
The previous method, however, in this way gives ERROR, as it is not possible to read setState(). This is because
in JavaScript, class methods are notassociateby default. In the gestTime method, 'this' belongs to the method
same, but it does not refer to the class, so it is necessary to do the binding, that is, to associate the method with the class.
The binding goes at constructor() with:
[Link] = [Link](this)
in our case:
[Link] = [Link](this);
but if we have many methods, we need to write this for each method in the constructor(). Another equivalent way
it is in declaring the method as an arrow function:
() => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
This is because arrow functions do not implement this, so in this case this will refer to the class.
If we want a dynamic button that changes based on the state:
START
The Watch class will be at the end:
import React from 'react';
class Clock extends [Link] {
constructor(props) {
super(props);
[Link] = {
time: new Date(),
start: true
}
}
render() {
const oraMilliseconds = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMilliseconds);
return (
In {[Link]} {[Link]()}
START
)
}
() => {
[Link]({
new Date()
});
}
() => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
start(){
[Link] = setInterval([Link], 1000);
}
stop(){
clearInterval([Link]);
}
componentDidMount() {
[Link]();
}
componentWillUnmount() {
[Link]();
}
export default Watch;
ARRAY OF ELEMENTS
Given the example of [Link]:
. . .
<Orologio paese = 'Italia' fusoorario = '0'/>
<Orologio paese = 'Usa' fusoorario = '-6'/>
. . .
we see that it contains only two elements <Clock>, but it can happen that there are many elements in a component
of the same type and for this reason they can manage arrays of elements and be implemented dynamically.
In the class or outside of it, we declare a const array variable and in it we insert as many items as
they are the elements that will contain the props of the elements. For our example:
const clocks = [
{
Italy
fusoorario: 0
},
{
USA
-6
}
]
Now to take the data from the array and dynamically implement the elements <Clock>, let's create in the component
class a method that manages it and will return as many element<Orologio> as there are element objects.
getWatches()
return [Link]((clock) => {
return <Clock country = {[Link]} timeZone = {[Link]}/>
})
}
We use the map() method that executes a function on each element that it receives from the array that calls it (clocks).
Finally, we call the method at the point where the elements must be listed, with:
[Link]()
In this way, the method getOrologi() returns an error, as for each element of an array, a react is expected.
a unique key value. Like an ID that React uses to distinguish elements, so we can either add an ID value
unique or use a value that we are sure is unique for each element. In our example, we can use the
propertycountry as id:
getWatches()
return [Link]((clock) => {
return <Orologiokey = {[Link]} country = {[Link]} timezone = {[Link]}/>
})
}
The [Link] file will ultimately be:
import React from 'react';
import Clock from './Clock';
const clocks = [
{
Italy
fusoorario: 0
},
{
USA
fusoorario: -6
}
]
class App extends [Link] {
getWatches(){
return [Link]((clock) => {
return <Clock key = {[Link]} country = {[Link]} timezone = {[Link]}/>
})
}
render() {
return (
<div className="App">
Current Time
[Link]()
)
}
}
export default App;
REACT ROUTER
ReactRouter is a library that allows you to create React applications with multiple pages where the transition from one
the page and the other happens dynamically through Javascript, without having to reload the page each time.
In React, the Router is nothing more than a component that routes other components.
npm install --save react-router-dom
In the file [Link] we import two components: BrowserRouter, which we rename for simplicity to Router and Route.
import {BrowserRouter as Router, Route} from 'react-router-dom';
We wrap the entire component with the <Router> element and a series of <Route> elements enclosed in a <div>.
The <Route> elements have an attribute path that indicates for which URL a certain component should be displayed.
<Router>
<Route exact path="/" component={Home} />
<Route strict path="/team/" render={() => <h1>Team</h1>} />
</Router>
In Pratca Route read the URL and based on it redirect the component.
In the first <Route> element we used the exact property to indicate that the component should be displayed.
Home only if the value of the attribute path is equal to the value of the property [Link]. If we did not have
React Router would have shown the Home component even for the path "/team".
In the second <Route> element, we instead used the 'strict' attribute which will ensure that there is a match only if
[Link] is exactly equal to "/team/" meaning it only matches if the final slash is present.
<Route> can also receive other attributes: component, render, children. In all three cases, they will be passed to the
Component or to the functions (render and children) the properties history, location, and match which are objects.
The property 'componentspecifies' a component that we want to be displayed in case there is a match.
( component that must be displayed for a certain value of [Link]).
Instead, we can use the propenders if we want a certain function to be called.
The prop children also receives a function that will always be executed.
The components <Link> and <NavLink>
Let's define the routes with Route, and see how to add links within the application to navigate from one page to another.
In other words, you need to refresh the browser; to do this, instead of the <a href=""> tags (which make calls
To the server, by reloading the page, of the HTML, we use two components, Link and NavLink.
The Link component accepts two attributes: which can be a string or an object and replace. To understand how
this one works, we must consider that React Router keeps the page history in memory
visualized. Let's imagine the history as a stack, each time a page is visited, a new one is added
element to the stack. If the attribute 'replace' of the Link component is equal to true, the last element is replaced.
instead of adding a new one.
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class Team extends Component {
render() {
return (
<div>
Team
<Link to="/season">Season 2017</Link>
);
}
}
export default Team;
Inside the Team component, we insert a Link that will lead to the address localhost:3000/stagione and will not be
reload the browser page.
NavLink is a particular version of Link. It can receive properties like activeClassName and activeStyle.
activeClassName="className" gives a style when a link is active.
With ConactveStyle we can pass an object through which we can specify the style that will be applied.
to the NavLink element when the current URL is equal to the value of the 'to' attribute, that is, when [Link] is
equal to the path specified in the 'to' attribute.
import React from 'react';
import {NavLink} from 'react-router-dom';
const Nav = () => (
<nav>
Home Page
<NavLink activeClassName="current" to="/team/">Team</NavLink>
Season
</nav>
);
export default Nav;
REDUX
React is a view library, and it is not React's job to specifically manage the state.
Redux is "a container of predictable state for JavaScript applications". In practice, it is an architecture for
stone of the state through clear and well-defined steps. Redux can be connected with any library
JavaScript, and not just React. Redux allows separating the application state from React.
STATUS OF AN APPLICATION
The state is the set of internal conditions or information at a specific moment that determines the outcome of
interactions with the outside. The application has an initial state, and any user interaction triggers
an action that updates the state. When the state is updated, the page is displayed.
Storing application data in a component's state is fine when you have
a basic React application with a few components, but most real applications will have many more
characteristics and components. When the number of levels in the component hierarchy increases, the management of the
state becomes problematic and that is why Redux is used.
Often an application needs to manage:
Data coming from the server and stored in a local cache;
generated by the application itself that must be sent to the server;
dates must remain local to represent, for example, the current situation
of the user interface or the preferences expressed by the user.
The management of this data is complex due to the quantity and the fact that this data can vary for different reasons.
if we then consider that these changes can occur asynchronously, it becomes even more complex and is
easy to lose control over the evolution of the state.
PURE FUNCTION
A pure function is a normal function with two characteristics:
1 Given a set of inputs, the function must always return the same output.
2 Does not produce side effects.
For example, a function is one that returns the sum of two numbers.
Pure functions produce stable output and are deterministic. A function becomes impure when it performs
something different from calculating its return value.
THE THREE PRINCIPLES
The complexity in managing the state of an application lies in mutability and asynchronicity. The solution of
Redux aims to remove these two aspects, based on three fundamental principles:
1 there is a single source of truth
the state of the entire application is stored in a single object
2 the state is read-only
it is not possible to directly modify the information stored in the application's state; only
through explicit actions
3 State changes must be made with pure functions.
the current state is replaced by a new state generated by functions solely based on a
action and to the previous state
The application of these principles defines the architecture of Redux and the constraints that an application must adhere to.
It intends to manage the state according to this approach.
ADVANTAGES
With Redux, the variations in an application's state are analyzable and reproducible, making it easier.
understand how a certain situation was reached
Redux forces you to organize the code following a specific pattern, which indirectly defines one
standard coding.
It is possible to define an initial state and start the application from that state, in this way to facilitate the
rendering of JavaScript applications from the server
It is possible to track state transitions both for debugging and for implementing actions.
INSTALLATION
If we use [Link], we can install Redux simply with the following command:
npm install --save redux
who downloads the npm package of Redux makes it available to be imported into the application.
If we do not use a [Link] development environment, we can always download the [Link] of
distdistributionfrom the npm package and inserting a reference within the HTML page of the application
<script src="[Link]"></script>
In this case, Redux will be accessible as a global variable [Link].
CONTAINER COMPONENTS AND PRESENTATION COMPONENTS
It is useful to divide the architecture of components into two categories for React applications: container components
(smart) and presentation component (dumb).
The container component deals with how things work, while the presentation components take care of
of how things appear.
Smart components manage the state and then pass it to dumb components. They take care of performing the
API calls, retrieve data from the data source, process the data and then set the status.
Components receive props and return the representation of the user interface.
When you are about to write a new component, it is not always clear where to place the state. You might leave
that the state is part of a container that is an immediate parent of the presentation component. Better
again, you can move the state higher in the hierarchy so that the state is accessible to components
multiple presentation.
When the app grows, the state is scattered everywhere. When a component needs to access the state to which
does not have immediate access, try to raise the state to the nearest ancestor component.
It's a good idea to let a component at the top manage the global state and then pass it down.
This goes downwards. All other components can subscribe to the props they need and ignore the rest.
React components should be dumb so that they can focus only on the view side of things.
GENERAL ARCHITECTURE OF REDUX
the architectural schema proposed by the Redux model
So the general flow to change the current state of an application follows these steps:
1 an Action is identified, possibly generated through an Action creator
2 the action is sent to the store via a dispatch
3 Inside the store, a reducer replaces the current state with the potential new state identified.
based on the analysis of Acton
Store
The store is a large JavaScript object that represents the current state of the application, and every time the state
it updates, the view is refreshed.
The entire state of the application is inside the store object.
The store has three methods to communicate with the rest of the architecture. They are:
[Link]() to access the current state tree of the application.
[Link](action) to trigger a state change based on an action.
[Link](listener) to listen for any changes in the state. It will be called every time that
an action is sent.
Create a store.
Redux has a createStore method to create a new store.
Receives as parameters: a reducer and optionally the initial state of the store.
[Link]
import { createStore } from "redux";
const initialState = 0 //initialState (optional).
const store = createStore(reducer, initialState);
Now we will listen for any changes in the store and then log the current state of the store with [Link]().
[Link](() => {
[Link]("State has changed" + [Link]());
})
To update the Redux store, actions are used.
Acton/Acton Creators
Leacton are simple JavaScript objects that send information from the application to the store. If you have a
simple counter with an increment button, pressing it will result in an action that is triggered, which resembles
to this:
{
INCREMENT
1
}
The state of the store only changes in response to an action. Each action must have a type property.
describe what the action intends to do.
It is recommended to keep the action small as it represents the minimum amount of information necessary for
transform the state of the application.
In the previous example, the property type is set to 'INCREMENT', and an additional property is included.
payload that could be renamed to something more meaningful.
To send the action to the store, use [Link](action):
[Link]({type: "INCREMENT", payload: 1});
During the writing of Redux code, actions are typically not used directly, but will be called the
functions that return the actions called action creator.
The action creator of the previous increment action will be:
const incrementCount = (count) => {
return {
INCREMENT
count
}
}
So, to update the counter state, you need to send the incrementCount action like this:
[Link](incrementCount(1));
Now, we need reducers to convert the information provided by the action and transform the store's state.
Reducers
The reducer uses the information from the actions to effectively update the state.
A reducer should be a pure function. Given a set of inputs, it must always return the same output.
Besides that, it shouldn't do anything else.
the reducer for our meter.
const reducer = (state = initialState, action) => {
switch ([Link]) {
case "INCREMENT":
return state + [Link]
default
return state
}
}
The reducer receives two arguments: state and action, and returns a new state.
(previousState, action) => newState
The state accepts a predefined value, initialState, which will be used only if the value of the state is
undefined. Otherwise, the effective value of the state will be retained.
We use the switch to select the right action.
Let's add a case for DECREMENT:
const reducer = (state = initialState, action) => {
switch ([Link]) {
case "INCREMENT":
return state + [Link]
case "DECREMENT":
return state - [Link]
default
return state
}
}
Here is the action creator
const decrementCount = (count) => {
response
DECREMENT
count
}
}
Finally, it is sent to the store.
[Link](incrementCount(4)); //4
[Link](decrementCount(2)); //2
REDUX AND REACT
We have seen that with Redux we send actions and retrieve the new state using [Link]() and
[Link]().
Now we will learn how to connect a Redux store with React, using the react-redux library we will see
come
1 organize the container components and the presentation components
How to connect React and Redux using connect()
How to send actions using mapDispatchToProps
4 how to recover the state using mapStateToProps
1) Smart components and dumb components
A concept already discussed before, to divide the components into two distinct folders, one
denominating containers the other components. The advantage of this approach is that the logic is separated
from the view.
The smart components handle the logical part, passing the necessary data to execute the rendering of the
dumb components as props.
As a first step, in a project, we can start creating all the graphical part of React, namely the
dumb components and subsequently, from these, create smart components to manage their logic
2) The react-redux library
To connect React to Redux, it will be necessary to install an additional library called react-redux.
npm install --save react-redux
The library only exports two APIs that you need to remember, a component <Provider/> and a function of
higher order connect()
3) The Provider component
The entire application must be able to access the store. Redux needs to make the store accessible.
give the entire tree of the react component starting from the main component. The Provider allows
passing data from top to bottom by adding state to all components.
import { Provider } from 'react-redux'
[Link](
<Provider store={store}>
<App />
</Provider>,
[Link]('root')
)
We wrap the provider around the app component so that the descendants of the component have access.
to you data.
4) The connect() method
The store is made available to the application, we need to connect React with the store. The only
The way to communicate with the store is by sending actions and retrieving the state.
connect() allows you to connect React with the store, and with the help of two methods:
mapDispatchToProps, mapStateToProps, to map and pass only the dispatch and the store part
interested in the dumb React component as props.
const mapStateToProps = state => { const mapDispatchToProps = dispatch => {
return { return {
prop : [Link] () => dispatch(actionCreator())
} }
} }
export default connect(
mapStateToProps
mapDispatchToProps
)ComponentDump)
mapStateToProps and mapDispatchToProps both return an object and the key of this object
becomes a prop of the connected component.
- MapStateToProps: connects a part of the Redux state to the props of a component
React. In this way, a connected React component will have access to the exact part of the store.
that he needs.
- mapDispatchToProps does something similar, but for actions: it connects Redux actions to props.
React. In this way, the connected React component will be able to send messages to the
store.
So it is possible to use connect() for:
1 subscribe to the store and map its state to the prop
to send actions and map dispatch callbacks to props
Once the application is connected to Redux, you can use [Link] to access the current state.
and also to send the actions.
EXAMPLE REACT-REDUX: ADDRESS BOOK
Now let's see a concrete example of a Phonebook application with the following features:
. view all contacts
. add a new contact
. remove contact
1) Directory structure
Created a new project with create react app installed Redux, Redux has no idea how to structure the
application, so the next step is to add some empty directories to organize Redux:
container and dumb components of React, which do not care whether Redux is being used or not.
containers: containers and smart components of React that send actions to the Redux store. The association between
redux and react will take place here.
actons: it will contain the acton creators.
reducers: each reducer has a single file, this directory will contain all the logic of the reducers.
it will contain the logic for state initialization and store configuration.
This structure model is called Railse and would be suitable for small to medium applications. When the app grows, it can
It would be more convenient to consider the Domain model, where each feature will have its own directory, and everything
what concerns this functionality will be within it.
2) Create the view part with the dump components
We can start a project by creating the React part of the view with the component dump. We can use
Bootstrap to speed up work.
In this project, we create an application with a menu with two items that, with React Router, will display without
reload, the pages of the contact list including the form to add a new contact.
3) Initialization of the store
It is a good practice to sketch immediately, even on paper and pen, a diagram of the state, in a single object, with the
properties he needs.
Then in the Store directory, we create the file [Link] and initialize the store:
const initialState = {
contactList: [],
newContact: {
name
email
tel
}
}
export default initialState;
The store has two properties: [Link] is an array of contacts, while newContact is a
item that will temporarily contain the contact data to be added from the contact form.
4) Creation of the store
To create the store, in the [Link] file, we import createStore from redux:
import { createStore } from 'redux'
this creates the store that will contain the state tree.
Let's create the store with:
const store = createStore(rootReducer, initialState);
We note that it receives two parameters: the rootReducer and the initial state initialState (optional)
We import the initialState created previously.
Reducers multiply combineReducers()
It is important to remember that Reducer functions do not modify the State object, they receive the State object as input.
They return a new object State and that a reducer must always have a predefined value for its
state, and it must always return something (default; return state).
It is always recommended to create a Reducer function for each piece of the State object and then combine them.
functions in a single Reducer, divide them, instead of one single, to improve the readability of the code.
Redux, for this reason, has a method calledcombineReducerswhich allows creating multiple reducers and then merging them
in a single function (rootReducer).
It receives as an argument the object having as properties the reducers that we will create:
export default combineReducers(
{
reducer
}
);
The reducers created must become the properties of combineReducers and for this they must be imported.
insert with the same name as the property of the piece of state concerning
5) Creation of rootReducer
This will be the main reducer that will combine all the reducers of the application into a single reducer.
In the reducers directory, we create a file [Link], with an empty combineReducers that will join the reducers that
we will create later.
import { combineReducers } from 'redux'
export default combineReducers(
{
}
)
And once created, we import it into the [Link] file to pass it to createStore.
6) Make the global store with Provider
The store is created, it must be available and accessible from the entire application, in all files. To do this and make it
global store
We import the Provider component from React Redux and wrap the App component with it, passing the store to it.
import { Provider } from 'react-redux'
[Link](
<Provider store={store}>
<App />
</Provider>,
[Link]('root')
)
7) Manage the logic and the operation
At this point, let's analyze the application to manage the logic and functionality by seeing what
Component dumps require access to the store, through componentsmart, and creating the appropriate ones.
actions and reducers.
Display the contacts of the store
To display the contacts in the store, we create a container called contactListSmart where with
mapStateToProps maps the part of state contactsList with the same name contactsList
const mapStateToProps = (state) => {
return {
[Link]
}
}
after which with
export default connect(mapStateToProps, null)(ContactsList)
we pass contactsLists as props to the dumb ContactList component (imported).
The container must be exported, as it will then be imported and used in [Link] instead of the
dumb component ContactsList, to be displayed.
In this way, the ContactsList component will receive as props only the part of the state that it needs.
Add new contact
created the component with the form for adding the new contact,
localStorage and sessionStorage: SAVE DATA IN THE BROWSER
An element that allows us to save relevant information for browsing the site within the browser is
cookies. But the biggest problem with cookies is that, in order to remember the saved information, the browser must
exchanging status messages with the server on every new page the user visits; this feature, especially
in these places it is possible to book trips or accommodations, it translates into a great waste of resources that could have been
used to speed up the response time of websites.
Thanks to the advent of HTML5, new objects have been introduced that allow us to save data passed by the user.
within their own browsers: sessionStorage and localStorage.
Both share the same properties and functions; the differences between the two are that: sessionStorage will lose all
when the browser window will be closed.
While everything we save inside a localStorage object will be kept in the browser and
it will also withstand the computer's shutdown.
Inside this object, we can only save text strings, just like for cookies, but going to
Using localStorage or sessionStorage meets the needs, no communication with the
server since the web page will be able to query the browser directly.
Let's take a look specifically at localStorage, but it will be the same for sessionStorage.
To save a data item, use the function setItem("index", "value"):
setItem() accepts two parameters. The first will be the index and will allow you to subsequently call the value that
we have set, the second is the actual value that we want to save within the browser.
These data can then be viewed in the browser's inspect.
To recover the saved data, use the function getItem("index"):
To remove a saved item, use the function removeItem(index).
Other useful parameters for working with this type of object are:
• length - will allow you to know how many elements are contained within it, its index starts from 0 as
for the arrays;
• key( index )- entering the numeric value of the index will return the value saved in this position;
MIDDLEWARE
So far we have seen that createStore receives two parameters which are the rootReducer and the initial state. It can
receive other parameters that allow customizing or replacing the store's actions (dispatch, subscribe,
getState).
To customize the behavior of a dispatch, the middleware is used, which is precisely a function executed in between the
dispatch an action and its processing by the reducer. In practice, it intercepts the actions and takes some
decisions based on parameters: it can pass the actions to the reducer without changes or dispatch actions in turn.
We see that the action launched by [Link]() goes through a series of Middleware. To ensure that the Action
it should be sent to the next Middleware, or to the Reducer in the case of the last Middleware, the function must be invoked
next(action) that is passed by Redux to each Middleware.
In Redux, they are particularly important because they represent the point of the application where it is possible to do
asynchronous actions such as: API calls, timeout, etc.
An important characteristic, as seen in the image, is that multiple middleware can be inserted in a chain.
and execute them in order one after another.
Given a chain of middleware, when a dispatch is performed, in practice the first one is called.
middleware. Generally, a middleware will check if the action is of a specific type that interests it, similar to how
it would be a reducer. If it is of the right type, it could execute custom logic, otherwise it passes the action to
next middleware in the stack.
Unlike a reducer, a middleware can have side effects internally, including pauses and other logic.
asynchronous.
Use middleware
Define the middleware function
To use middleware in Redux, you first need to define the middleware function, which must have a specific
subject.
// Middleware defined using arrow functions
const mioMiddleware = store => next => action => {
// body of the Middleware function
}
// or equivalently
function mioMiddleware(store) {
return function (next) {
return function (action) {
// body of the Middleware function
};
};
};
Within the middleware, we have access to the Acton launched by [Link](acton). We can use the function
next(action) to let Acton flow through the middleware chain, will invoke the next middleware, if not
when the function is invoked, the action is not passed to the next middleware.
Within each middleware, we also have access to the methods [Link]() to retrieve the State object.
current and [Link]() which is the original dispatch() function. By using this function, we will be able to do
to revisit all the middleware chain already traversed before the current middleware.
2) Invoke the applyMiddleware() function
After defining one or more middleware, we invoke the function applyMiddleware(...middleware) to which we will pass
as a topic the created middleware.
import { applyMiddleware } from 'redux';
We will pass the applyMiddleware function to createStore.
const store = createStore(reducer, initialState, applyMiddleware(...middleware));
In summary, the parameters react respectively to the current store and the action we are taking.
carried out the dispatching. The next parameter represents the next middleware in the pipeline before arriving
alreducer. In practice, within a middleware we can leverage the store and the current action to perform
specific processing and then pass the ball to the eventual next middleware.
Let's see a concrete case of how a middleware can be implemented to write the action to the console.
intercepted and the new status of the application:
const logger = store => next => action => {
Current action:
let result = next(action)
[Link]('Next state: ', [Link]())
return result
}
In this specific case we await the execution of any subsequent middleware before writing to the console the
new state. If we didn't do this we would get the current state, instead of the next one.
Once the middleware is defined, we make it available to Redux with
import { createStore, applyMiddleware } from 'redux'
let store = createStore(rootReducer, initialState, applyMiddleware(logger));
This will ensure that every state transition is tracked in the browser console.
If we have more middleware to execute before the reducer, we can pass them as parameters of the
applyMiddleware function():
let middleware= applyMiddleware(middl1, middl2, middl3);
The execution order of the middleware will follow the order in which the functions are passed as parameters.
adapplyMiddleware().
ASYNCHRONOUS CALLS WITH REACT REDUX
Now let's see how to make asynchronous calls to a server with React Redux.
We can simulate a local server with json-server, downloadable from Npm, with the json data to serve. Once
installed, you need to create the json file to serve ([Link]) launch the server with:
json-server --watch [Link] --port 3005 --nc
Now we need to connect our app to read data from this server.
Until now, we have seen synchronous actions where the payload object with the data went into the store, but in this case the data
they will be found on the server and therefore an asynchronous call to the server must be made to retrieve the data.
To manage asynchronous calls, React uses middleware, and to facilitate the work there are several packages including
redux-promise-middleware. This allows you to manage asynchronous action creators, with the difference that, in this
in this case, the payload receives a promise:
const asyncAction = () => ({
PROMISE
payload: new Promise(…)
})
Given an action with an asynchronous payload, the middleware transforms the action into a pending action or an action
fulfilled/rejected, which represents the state of the asynchronous action.
After downloading the package, it needs to be imported in the index and passed to the store:
import promise from 'redux-promise-middleware'
const store = createStore(rootReducer, initialState, applyMiddleware(promise));
To communicate with the server, we use fetch(), or other packages, which allow for managing calls.
asynchronous based on promises
REACT HOOKS
They were introduced with React 16.8 and basically they are functions that allow you to insert a state into components.
tpo functions, simpler than those of the class type.
useState()
To add a state to a functional component, use useState which must first be imported from
React. useState is a function that is defined with:
const [variable, setVariable] = useState(initialValue);
that is,this returns a pair of values: the value of the current state and a function that allows to
update it (dispatch).
It is similar to [Link] of a class.
The only parameter of useState is its initial state.
useEffect()
Tells React that the component needs to do something after rendering. React will remember the passed function and the
he will call later after executing the updates, at each modification.
It performs the same tasks componentDidMount, componentDidUpdate, and componentWillUnmount.