JavaScript
prerequisites
for React (hooks)
Reactjsday 2020
Jad Joubran
Instructor & Consultant
@JoubranJad
JS <> React
React, like any frontend framework, builds on top of JS concepts
It’s important to be able to recognize those JS concepts
This talk covers React (hooks), thus no classes
JS Concepts (React usage)
1. Automatic
Semicolon Insertion
(ASI)
Semicolons are optional
In JavaScript
Scenarios for ASI
let, const�import, export
continue, break, throw
return
function getAgeLimit() {
let age = 18
return
age
}
function getAgeLimit() {
let age = 18
return;
age
}
function getAgeLimit() {
let age = 18
return age
}
function getAgeLimit() {
let age = 18
return (
age
)
}
import React from "react";
function App() {
return
<main>
<h1>Hello World!</h1>
</main>
}
❌
import React from "react";
function App() {
return;
<main>
<h1>Hello World!</h1>
</main>
}
❌
import React from "react";
function App() {
return (
<main>
<h1>Hello World!</h1>
</main>
)
}
✅
import React from "react";
function Navbar() {
return (<>
<nav>Home</nav>
</>);
}
✅
2. Object
Destructuring
const point = {
lat: 52.369661,
lng: 4.897243
};
const lat = point.lat;
const lng = point.lng;
const point = {
lat: 52.369661,
lng: 4.897243
};
// const lat = point.lat;
// const lng = point.lng;
const {lat, lng} = point;
const point = {
lat: 52.369661,
lng: 4.897243
};
// const lat = point.lat;
// const lng = point.lng;
const {lat, lng, elevation = 0} = point;
import React from "react";
function App(props) {
console.log(props); // {}
return null;
}
// Usage
<App />
import React from "react";
function App(props) {
console.log(props); // {title: "My App"}
return <div>{props.title}</div>;
}
// Usage
<App title="My App"/>
import React from "react";
function App(props) {
const {title} = props;
return <div>{title}</div>;
}
// Usage
<App title="My App"/>
import React from "react";
function App({title}) {
return <div>{title}</div>;
}
// Usage
<App title="My App"/>
import React from "react";
function Button(props) {
return (<button className={props.className} disabled={props.disabled}>{props.children}
</button>);
}
// Usage
<Button disabled>Login</Button>
import React from "react";
function Button(props) {
const {children, ...rest} = props;
return (
<button {...rest}>
{children}
</button>
);
}
3. Array
Destructuring
const coordinates = [52.36, 4.89];
const lat = coordinates[0];
const lng = coordinates[1];
console.log(lat); // 52.36
const coordinates = [52.36, 4.89];
// const lat = coordinates[0];
// const lng = coordinates[1];
const [lat, lng] = coordinates;
console.log(lat); // 52.36
function getCoordinates() {
return [52.36, 4.89];
}
const [lat, lng] = getCoordinates();
console.log(lat); // 52.36
function useState() {
const currentValue = 10;
function updateFn(){
console.log("update state");
}
return [currentValue, updateFn];
}
const [count, setCount] = useState();
console.log(count, setCount); // 10, function
import React, {useState} from "react";
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
return <div>{seconds}</div>
}
import React, {useState} from "react";
function Button() {
const [disabled, setDisabled] = useState(false);
return <button disabled={disabled}/>
}
import React, {useState} from "react";
function Button() {
const [disabled, setDisabled] = useState(false);
function handleClick() {
setDisabled(!disabled);
}
return <button disabled={disabled} onClick={handleClick}/>
}
4. Immutability
15 === 15; //true
"hello" === "hello"; //true
true === true; //true
// however
[] === []; //false
{} === {}; //false
[10] === [10]; //false
new Array(); // creates []
new Object(); //creates {}
// now this starts making sense
new Array() === new Array(); //false
new Object() === new Object(); //false
import React, { useState } from "react";
function App() {
const [data, setData] = useState([]);
function handleClick() {
// ❌ incorrect way
data.push(10);
setData(data);
}
return <button onClick={handleClick}>Add 10</button>;
}
let state = []; //created by useState([])
//newState is the result of data.push(10) on button click
function setData(newState) {
if (state === newState) {
//no need to re-render because the state has not changed
return false;
}
//store the newState for next time the setData() is called
state = newState;
//ask ReactDOM to re-render
}
state === newState // true, React won't re-render whereas the state has been changed
// We need to update the array immutably
// => Create a new copy of that array
// instead of .push()
const numbers = [1, 2, 3];
const result = [...numbers, 4];
console.log(result); //[1, 2 ,3 ,4]
import React, { useState } from "react";
function App() {
const [data, setData] = useState([]);
function handleClick() {
// ✅ correct way
setData([...data, 10]);
}
return <button onClick={handleClick}>Add 10</button>;
}
5. Closures
What is a closure?
A closure is when a function contains another function.
Functions in JS have access to their outer scope.
This concept is called closures.
What is a closure? (continued)
Closures is what you get when you define a function, it's not something you have to "enable" or decide to use.
Functions defined inside another function can use the variables defined in the outer function.
import React, {useState} from "React";
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
function handleClick() {
// (prefer functional state updates over this)
setSeconds(seconds + 1);
}
return <button onClick={handleClick}>Add 10</button>;
}
6. Conclusion
In my opinion
It’s better to understand the JavaScript concepts before diving into a framework.
As long as don’t get stuck trying to understand those concepts.
Alternatively
Take a step back when you encounter JS concepts and learn them outside of the framework you’re using
Examples are taken from react-tutorial.app
Thank you!
Get the slides bit.ly/js-pre-react
Learn React interactively react-tutorial.app
Reactjsday 2020
Jad Joubran
Instructor & Consultant
@JoubranJad