react-slides
react-slides
React
WHY REACT?
REACT vs React Native?
What is React?
fetching
Fundamentals of React
3. Components everywhere
JavaScript and HTML in the same file
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>
</>
);
“React is just
JavaScript”
Functional programming
let a = 4;
a = 2; // Mutates `a`
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"
/>;
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
Syntax:
– 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]);
• Redux
• Material-UI
• Bootstrap
• Font-Awesome
• SWR