Introducing React and UI

Design
What is React?
• React is a JavaScript library for building composable user interfaces.
• Build a user interface by composing items called components.
• A component is an element that contributes to building a user
interface.
• It could be a textbox, a button, a whole form, a group of other
components, and so on.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
React. Andrea Chiarelli.Copyright @2018 Packt Publishing
How to Set up a React-Based
Application
• Setting up a modern JavaScript development environment requires the
installation and configuration of a few tools:
• A transpiler, a syntax checker, a module bundler, a task runner, and so
on.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Installing create-react-app
• We can use create-react-app
- a command-line interface (CLI)
- It is based on Node.js
- Provides commands to set up and modify a React application

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Installing create-react-app
• In order to install create-react-app
- you need Node.js installed on your machine.
• You can install the CLI by typing the following command in a console
window:
- npm install -g create-react-app
• After installation, you can verify whether it is properly installed by
typing the following command:
- create-react-app --version
• If all is OK, the installed version of create-react-app will be shown.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Creating Your First React Application
• We can do this by typing the following command in a console
window:
• create-react-app hello-react
• This command tells create-react-app to set up all of the prerequisites
for a React-based application named hello-react.
• The creation process may take several minutes, since it has to
download the npm packages needed for the project.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Class Activity
• Scenario
• We need to set up a development environment in order to create a
product catalog application built with React.
• Aim
• The aim of the activity is to start becoming familiar with create-react-
app and the content it creates.
• Steps for Completion
1. Use create-react-app to create the development environment
2. Give the name my-shop to the sample application

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Exploring the Generated Content

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Folders inside of hello-react folder
• The README document contains references to all you need to start
building a React-based application.
• The PACKAGE.JSON file contains information about the project,
such as the name, the version, and so on, and references to all the npm
packages.
• The .GITIGNORE file is a hidden file in Unix-based systems, and it
allows us to track which file(s) to ignore when using Git as a version
control system.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The Public folder
• favicon: This is the icon shown in the browser's address bar and is
used for bookmarks
• index.html: This is the HTML page containing the reference to our
React code and providing a context to React rendering
• manifest.json: This is a configuration file containing metadata
according to the Progressive Web Apps (PWA) criteria

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The src folder
• Index.js: Contains the starting point of our application
• Index.css: Stores the base styling for our application
• App.js: Contains the definition of the main component of the sample application
• App.css: Contains the styling of the App component
• Logo.svg: This is the React logo
• App.test.js: Stores the basic unit test involving the App component
• registerServiceWorker.js: Contains the code to register the service worker in order
to allow offline behavior, as per the PWA requirements

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The create-react-app Commands
• The first command we will cover is npm start.
• This command starts a development web server accepting requests at
http://localhost:3000

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Changing file content and viewing the
results
1. Open a console window.
2. Go to the hello-react folder.
3. Run npm start.
4. Launch a browser and go to http://localhost:3000
5. Launch a text editor and open the App.js file.
6. Search for the following line of code: edit <code>src/App.js</code> and save to reload
7. Replace the code mentioned in step 6 with the following line of code: Hello React !
8. Save the file.
9. Check the browser content. Now it should display the new text.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The npm test Command
• Create-react-app promotes the use of unit tests by generating a sample
unit test file.
• we can run the tests written within our application by running the
following command:
• npm test

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The npm run build Command
• When we are ready to move our application into the production
environment, we need the artifacts to publish.
• We can produce these artifacts by running the following command:
• npm run build

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
The npm run eject Command
• The last command we will cover is the eject command:
• npm run eject
• This command takes our application out of the CLI context and gives
us the power and responsibility to manage it.
• This is a one-way process.
• If we leave the create-react-app context for our application, we cannot
go back.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
How to Design a UI
• Now, we are going to see how we can design our application so that it
fits well when implemented with React.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Everything Is a Component
• The main concept introduced by React in user interface design and
implementation is the component concept.
• A user interface is an aggregate of components, and the whole React
application is an aggregate of components.
• From a design point of view, we can say that a component is a part of
the user interface, having a specific role.
• A hierarchy of components is often called a component tree.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Everything Is a Component
• Consider a form in a web page.
• It can be treated as a component, since it has a specific role: to collect
data and send it to the server.
• Also, a textbox inside the form can be considered a component.
• It has a specific role: to collect a single piece of data that will be sent
to the server.
• So, a component may contain other components.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Decompose a User Interface
• To better understand how to design a user interface and how to create
components to implement them
• We will try to decompose a well-known web user interface - the
YouTube main page:

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Decompose a User Interface
• If we consider the header, the left sidebar, and the main area, all of
these items are components of the page.
• You can see them highlighted in the following screenshot:

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Decompose a User Interface
• We can consider each video preview box in the main area as a
component.
• You can see them in the following screenshot:

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Container and
Presentational Components

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Container Components
• We can classify the components in a user interface into container and
presentational components.
• The container components are components that do not have a relevant
visual effect.
• Their main role is to group other components, that is, contain other
components.
• For example, a form is usually a container component, since its main
role is to contain other components, such as textboxes, labels, buttons,
and so on

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Presentational Components
• The presentational components are components that display data in
some graphical form.
• A textbox, a date picker, and a toolbar are examples of presentational
components.
• The distinction between container and presentational components is
very important in order to create efficient user interfaces in React.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Class Activity
• Scenario
• We need to convert the Wikipedia website's user interface (
https://en.Wikipedia.org) into React components.
• Aim
• The aim of the activity is to address the design process when
implementing React-based user interfaces.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Steps for Completion
1. Analyze the page's current structure and detect the items you can
implement as components
2. Indicate which would be container and which would be presentational
components

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Beginning React. simplify your frontend development workflow
and enhance the user experiance of your applications with with
Solution
• The home page component contains the left sidebar component
• The header component, and the main area component.
• All of these components are container components.
• The left-side component contains the logo component (presentational)
• and a list of section components (presentational).
• The header component contains a list of link components
• (presentational) to general pieces of functionality.

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Solution
• The main area component contains a list of tab components
(container) and a search component (presentational).
• The main tab component contains a banner component
(presentational),
• a topic index component (presentational),
• and a list of block components (presentational).

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with
Summary
• Established that React is a user interface library, used to implement the
View part of various MV* design patterns
• Introduced the create-react-app tool, which helps us to set up a
development environment to build React-based applications
• Explored the items composing a typical React-based application
• Analyzed the approach to designing user interfaces that best fits in the
React world

Beginning React. simplify your frontend development workflow

and enhance the user experiance of your applications with with