React: Installation

REACT
Installation
Here we will install the create-react-app tool using the
Node Package Manager (NPM). This tool is developed
by the React.js team. First is to install the Node.js.
Node.js provides a runtime environment to execute

JavaScript code from outside a browser. React uses
Node.js and NPM for the management of dependencies
and runtime.
• Download the
Node.js using the link
below:
https://nodejs.org/en/
• Download the latest

version and install.
• After the installation, check the
versions using the commands below:
node -v
npm -v
Create a new React Project
• Execute the command below to install the create-to-
react-app tool
Running the application
Type the following command to open the browser:
cd awesome-project
npm start
ITELEC4C
Web Development
Principles of Web Development
• Focus on the user
• Focus on quality
• Keep it simple
• Think long-term
• Don’t repeat yourself
• Code responsibility
• Know your field
Meiert, 2017
Basic Principles of Website Design
• Grid system
• Web-safe fonts
• Visual hierarchy
• Use of colors and images
Principles of Ethical Web Development
• Web applications should:
• work for everyone
• work everywhere
• Respect a user’s privacy and security
• Web developers should be considerate of their
peers
ITELEC4C
Introduction to ReactJS
ReactJS
• Simple, feature rich, component-based JavaScript
UI library.
• Allows developers to create reusable UI
components
• A library to create UI in a web application
Jordan Walke
Timeline
2010 • The Inception
2011 • The Birth
2012 • became the innovation that Instagram needed
2013 • The Public Release
2014 • The Expansion and Adoption
2015 • The Native Platform
2016 • The Global Acknowledgments
2017-2018 • The React tools were updated and improved
2019 • The New React DevTools
2020 • Zero-Bundle-Size React Server Components

Its architecture
• React elements
• JSX
• React component
Features
• Responsive & mobile-friendly
• Easily customized
• Gracefully handles overflow and non-
uniform content
• Lightweight (only CSS and SVG)
Benefits
• Easy to learn
• Easy to adept in modern as well as legacy
application
• Faster way to code a functionality
• Availability of large number of ready-made
component
• Large and active community
Advantages Disadvantages
• Easy to learn and use • High pace of development
• Easier to create dynamic • Poor documentation
web app • View part
• Reusable components • JSX as a barrier
• Performance enhancement
• Support of handy tools
• SEO friendly
• JS Library
• Scope for Testing
Applications
• Facebook
• Instagram
• Netflix
• Code Academy
• Reddit
ITELEC4C
React Application
Content of
the React
Application
package.json
• is the core file
representing
the project.
• react and react-dom are core react libraries used to
develop web application.
• web-vitals are general library to support
application in different browser.
• react-scripts are core react scripts used to build
and run application.
• @testing-library/jest-dom, @testing-library/react
and @testing-library/userevent are testing libary
used to test the application after developmen
public folder
• contains the core file, index.html and other web
resources
src folder
• contains the actual code of the application
• index.js - entry point of our application
• index.css - Used to styles of the entire application
• App.js - Root component of our application
• App.css - Used to style the App component
• App.test.js - Used to write unit test function for our
component
• setupTests.js - Used to setup the testing framework for
our application
• reportWebVitals.js - Generic web application startup
code to support all browsers
• logo.svg - Logo in SVG format and can be loaded into our
application using import keyword
Modify the project
• Delete the files that
are not needed
• Use the figure for
your reference
• Create components
folder under src,
then add a new File
under it and name it
Msg.js
Msg.js
index.html
index.js
• To run the program, open the terminal window and
type npm start
• Then check your browser if it is running or not

COLLEGE OF INFORMATION AND COMPUTING SCIENCES
Learning Objectives
At the end of this module, the learner will be able to:
▪ Develop understanding of the basic concepts of ReactJS
including JSX and elements.
Introducing JSX
JSX
- Syntax extension of JS.
- Describes what the UI should look like
- JSX produces React “elements”
Why JSX?
▪ React embraces the fact that rendering logic is

inherently coupled with other UI logic: how events
are handled, how the state changes over time, and
how the data is prepared for display.
▪ React doesn’t require using JSX, but most people
find it helpful as a visual aid when working with UI
inside the JavaScript code. It also allows React to
show more useful error and warning messages.
Why JSX?
Code with JSX!
Code without JSX!

Embedding Expression in JSX
You can put any valid JavaScript expression inside the curly
braces in JSX. For example, 2 + 2, user.firstName, or
formatName(user) are all valid JavaScript expressions.
Embedding Expression in JSX

In the example below, we embed the result of calling a
JavaScript function, formatName(user), into an <h1>
element.
JSX is an Expression
After compilation, JSX expressions become regular JavaScript

function calls and evaluate to JavaScript objects.
This means that you can use JSX inside of if statements and
for loops, assign it to variables, accept it as arguments, and
return it from functions:
Attributes in JSX
You may use quotes to specify string literals as attributes:
You may also use curly braces to embed a JavaScript

expression in an attribute:
Warning: Don’t put quotes around curly braces when embedding a JavaScript expression in
an attribute. You should either use quotes (for string values) OR curly braces (for
expressions), but not both in the same attribute.
Children with JSX
If a tag is empty, you may close it immediately with />, like

XML:
JSX tags may contain children:

JSX Represents Objects
Babel compiles JSX down to React.createElement() calls.

These two examples are identical:
React.createElement() performs a few checks to help you

write bug-free code but essentially it creates an object like this:
These objects are called “React elements”.
You can think of them as descriptions of what you want to see

on the screen.
React reads these objects and uses them to construct the DOM
and keep it up to date.
What is “Element”?
Elements are the smallest building blocks of React apps.
An element describes what you want to see on the screen:
Note:
One might confuse elements with a more widely known concept of
“components”. Elements are what components are “made of”.
Rendering an Element into the DOM
Open in CodePen
Updating the Rendered Elements
React elements are immutable. Once you create an element,

you can’t change its children or attributes. An element is like a
single frame in a movie: it represents the UI at a certain point in
time.
With our knowledge so far, the only way to update the UI is to

create a new element, and pass it to ReactDOM.render().
Let’s consider this example:
Open in CodePen
It calls ReactDOM.render() every second from a

setInterval() callback.
React Only Updates What’s Necessary
React DOM compares the element and

its children to the previous one, and
only applies the DOM updates
necessary to bring the DOM to the
desired state.
You can verify by inspecting the last

example with the browser tools:
– End of Module –
Reference
SimpliLearn. (n.d.). ReactJS Tutorial: A Step-by-Step Guide To Learn

React. https://www.simplilearn.com/tutorials/reactjs-tutorial
ReactJS Documentation: https://reactjs.org/docs/getting-started.html

Components and Props

Learning Objectives
▪ Develop understanding on React components and props.
Components
A component is an independent, reusable code block which

divides the UI into smaller pieces.
Components
Rather than building the whole UI under one single file, we can
and we should divide all the sections (marked with red) into
smaller independent pieces. In other words, these are
components.
React has two types of components: functional and class.

Functional Components
The simplest way to define a component is to write a

JavaScript function:
This function is a valid React component because it accepts a single

“props” (which stands for properties) object argument with data and
returns a React element. We call such components “function
components” because they are literally JavaScript functions.
Class Components
Class components are ES6 classes that return JSX. Below, you
see our same Welcome function, this time as a class
component:
Rendering a Component
When React sees an element representing a user-defined

component, it passes JSX attributes and children to this
component as a single object. We call this object “props”.
Try in CodePen
Components
So a Functional Component in React:
■ is a JavaScript/ES6 function
■ must return a React element (JSX)
■ always starts with a capital letter (naming convention)
■ takes props as a parameter if necessary
Rendering a Component
Composing Components
Components can refer to other components in their output. This lets
us use the same component abstraction for any level of detail.
Extracting Components
Comment Component
Try in CodePen
Avatar Component
Simplified Comment Component

User Info Component
Simplified Comment Component
Try in CodePen
Got Tired?
Extracting components might seem like grunt work at first, but

having a palette of reusable components pays off in larger
apps.
A good rule of thumb is that if a part of your UI is used several

times (Button, Panel, Avatar), or is complex enough on its
own (App, FeedStory, Comment), it is a good candidate to be
extracted to a separate component.
Props are read-Only
Whether you declare a component as a function or a class, it must

never modify its own props.
Pure: No attempt to change inputs; always return the same results for the same input.
Not Pure: Changes its own inputs
React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.
Reference

ReactJS Documentation: https://reactjs.org/docs/getting-started.html

Example 2: Drag and Drop

▪ Create a new project using create-react-app tool

npx create-react-app drag_drop
▪ Install react-beautiful-dnd
npm i react-beautiful-dnd --save
react-beautiful-dnd
▪ a library that allow for drag and drop interactions

within React.
▪ has great set of drag and drop primitives which
work especially well with the wildly inconsistent
html5 drag and drop feature.
▪ offers a powerful, natural and beautiful drag and
drop experience.
App.css
App.js
Components cont.
State and Lifecycle
Learning Objectives
▪ convert functions to classes.
▪ add local state to a class
▪ add lifecycle method to a class
Converting a function to a class
1. Create a class with the same name, that extends

React.Component
2. Add a single empty method to it called render( )
3. Move the body of the function int the render( )
4. Replace props with this.props in the render body
5. Delete the remaining empty function declared
Try in CodePen
Adding local state to a Class
1. Replace
this.date with
this
state.data in
the render()
method
2. Add a constructor
that assigns the
initial this.state
3. Remove the app from <cClock /> element

Try in CodePen
Add lifecycle methods to a class
1. Declare special methods

on the component class to
run some code when a
component mounts and
unmounts
Lifecycle methods
componentDidMount()
method runs after the component output has been
rendered to the DOM.
Lifecycle methods
componentWillUnmount()
is invoked immediately before a component is
unmounted and destroyed.
2. Implement the method tick( )

Try in CodePen
Using setState( )
▪ Do not modify state directly

▪ State updates may be asynchronous
▪ State updates are merge
Using setState( )
▪ Do not modify state directly

Using setState( )
▪ State updates may be asynchronous
Using setState( )
▪ State updates are merge

When you call setState(), React merges the object
you provide into the current state.
Reference

ReactJS Documentation: https://reactjs.org/docs/

Form and User Input

Learning Objectives
▪ Understand the form and user input.
▪ Create an application using forms and user input
Forms
▪ React uses forms to allow users to interact with the web
page.
▪ You add a form

with React like
any other
element
Two types of components
▪ Controlled
− React provides a special attribute, value for all input
elements, and controls the input elements.
▪ Uncontrolled
− React provides minimal support for form programming.
Controlled Components
Mutable state is typically kept in the state property

of components, and only updated with setState().
Form data is usually handled by the components.

useState Hook to keep track of each inputs value
and provide a "single source of truth" for the
entire application.
textarea
▪ uses
a value attribute
select
• React uses
a value attribute
on the
root select tag.
Handling Multiple Inputs
Add a name attribute to each element and let

the handler function choose what to do based
on the value of event.target.name.
References
▪ https://reactjs.org/docs/forms.html
▪ https://www.w3schools.com/react/react_forms.asp
▪ https://www.tutorialspoint.com/reactjs/reactjs_forms.htm
Events
Learning Objectives
▪ Discuss the importance of events.
▪ Create an application using forms and user input with
events
Events
▪ An event is an action that could be triggered as a result of the

user action or system-generated event.
▪ React has its own event handling system which is very similar to
handling events on DOM elements.
▪ The react event handling system is known as Synthetic Events.
▪ The synthetic event
− cross-browser wrapper of the browser's native event.
Handling events with react have some syntactic differences from

handling events on DOM. These are:
1. React events are named as camelCase instead of lowercase.
2. With JSX, a function is passed as the event handler instead of a string.
3. In react, we cannot
return false to prevent
the default behavior.
Example
REACT JS:
DYNAMIC FORMS
Create a Form
Make Forms Dynamic

• Create one state called InputFields. It will have an object,
with name and age properties.
Make Forms Dynamic

• map our form fields from their
inputFields state
Add the Values from inputFields State

onChange event
• Create a function called handleFormChange.
onChange event
• Assign this function to the input fields as an onChange
event.
onChange event
• This onChange event takes two parameters, index and
event. Index is the index of the array and event is the data
we type in the input field. We are passing those to the
handleFormChange function.
onChange event
• Let's store our inputFields state into a variable called data
using the spread operator (the three dots ...).
• Then, we will target the index of the data variable using
the index parameter, and the name of the property, too.
onChange event
• Now, we need to store this data back inside the
inputFields array using the setInputFields method.
Add More Form Fields

• Let's create a button to add more form fields.
• And a function, too, that will be triggered when this button

is clicked.

• Let's add the function to the button via an onClick event.
• Now, in the addFields function, we need to create an

object. And every time we click the button, it will be
pushed to the inputFields state, thus creating a new input
field.

• Then set this newField inside the inputFields state.
Create a Submit Button
• We also need a function that will be triggered when we

click this button. It will log the data in the console, from the
input fields. It also has a method called e.preventDefault()
that will prevent the page from getting refreshed.
Remove the fields using a Remove Button


• We need a function as well.
• assign this function to the Remove button.


• receive this index in the function.
• we need to create a new variable and store the

inputFields state in that new variable.

• we need to splice this data variable by the index. Then we
need to store it in the inputFields state using setInputFields.
REACT JS:
LIFTING STATE UP
Lifting State Up
• Often, several components need to reflect the same
changing data. We recommend lifting the shared state
up to their closest common ancestor. Lifting state up is a
common pattern that is essential for React developers to
know. It helps you avoid more complex (and often
unnecessary) patterns for managing your state.
Lifting State Up
• We will start with a component called BoilingVerdict. It
accepts the celsius temperature as a prop, and prints
whether it is enough to boil the water:
Lifting State Up
• Next, we will create a component called Calculator. It
renders an <input> that lets you enter the temperature,
and keeps its value in this.state.temperature.
• Additionally, it renders the BoilingVerdict for the current
input value.
Lifting State Up
Adding
Second
Input
In React, sharing state is accomplished by moving it up to the closest

common ancestor of the components that need it. This is called “lifting
state up”. We will remove the local state from the TemperatureInput and
move it into the Calculator instead.
If the Calculator owns the shared state, it becomes the “source of truth”
for the current temperature in both inputs. It can instruct them both to
have values that are consistent with each other. Since the props of
both TemperatureInput components are coming from the same
parent Calculator component, the two inputs will always be in sync.
no matter which input you

edit, this.state.temperature an
d this.state.scale in
the Calculator get updated.
One of the inputs gets the
value as is, so any user input is
preserved, and the other input
value is always recalculated
based on it.
Remember…
Every component in React has its own state, and
because of this sometimes data can be redundant and
inconsistent. So, by Lifting up the state we make the
state of the parent component as a single source of
truth and pass the data of the parent in its children.
References
• https://www.geeksforgeeks.org/lifting-state-up-in-reactjs/
• https://reactjs.org/docs/lifting-state-up.html
may * sa dulo ung di ko sure
1. When we are developing web applications, it must be fast, integrated, reliable, and engaging.
● True
2. ReactJS focuses building reusable user interfaces
● True
3. In React, same components can be used on other libraries/frameworks.
● True*
4. A React components MUST always start with an UPPERCASE letter such as NewComp.js,
Header.js
● True
5. Every time state of an object changes, React re-renders the component.
● True
6. The state can only store ONE property.

● False
7. State can only be used in class components.

● True
8. In React, if there are changes in the UI components, we need to refresh the page to render
the changes.
● False
9. React only covers the view layer of the application

● True
10. An open source Javascript library to build reusable interface components.

● ReactJS
11. In MVC Architecture, ReactJS focuses on:
● View
12. Which of the following command is used to install create-react-app?

● npx create-react-app appname
14. What is React?
● A Javascript Library
15. An open source Javascript library to build reusable interface components.
● ReactJS
16. It is used to change the value n of the state object.
● this.setState()
17. We initialize states inside a ____.
● constructor
18. What is the default local host port that a React development server uses?
● 3000
19. Components can be implemented in ____.
● Either functions or classes.*
20. Smallest building blocks of React apps.
● Elements
21. Components are composed of _____.
● Elements
22. ReactJS was initiated by:
● Facebook
23. A JS extension allows you to write HTML codes inside JS.
● JSX
24. A reusable code block which divides the UI into smaller pieces.
● Components
25. React allows developers to do the follow EXCEPT:
● Make UI codes more complicated
26. In React what is used to pass data to a component from outside?
● Props
27. What would be the output of the code below?
● Error (2 divs, dat isa lang)

28. What is the use of the create-react-app command in the React.js application?
● It is used to create a new React app
29. What needs to be called for rendering in your JSX file?
● React-DOM
30. Find the bug in this code and select the correct statement among the choices:
● import React, {useState} from “react”;
31. Which of the following is must for the API in React.js?
● renderComponent
1. True
2. true
3. True
4. true
5. true
6. False.
7. True
8. False
9. True
10. ReactJS
11. View
12. B.
13. A.
14. A.
PERSONAL EMAIL GAMITIN NIYOO

15. JSX
16. Component
17. A
18. Elements

19. A.
20. A.
21. B.
22. C.

23.D
24.C.
25.C.
26. A.

27.A.
28. A.
29. B.

30. B.

Events can only be triggered reactions once a button is clicked.
False
In uncontrolled component, React provides maximize support for from programming.
False
If you will develop web application using ReactJS, you can use ___ to allow the target users to
interact with the web pages.
Forms
It is possible to create a web application that can change its content during run time.
True
The actions that could be triggered as a result of the user action.
Events
Synthetic events are the objects which act as cross-browser wrapper around the browser’s
native event.
True
It is required to bind this inside the constructor when using an arrow function.
False
Developer can add form with React like any other elements.
True
It seems that the code has a problem, the submit button is not working properly. The pop-up
message showing the program I selected does not appear where i click the button what could
be the problem.
https://codepen.io/levisaz-the-decoder/pen/rNJMXNK?editors=1010
Line 12, use alert

Each event type contains generic properties and behavior which can be accessed via It’s a
function only.
False
In React, sharing state is done by moving it to the closest common ancestor of the components
that need it.
True
This returns the value of the element that triggered the event.
event.target.value
What seems to be the problem with this code? Every time I type in the text box, an alert box
appears. Identify what line number has a problem and its justification.
Line 23 on change….
We can update the state of a component using ____.
setState()
It seems that the code has a problem, the Submit button is not working properly. The pop-up
message did not display when i click the button, what could be the problem
Line 19, must be <form onSubmit=(this.handleSubmit)>
This allows the developer to write shorter function.
=>
It is required for each component to have a render ().
True
This is used for comparison two variables together with its data type.
===
If there are more than one element that are need to render, those elements must be inside of a
parent tag like:
<div>
What seems to be the problem with this code? Every time I type in the text box, an alert box
appears. Identify what line number has a problem and its justification.
Line 4, it must be this.state…
The event argument contains a set of properties, which are specific to an event.
True
This is used for comparison between two variables irrespective of the data type of variable.
==
The method can be use if you want to cancel an event for instance on clicking a Submit button
and you want to avoid it from submitting.
preventDefault()
The cross-browser wrapper of the browser’s native event.
Synthetic Event
What is missing in the code below?
=> line 1 in between () and {

React: Installation

Uploaded by

Copyright:

Available Formats

React: Installation

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

React: Installation

Uploaded by

Copyright:

Available Formats

REACT

Node.js provides a runtime environment to execute

• Download the latest

2011 • The Birth

2012 • became the innovation that Instagram needed

2013 • The Public Release

2014 • The Expansion and Adoption

2015 • The Native Platform

2016 • The Global Acknowledgments

2017-2018 • The React tools were updated and improved

2019 • The New React DevTools

2020 • Zero-Bundle-Size React Server Components

• Then check your browser if it is running or not

▪ React embraces the fact that rendering logic is

Code with JSX!

Code without JSX!

Embedding Expression in JSX

Embedding Expression in JSX

After compilation, JSX expressions become regular JavaScript

You may use quotes to specify string literals as attributes:

You may also use curly braces to embed a JavaScript

Children with JSX

If a tag is empty, you may close it immediately with />, like

JSX tags may contain children:

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls.

JSX Represents Objects

React.createElement() performs a few checks to help you

JSX Represents Objects

These objects are called “React elements”.

You can think of them as descriptions of what you want to see

Elements are the smallest building blocks of React apps.

An element describes what you want to see on the screen:

Rendering an Element into the DOM

Updating the Rendered Elements

React elements are immutable. Once you create an element,

With our knowledge so far, the only way to update the UI is to

Updating the Rendered Elements

Let’s consider this example:

Updating the Rendered Elements

It calls ReactDOM.render() every second from a

React Only Updates What’s Necessary

React DOM compares the element and

You can verify by inspecting the last

SimpliLearn. (n.d.). ReactJS Tutorial: A Step-by-Step Guide To Learn

ReactJS Documentation: https://reactjs.org/docs/getting-started.html

Components and Props

A component is an independent, reusable code block which

React has two types of components: functional and class.

The simplest way to define a component is to write a

This function is a valid React component because it accepts a single

When React sees an element representing a user-defined

Simplified Comment Component

User Info Component

Simplified Comment Component

Extracting components might seem like grunt work at first, but

A good rule of thumb is that if a part of your UI is used several

Props are read-Only