Introduction to
React
Prerequisites •
•
Knowledge of HTML, CSS, JavaScript, and Git
Knowledge of package management with Node.js and npm
• Node.js and npm locally installed
• A code editor, such as Visual Studio Code
Learning •
•
Explore React and JSX
Install React and create a project
objectives • Create a React component and dynamically display data
• Apply style to a React component
What is React?
• React is a JavaScript framework
• Used for front end web development
• Think of jQuery, but more structured
• Created and used by Facebook
• Famous for implementing a virtual dom
Timeline of front-end JavaScript
frameworks
jQuery* AngularJS React Vue Angular
(2006) (2010) (2013) (2014) (2014)
* jQuery is more often considered a library than a framework
Common tasks in front-end
development
App state Data definition, organization, and storage
User actions Event handlers respond to user actions
Templates Design and render HTML templates
Routing Resolve URLs
Data Interact with server(s) through APIs and AJAX
fetching
Fundamentals of React
1. JavaScript and HTML in the same file (JSX)
2. Embrace functional programming
3. Components everywhere
JavaScript and HTML in the same file
HTML CSS JS JSX CSS or JSS
Traditional React
approach approach
JSX: the React programming
language
const first =
"Aaron"; const last
= "Smith";
const name =
<span>{first}
const list = (
{last}</span>; const listWithTitle = (
<ul> <>
<li>Dr. David <h1>COMP 523</h1>
Stotts</li> <ul>
<li>{name}</li> <li>Dr. David
</ul> Stotts</li>
); <li>{name}</li>
</ul>
</>
);
JSX: the React programming
language
const first =
"Aaron"; const last
= "Smith";
const name =
<span>{first}
const list = (
{last}</span>; const listWithTitle = (
<ul> <>
<li>Dr. David <h1>COMP 523</h1>
Stotts</li> <ul>
<li>{name}</li> <li>Dr. David
</ul> Stotts</li>
); <li>{name}</li>
</ul>
</>
);
“React is just
JavaScript”
Functional programming
1. Functions are “first class citizens”
2. Variables are immutable
3. Functions have no side effects
Functional programming
Functions are “first class citizens”
let add = function()
{ console.log('Now adding
numbers'); const five = 3 + 2;
}; function foo()
{ return
function() {
function console.log('What
performTask(task) gets
{ task(); printed?');
console.log('Task };
performed!'); }
}
foo
Functional programming
Variables are immutable
let a = 4;
a = 2; // Mutates `a`
let b = [1, 2, 3];
b.push(4); // Mutates `b`
let c = [...b, 4]; // Does not mutate
`b`
Functional programming
Functions have no side effects
const b = [];
function
hasSideEffects() { b =
[0];
}
Components
Components are functions for user interfaces
Input Output
Math function: x let y = number
f(x);
Input Output
Component function: x let y = <FancyDiv HTML
value={x} />;
Anatomy of a React component
The component is just Inputs are passed through a
a function single argument called “props”
The function
export default function MyComponent(props) { outputs HTML
return <div>Hello, world! My name is
{props.name}</div>;
}
const html = <MyComponent name="aaron"
/>;
The function is executed as if Parameters are passed in
it was an HTML tag as HTML attributes
Component rendering
• When a component function executes, we say it “renders”
• Assume components may re-render at any time
Our job is to ensure that
every time the component re-renders,
the correct output is produced
“In React, everything is a
component”
Todo application
Titl
e
Big idea:
A digital to-do list TodoFor
m
First step:
mockup / wireframe
TodoList
Tod
o
Creating a new React app
Creating a new React app is simple!
1. Install Node.js
2. Run: npx create-react-app app-
name
3. New app created in folder:
./app-name
Anatomy of a new React app
public holds the initial
html document and other static
assets
App is a
boilerplate starter
component
index.js
binds React to
the DOM
package.json
configures npm
Component Hierarchy
Title
TodoFor
Ap m
p
Titl TodoLis TodoFor
e t m TodoLis
t
Tod Tod Tod
o o o Tod
o
Special list key property
• Situation: Display a dynamic array of elements
• Must specify a special “key” property for each
element
• The key of an item uniquely identifies it
• Used by React internally for render optimization
• Can be any unique value (string or number)
What are hooks?
Hooks: Special functions that allow Built-in hooks:
developers to hook into state and
lifecycle of React components. We will cover
useStat
these today e
useEffec
State: One or more data values t
associated with a React component useReduce
instance. r
We will not cover useMem
these today o
Lifecycle: The events associated with a useRe
React component instance (create, f
useCallbac
render, destroy, etc). k
First React hook: useState
Purpose:
1. Remember values internally when the component re-renders
2. Tell React to re-render the component when the value changes
Syntax:
const [val, setVal] = useState(100);
The current value A setter function to The initial
change the value value to use
Predicting component re-rendering
A component will only re-render when…
1. A value inside props changes
– or –
2. A useState setter is called
Second React hook: useEffect
Purpose:
Act as an observer, running code in response to value changes
Syntax:
useEffect(() => {
console.log(`myValue was changed! New value: $
{myValue}`);
}, [myValue]);
A list of values such that changes The code to run when
should trigger this code to run values change
Building a React project
• When you’re ready to launch your app, run this command:
• npm run build
• This bundles your app into CSS/JS/HTML files and puts them in the
• /build folder
• These files can be served from an AWS S3 bucket
3rd party components and libraries
• React-Router
• Redux
• Material-UI
• Bootstrap
• Font-Awesome
• SWR
Introduction to React and JSX
Introduction to React
- React is an open-source front-end framework
- React introduces JSX, or JavaScript XML
- JSX can be used to create React components
- During this workshop you will create a page to display recipe titles
Introduction to JSX
- JSX allows HTML (XML) and JavaScript to be combined in one file
- Allows for faster development
- JSX follows XML rules
- All elements must be placed inside one parent element
- All elements must be closed
- Browsers do not natively support JSX
- JSX must be converted to HTML and JavaScript through the build process
- Several tools exist for managing this process including Vite, Webpack and Snowpack
- This course uses Snowpack
Components
- React development is based on components
- Components are reusable blocks containing both UI and logic
Cart component
ProductList component
Product component
Product component
Exercise: Create a starter
project
React app structure
The application host
- Every React app will contain an HTML file to host the app
- Note the div element with the id app
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Recipes</title>
</head>
<body>
<div id="app"></div>
<script type="module"
src="/dist/index.js"></script>
</body>
</html>
index.jsx
- React apps often use index.jsx as the root to the project
- This will typically load the React app and place it on the page
JSX
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
Exercise: Create Hello world!
Create your first component
Create your first component
- React development is based on components
- Components are self-contained, reusable units of UI and logic
- React projects typically contain many components
- While React components can be a function or a class, we will use
functions in this workshop
The core component
Many React projects start with one core component called App
JSX
import React from 'react';
function App() {
return (
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
Exercise: Create your first
component
Display dynamic data
Display dynamic data
To display dynamic data contained inside JavaScript,
use the syntax { }, sometimes called handlebars.
JavaScript
<div>{ Date.now() }</div>
Create a RecipeTitle component
In our example, we'll create a component for the title of a recipe.
JSX
import React from 'react';
function RecipeTitle() {
const title = 'Mashed potatoes';
return (
<h2>{ title }</h2>
)
};
export default RecipeTitle;
Explore the code
Notice that we create a constant named title.
Exercise: Display dynamic
data
Exercise: Add style to a React
component
Knowledge check
Question 1
What is JSX?
A. A combination of JavaScript and XML
B. A new version of JavaScript
C. The output of a React project
Question 1
What is JSX?
A. A combination of JavaScript and XML
B. A new version of JavaScript
C. The output of a React project
Question 2
Why would you use JSX to create a React application?
A. JSX is the only supported method for creating React applications.
B. JSX allows for good code management. It injects the necessary logic with your
HTML.
C. JSX is supported by all browsers.
Question 2
Why would you use JSX to create a React application?
A. JSX is the only supported method for creating React applications.
B. JSX allows for good code management. It injects the necessary logic with your
HTML.
C. JSX is supported by all browsers.
Question 3
What is the purpose of a bundler in web development?
A. To generate JSX
B. To convert JSX and other resources into JavaScript
C. To bootstrap an application
Question 3
What is the purpose of a bundler in web development?
A. To generate JSX
B. To convert JSX and other resources into JavaScript
C. To bootstrap an application
Summary
Summary
React is the most popular front-end JavaScript framework.
• Understand the core concepts of React.
• Create a React application.
• Create a component.
