Scribd
Upload
3 views1 page

Dont Forget React

The document provides an overview of React, focusing on key concepts such as the Virtual DOM, JSX syntax, components, state management, and the use of hooks like useEffect. It explains how to create and manage components, pass props, and handle events in React applications. Additionally, it discusses styling options, component libraries, and the installation process for React and its dependencies.

Uploaded by

vipgiang2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views1 page

Dont Forget React

The document provides an overview of React, focusing on key concepts such as the Virtual DOM, JSX syntax, components, state management, and the use of hooks like useEffect. It explains how to create and manage components, pass props, and handle events in React applications. Additionally, it discusses styling options, component libraries, and the installation process for React and its dependencies.

Uploaded by

vipgiang2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Don’t Forget React

The Virtual DOM


The “engine” of React, that updates the Real DOM when needed.

The “Virtual DOM” checks the old “Virtual DOM” – Changing the virtual
DOM is much faster, because it’s just a JavaScript object.

Then, depending on what changed, it will update the real DOM!

WHAT
OLD VIRTUAL DOM CHANGED? NEW VIRTUAL DOM

<body>

<div> <div>

<div> <h3> <ol>

<h1> <p> <li> <li>


this part

Update this:

DOM HTML
[ ]
We no longer use the
document. methods
REACT directly
React does that for us.

JSX – the special language of React


Almost like HTML, with a few key differences

In HTML In REACT (note the closing tag)


<input type="text" > <input type="text" />

<img src="person.png" <img src="person.png"


alt="person" > alt="person" />

All tags must now have a (self) closing tag (for example, input and img)

In HTML In REACT (note the closing tag)


<p class=”primary-text”></p> <p className="primary-text">
</p>
<p style=”color:white”></p>
<p style={{color: "white" }}>
</p>

Some properties change, for example class becomes className=, and style= now
takes a javaScript object instead of a string.

function MyComponent() {
return <p>This is JSX!</ p>
}

Using JSX, we can create “custom” elements, with their own structure, properties,
logic, and styling. In React these are known as components. Components must
return JSX.

function MyComponent() {
return (
<form onSubmit={...} >
<input type=”text” onChange={...} />
<button onClick={...} >Click me! </button>
<input type=”submit” />
</form>
)
}

camelCase “Handler” properties onClick, onChange, and onSubmit replace


addEventListener for user events in JSX.

This doesn’t work right This does (note anonymous function


<button <button
onClick={console.log onClick={() => console.log
("clicked")} ("clicked")}
> >
Click me! Click me!
</button> </button>

They take a function as a value, Don’t Call this Function! Use an anonymous /
wrapper function if necessary.

<input
type="text"
onChange={e => console.log
(e.target.value)} /> logs everytime we type

The “event object” (e) will contain the data you need for “onChange” in a text input, ex:

<button
onClick={ ( ) => setClicked(true) }
>
Click me sets state variable on click
</button>

You don’t always NEED the event object, though.

Components
Think of Components as “Custom JSX Elements” that we can define, and then use one
or more times. Ultimately, the components are just like variables which will be
converted to HTML.

JS MyComponent.js

export default function MyComponent() {


return <p>This is JSX!</ p>
}

Defining a component

JS App.js

import MyComponent from "./MyComponent";


export default function App() {
return (
<>
<MyComponent />
<MyComponent />
<MyComponent />
</>
);
}

Using it inside a second App Component

<> Index.html

<p>This is JSX!</ p>


<p>This is JSX!</ p>
<p>This is JSX!</ p>

HTML output will be

How big should components be?


There’s no hard rule a couple of rules of thumb I use:

Will I use this Component more than once?


[ ]
To see a full example
Does it make sense to logically group this of a component, go
section together and name it something like to the last page!
“TopNavBar” or “Thumbnail”

The Component Tree, Importing and Exporting


The convention is 1 component per file We MUST export components to use them
in other files

export default function MyComponent( ) { … }

Then we can import into another file.

import MyComponent from "./MyComponent"; [ ]


(the extension .js,
or .jsx is optional
when importing)

export default function AllMyComponents ( ) {


return (
<>
<MyComponent />
<MyComponent />
<MyComponent />
</>
)
}

As above, our components will go inside one another, and we can use
them multiple times.

So our component tree ends up looking like this:

<All MyComponents/>

<All MyComponents/> <All MyComponents/> <All MyComponents/>

How to Install React & NPM


We can install React with NPM and NodeJS locally. We will need the React library,
and its dependencies. It’s generally recommended to use a framework like
Create-React-App, Vite, or NextJS rather than starting from zero. This will give
you boilerplate and save you time.

CREATE

APP

npm install react

You can install additional libraries and dependencies, like React Router or
Material UI, with “npm install”

{ } package.json
"dependencies": {
"react": "18.0.0",
"react-dom": "18.0.0",
"react-scripts": "4.0.0"
},

Then, these will be added node modules folder, which contains all your library code.
(You don’t commit this to GitHub)

These will be added to package.json, which is the “assembly manual” for your app...

Transpiling
Browsers can’t run React code, so it must be TRANS-piled to vanilla JavaScript,
HTML and CSS. There are libraries that do this for us. Babel and Webpack.

Transpiling takes all our .JSX or .JS files (React can be written in both) and, by
default, puts them into a single large bundle.js file

App.js

Component1.js Bundle.js

Component2.js

And all our dependencies, into a vendor.js file.

Loading these big files over a network can really slow things down

Having one massive bundle.js will slow down our initial page load, however
bundlers have improved on this over time with things like:

Server Side Rendering Code Splitting Lazy Loading

This is important for larger apps...

And frameworks like Next JS will do this for us.

Props
The “arguments” of a component, they’re how we pass data from one component
to another.

<MyComponent name="Aaron" />

Think of them as “custom properties” – we send them with the “key=value” syntax

function MyComponent( props ) { Aaron prints


console.log(props.name);
…
}

And receive them with “props” object – so they can be accessed accordingly.

function MyComponent( { name } ) { Pull name value


… from props object
}

We can “destructure” them like so ...

function MyComponent( { name } ) {


return <p> Hello, { name } </ p>
}

And can use them accordingly ...

function AllMyComponents ( ) {
return (
<>
<MyComponent name="Aaron" />
<MyComponent name="Jack" />
<MyComponent name="Jan" />
</>
)
}

In the tree model, passing props might look like this ...

So our component tree ends up looking like this:

<All MyComponents/>

{name:”Aaron”} {name: “Jack”} {name:”Jan”}

MyComponent MyComponent MyComponent

<p> Hello, Aaron </ p>


<p> Hello, Jack </ p>
<p> Hello, Jan </ p>

And ultimately our HTML looks like this

State & State Hook


The “internal variables” of a component.

import React from 'react'


function MyComponent( ) {
[ ]
State must go INSIDE
const [myName, setMyName] =
our component,
React.useState("Aaron") conventionally, at the
... top.
}

We create them with useState hook, that takes an “initial value” returns an array of 2
myName will become the initial value “Aaron”

setMyName("Jack");

And we can update “myName” like so:

myName = "jack"; won’t work

But cannot assign anything directly to state (always use the setter function!)

const [myNames, setMyNames] =


React.useState(["Aaron"]); will NOT work
myNames.push("Jack") works, creates a copy
with array
setMyNames( [...myNames, " Jack"] ); spreading, adds “Jack”
at the end

Changing state will “update” the component it lives in, and all components
it’s passed to.
State is IMMUTABLE. If we want to update an array, we need to create a new copy

useEffect & React Life Cycle


When components get added to the page, they start the “component life cycle”
There are 3 key events:
Mount, Update, UnMount

MOUNT UPDATE UNMOUNT

Which we can attach behavior to each of these with useEffect.


useEffect, always runs when the component it’s inside is created

import React from 'react'


function MyComponent( ) { We can use promises
React.useEffect( ( ) => { inside.
fetch("https://myserverurl.com/
items/").then(...)
}, [ ])
…
}

We often useEffect to fetch some data once and only once, so we aren’t
unnecessarily bombarding our server.
It takes a function as the first argument, (this cannot be an async function)...

import React from 'react'


function MyComponent( ) { We can use promises
React.useEffect( ( ) => { inside.
fetch("https://myserverurl.com/
items/").then(...)
}, [ ])
…
}

We often useEffect to fetch some data once and only once, so we aren’t
unnecessarily bombarding our server.
It takes a function as the first argument, (this cannot be an async function)...

React.useEffect( ( ) => {
fetch("https://myserverurl.com/items/" When itemID changes,
+ itemID ) we run fetch again.
.then(...)
}, [ itemID ])

Optionally, an array of “dependencies” as the second argument


– These are the variables we can choose to “watch”, then if they change,
we run the function again

React.useEffect( ( ) => {
return ( ) => alert(" goodbye ! ") Only runs when
}, [ ]) component gets
removed from DOM

Optionally, we can also return a function which runs on “unmount”

Full React Component Example


This is an ES6 import of
import React from "react" the React library

import MyComponent from ". A relative import of a different


/MyComponent.js " component we wrote function

function MySecondComponent There is always a single


( props ) { “props” argument

const [myName, setMyName] = A state hook can save


React.useState("Aaron"); and update variables

React.useEffect( ( ) => { useEffect hook runs a


function we pass in

console.log("page loaded") At least once, when the


component “mounts”...
Optionally, again, when the variables
}, [ ]) we put in this array change

We must return JSX


return ( or we’ll get an error
We can group together JSX with
<> “Fragments” that create no HTML

<h1>

My name is {myName} {Curly brackets} Let us


write JavaScript inside JSX

</h1>

{ Inline logic works too

props.additionalText && <p> Here we only show a p


{props.additionalText}</p> if a prop exists

} We can switch from


JSX to JS and back.
Finally, we use the component
<MyComponent fruit="apple" /> we imported, and give it props
</>
);
}
We must export our component
export default MySecondComponent to use in other files!

Styling With React


In React, you can still use CSS files, for sure. But Styled
Components are more popular, especially with UI
[ ]
You want to keep
component libraries (see next section). styled components
free of data and state.
Styled Components
should be separate
to your components
with logic.

Styled Components mean all the styles are encapsulated


in your component, so you don’t have to mess around
with class names, multiple files, and generally makes
“everything you need” inside that component.

You can build styled components from the ground up, or


“compose” them in the same way you make CSS classes.

const Block = styled.div`


margin: 10px;
padding: 10px;
`;

For example, I can create a “Block” component that is


simply a “div” under the hood, that includes some
padding and margin.
const SmallBlock = styled(Block)({ const BigBlock = styled(Block)({
width: "100px", width: "500px",
}) })

And I can “extend” this block with more styles to create


“BigBlock” and “SmallBlock” styled components.

< SmallBlock />


FROM < div />
<div/>
TO < Block />
< BigBlock />

You’ll either use the “styled components” library or the


“styled” function of a UI Library like Material UI to do this.

Component Libraries
There are tons of component libraries, but the 2 most common are React Router,
and some form of UI Library

React Router
React Router enables us to do “Client Side Routing”, so we can have some
navigation in our React apps with multiple pages and paths that can be
observed in the URL bar.

index.html Faq.html
<h1>Hello there!</h1> <h1>FAQ</h1>
<a href=”faq.html”>Go to <a href=”index.html”>Go to
faq</a> home</a>

https://mywebsite.com/index https://mywebsite.com/faq

While in HTML, we’d need a different file and server request for each path...

App.js
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom ";
import Home from "./Home"
import Faq from "./Faq"
function App() {
return(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="expenses" element={<Faq />} />
</Routes>
</BrowserRouter>
);
}

We can achieve the same result with React components by


1. wrapping our App in a “BrowserRouter”
2. creating <Routes> with the “path” and “element” parameters (setting each
path to a component)

Home.js Faq.js
import { import {
Link Link
} from "react-router-dom "; } from "react-router-dom ";
export default function Home() export default function Faq()
{ {
return( return(
<> <>
<h1>Hello there!</ h1> <h1>FAQ</h1>
<Link to="/faq"> <Link to="/">
Go to FAQ Go to Home
</Link> </Link>
</> </>
); );
} }

And linking to each path with a <Link>

UI Libraries
Let you use pre-built and styled Components in your apps,
that you can customize. This saves a massive amount of
[ ]
API is just shorthand
time. for “interface” or how
you interact with
You will have to have the docs for your library of choice something from the
outside, whether it’s
open to learn what components are available As well as a back end server,
their “APIs” – but in this context, the API is a component’s function, or React
props. component, you can
use this term.

Here are some examples from the Material UI Library

Simple Components Are Attractive Out of the Box

Complex Use Cases are Big Time Savers

You Can Customize Components Inline with sx

Or as above, write styled components

Visit
MUI.COM

You might also like