Introduction to React for Frontend Developers

Sergio Nakamura | nakamurasei.com hi@nakamurasei.com
An Introduction
To React For
Frontend Developers

An Introduction To React For Frontend Developers hi@nakamurasei.com
Disclaimer
Many of the techniques displayed aren’t exclusive to React. In fact, React is
built in JavaScript and as such all React features can be implemented in
JavaScript (and have existed for years, albeit with less flashy names).
However React offers a “framework”, a structure you can use to build your
applications. While not many people will implement a pub-sub method or a
helper method to simplify element creation, many people will use a
framework. You can use its features without knowing its inner workings,
without reinventing the wheel, and using the same conventions.

Why React?
JavaScript has been used for over two decades to add interactivity to
webpages: adding, removing or modifying elements, responding to user
input and sending and receiving data from external sources.
React (just like Angular, Vue and many more) are frameworks built on
JavaScript that allow easier development of user interfaces.
1.
Declarative
Style
2.
Automatic
Updates
3.
Virtual
DOM
4.
Modular
Structure

Why React?
Declarative Style
If you’ve previously used JavaScript you may have found yourself telling the
browser each step to make: select X element, set the content to Y, do Z
when clicked... Having to tell each step can be classified as an
“Imperative” style: forgetting a step may lead to errors, because the browser
just follows instructions, it doesn’t know what you’re actually looking for.
In React, you are following most of the time a “Declarative” style, you tell
what you want and provide the data. React does the work behind the
scenes to translate that information to the instructions your browser
understands.
1

Why React?
Declarative Style
Let’s render a <button> and console.log when clicked, in Vanilla JS and React.
Vanilla JS React JS
1
const btn =
document.createElement(“button”);
//Create <button>
body.appendChild(btn); //Append to body
btn.innerText = “Click me”; //Change text
btn.addEventListener(“click”, () => {
console.log(“Clicked”);
}); //Log “Clicked” when clicked
import React from “react”;
export default function App() {
return (
<button onClick={() =>
console.log(“Clicked”)}>
Click me
</button>
);
} //I want a <button> with “Click me” as
text that logs “Clicked” when clicked

Why React?
Automatic Updates
As your application grows adding an element and setting a value isn’t
enough: you may need to update its content as you receive new
information.
Without a framework as React, you may have to tell the browser to update the
elements every time we receive new information. While this doesn’t seem a
big deal at first it can get ugly fast.
Using React, all the elements depending on a piece of data get updated
automatically when the data changes.
2

Why React?
Automatic Updates
Let’s see a simple button that +1 to a counter. The counter variable is seen in
two places at the time.
2
Vanilla JS React JS
let counter = 0; //Counter
const p = document.createElement(“p”); //Create a <p>
p.innerText = counter; //Set <p>’s text
body.appendChild(p); //Append <p> to the body
const btn = document.createElement(“button”);
//Create a <button>
btn.innerText = `+1 and make it ${counter + 1}`;
//Set <button>’s text
body.appendChild(btn);
//Append <button> to the body
btn.addEventListener(“click”, () => {
counter = counter ++; //Update the counter
p.innerText = counter; //Update <p>
btn.innerText = `+1 and make it ${counter + 1}`;
// Update <btn>
})
import React, {useState} from “react”;
const [counter, setCounter] = useState(0);
return (<div>
<p>{counter}</p>
setCounter(counter++)}>
`+1 and make it ${counter + 1}`
</button>
</div>)
}
//All elements depending on counter will update when
counter changes value

Why React?
Virtual DOM
In JavaScript one of the most performance degrading actions is updating
the DOM, that is the elements that compose your webpage. As such, wouldn’t
be great if we updated the DOM as less as possible? Enter the Virtual DOM.
With React we have two versions of the DOM: the one that’s being displayed
in the browser and an internal DOM that reflects the processed output by
React. By comparing both DOMs we can update only the elements that we
need. Without some technique like Virtual DOM we may need to update all
the elements even if we modified only one, incurring a performance hit.
3

Why React?
Modular Structure
In React, each part of the UI can be divided in smaller components. This
makes coding more manageable and easier to work in a team, it allows the
production of self-contained components that can be reused easily and since
it’s JavaScript it allows data passing between components: no more storing
data in the DOM and in humongous global states.
4

Why React?
Modular Structure
Let’s see how components can make our code more manageable.
4
Vanilla JS React JS
let fruits = [“mango”, “apple”, “banana”, “orange”];
const div = document.createElement(“div”);
//Create <div>
body.appendChild(div); //Append to body
function addFruits() {
fruits.forEach(fruit => {
const p = document.createElement(“p”);
p.innerText = fruit;
div.appendChild(p);})
}
addFruits();
import React, {useState, useEffect} from “react”;
import Fruits from “./Fruits.js”;
const [fruits, setFruits] = useState([“mango”,
“apple”, “banana”, “orange”]);
return (<Fruits fruits={fruits}/>);
}
import React, {useState, useEffect} from “react”;
export default function Fruits(props) {
return (<div>{props.fruits.map(fruit=><p
key={fruit}>{fruit}</p>)}</div>);
}
//”fruits” was received from App() via props
App.js
Fruits.js

React Basics
You can build a React application with either classes or functions. While
classes are useful when building complex components, in most cases using
functions will be more readable and concise.
You can build functional components in these ways. Note that we are
exporting the function, so we can use it in another place.
return(<p>Hello World</p>);
}
const App = () => {
}
export default App;

What you are seeing in orange isn’t HTML, is something called JSX, an
extension of JavaScript used in React. When you are using JSX you are
actually calling a function named “createElement” which outputs the HTML
you are expecting.
React Basics
JSX
}

React Basics
JSX
JSX elements must be closed at all times. While most HTML elements follow
the <></> structure, some elements don’t have an end tag (like <input> or
<img>). In those cases you must add a / right before >, effectively closing it.
<input type=”submit”> <input type=”submit”/>
HTML React’s JSX

React Basics
JSX
As we are seeing, JSX isn’t an exact copy of HTML. If you want to style your
components using CSS, the “class” property isn’t allowed. Instead, use
“className”.
<p class=”hello”>Hello</p> <p className=”hello”>Hello</p>
HTML React’s JSX

React Basics
JSX
One of the advantages of JSX is that we can use JavaScript code instead of
strings. To do so we wrap our code in {}. This allows us to use variables,
render CSS class names conditionally, call functions and more.
<p className=”hello”>{message}</p>
//<p>’s content is the variable “message”.
React’s JSX

React Basics
JSX - Using JS Code inside {}
The code inside {} must always return something (even null).
We can’t add more than one line (as in separate instructions divided by ;),
however functions can have multiples lines inside it.
<p className=”hello”>{
function renderStuff () {
return “Hello”
};
renderStuff()}
</p>
“Hello”
}</p>
Invalid: Separate instructions OK

React Basics
We can’t use if as it doesn’t always return something. We can use a ternary
expression instead, where the else clause returns null.
if(name === “Kentaro”){
return “You are
Kentaro”}
}</p>
name === “Kentaro” ? “You are
Kentaro” : null
}</p>
Invalid: if OK

React Basics
To replace an if else clause use the ternary expression in the same way.
if(name === “Kentaro”){
return “You are
Kentaro”} else {
return “You are not Kentaro”
}
}</p>
name === “Kentaro” ? “You are
Kentaro” : “You are not Kentaro”
}</p>
Invalid: if OK

React Basics
We can’t add loops (such as for or forEach). However we can use array’s map,
since it will always return an array.
<div>{
names.forEach(name => <p
key={name}>{name}</p>)}
</div>
<div>{
names.map(name => <p
key={name}>{name}</p>)
}</div>
Invalid: forEach
<div>{
for(i = 0, n=names.length; i<n; i++){
return <p key={names[i]}>names[i]</p>}
}</div>
Invalid: for
OK

import MyFunction from “./MyFunction.js”;
const App = () => {
return <MyFunction name=”Kentaro”/>;
}
export default App;
App.js
const MyFunction = (props) => {
return <p>{props.name}</p>;
}
export default MyFunction;
MyFunction.js
React Basics
Modularity
By splitting your application in several files code reuse and teamwork become
easier. To import a component use “import” at the top of your file.

React Basics
Using state inside components
To store information inside our components we can use “useState”, a React
Hook (function that enables access to the state and lifecycle features of
React.)
import React, {useState} from “react”; import React, {useState} from “react”;
const [counter, setCounter] =
useState(0);
return <p>{counter}</p>;
}
1: Import useState at the top 2. Call useState inside the function

React Basics
Anatomy of useState
const [counter, setCounter] = useState(0);
1: Pick a name for the
variable that will hold the
state’s value.
2: This is the function that will
set the state’s value.
By convention name it “set” +
the name picked in 1
(camelCase).
3: This is the initial value of
the state. Ideally set it to the
same type as the expected
value. For example, if you are
expecting a number you can
set it to 0.
Functions, variables, even null
and undefined is OK.

React Basics
useState example
import React, {useState} from “react”;
useState(0);
return (<div>
<p>{counter}</p>
setCounter(counter + 1)}>+1</button>
</div>
)
}
1: <p/> will hold the counter value. At
initialization its value will be 0, as defined in
useState.
2: When <button/> is clicked, the counter’s
value will be incremented by 1. Automatically,
every place that holds “counter” will update its
value.

React Basics
useEffect
Another React Hook is “useEffect”. Whatever instructions are inside of
useEffect will get executed whenever there’s an update to its dependences.
This lets us fetch data at component mount, execute functions when new
information is received and more.
import React, {useEffect} from “react”; import React, {useEffect} from “react”;
useEffect(() => {
//Place code here
}, []);
return <p>Hello world</p>;
}
1: Import useEffect at the top 2. Call useEffect inside the function

React Basics
useEffect’s Behaviour
The behaviour of useEffect changes depending on the dependencies defined
in the [] at the end.
useEffect(() => {
//Place code here
}, []);
Component mount
If nothing is defined inside [], the code inside
useEffect will execute only once at
component mount. This replaces React’s
lifecycle method componentDidMount.
useEffect(() => {
//Place code here
}, [varName]);
Update at dependency change
The code will execute once at component
mount and everytime there’s a change of the
dependencies defined inside []. You can add as
many dependencies you wish.

React Basics
useEffect example
import React, {useState, useEffect} from
“react”;
useState(0);
useEffect(()=>{
console.log(`Counter value is
${counter}`);
}, [counter]);
return (<div>
<p>{counter}</p>
setCounter(counter + 1)}>+1</button>
</div>
)
}
Because “counter” is defined as a dependency
of useEffect, it will console.log every time
“counter” is incremented.

Sergio Nakamura | nakamurasei.com hi@nakamurasei.com
Thank you!

Introduction to React for Frontend Developers

More Related Content

What's hot (20)

Similar to Introduction to React for Frontend Developers (20)

Recently uploaded (20)

Introduction to React for Frontend Developers