import React from"react";import ReactDOM from"react-dom";functionHelloWorld() {return <div>Hello World</div>;}exportdefault Base//we will use the root in App.jsconstroot=ReactDOM.createRoot(document.getElementById('root'));
We can interdent style properties by using an array of strings.
/*The element position depends on the index used*/<divclassName='position-relative'> <h1className='position-absolute'style={{ [["left","right"][0]]:"0%" }}> Left element </h1> <h1className='position-absolute'style={{ [["left","right"][1]]:"0%" }}> Right element </h1></div>
A component needs to import React and can reference multiple components, called child components, but can export only one.
//components are shortened versions of <Primo> </Primo> to put code in-between
//we can use Arrow functions for the components
import React from 'react';
const Primo =() =>{
return(
<div> <h1>Second component </h1> </div>
)
}
const Secondo =() =>{
return(
<div> <h2>First component</h2> </div>
)
}
const App =() =>{
return(
<div>
<Primo />
<Secondo />
</div>
)
}
export default App;
rendered React component
We use CamelCase for component names to differentiate from default HTML tags.
We use javascript expressions and {} to render logic and variables on JSX.
Javascript expressions on React Components
We set the javascript operations before the return of the component.
//we can work with arrays, methods and objects
const Second =() =>{
const linea= ["uno", "molti", "terzi"]
const oggetto= {
soggetto: "nome",
predicato: 12_000
}
return(
<div>
This is a sum: {1 +2 +3} //6
molti: {linea.join(" / ") } //uno / molti / terzi
two object {oggetto.soggetto} and {oggetto.predicato} //nome and 12000
</div>
)
}
We can invoke functions and render loops:
const Primo =() ={
function object(zona){
return zona.capital + " and " + zona.province
}
const area={
capital: "lichsteiner",
province: "vicini"
}
const serie= ["meant", 23, "to be"]
return(
<div>
We invoke the function: {object(area)} //lichsteiner and vicini
<ul>
{
serie.map((x) =>{
return(
<li>The element is: {x} </li> //The element is: meant
)
})
}
</ul>
</div>
)
}
React Props, event handlers, and useState
Props are arguments passed into React components, they are read-only and can't be updated.
//we use it when importing/exporting components
//we declare props argument key and THEN we add properties
const Basic= (props) =>{
return(
<div> We use the props here: {props.name} </div>
)
}
export default Basic
//The property values change depending on the component which is used
import Base from './components/Basso'
const App= () =>{
return(
<Base name="Mozafar" /> //We use the props here: Mozafar
)
}
export default App;
Props used with javascript expression
We can edit the props property using javascript expressions:
//we export the props component with expressions
const Base= (props) =>{
console.log(props)
return(
<div id={ "numero-" + props.numba } >
The name is {props.name} and number {props.numba}
<div>nuovo valore: {props.numba + 12} </div>
</div>
)
}
export default Base
to then assign the props values on the rendering components:
//and properties values can be expressions themselves
import Base1 from './components/Basso'
let anni= Math.floor( Math.random()*100 )
const App= () =>{
//console.log(
return( //{name: "Mozafar", numba: 5} )
<div> //<div id="numero-5">
<Base1 name="Mozafar" numba={anni}/> //The name is Mozafar and number 5
</div> //nuovo valore: 17
)
}
export default App;
We can add Event Handlers to React components, like onClick(), onChange() or onSubmit():
//We put the callback function in {} as an expression
const Ano= () =>{
let add= 0;
function more(){
add += 1
console.log("Added " + add) //added 2/3/...
}
return(
<div>
<button className='btn btn-warning' onClick={more}>Clikka</button>
</div>
)
}
We can pass useState() and functions using props:
useState() and functions on props
We use the useEffect() hook to set-up a setInterval() based on isActive and isPaused useState().
Then we pass useState() and the functions to the <Tempo> prop
We can then use the prop function and the prop useState() in the imported component:
//We call the prop.functions with the onClick() event listener
//We use the ternary operator with the returned prop.useState()
const Tempo = (props) =>{
const StartButton = (
<div className="btn btn-warning"
onClick={props.handleStart}>
Start
</div>
);
const ActiveButtons = (
<div className="btn-grp">
<div className="btn btn-danger"
onClick={props.handleReset}>
Reset
</div>
<div className="btn btn-primary"
onClick={props.handlePauseResume}>
{props.isPaused ? "Resume" : "Pause"}
</div>
</div>
);
return (
<div className="Control-Buttons">
<div>{props.isActive ? ActiveButtons : StartButton}</div>
</div>
);
}
After the useEffect() setInterval() is started we can render its useState() using another component.
//we can continue to edit the props.useState()
<Nub time={time} />
const Num= (props) =>{
return(
<div>
<h1>Sono passati {props.time/100} secondi </h1>
<h2>E sono passati { Math.floor( (props.time/6000 ))} minutos </h2>
</div>
)
}
We use the React Hook useState to track the state of a component and update it:
Updating Reactjs useState()
We use destructuring on the imported useState object, into a current state variable, and a set function to update it.
//We use .concat() instead of .push() to create a new state array that will
//get re-rendered on React (instead of just changing current with .push())
import React , { useState } from 'react';
const Ray= () =>{
let [rar, setRar] = useState([])
let [uno, setUno] = useState( 21 )
function innio(){
setRar( rar.concat("immensi") )
setUno( 33 )
}
return(
<div>
<div>Updated array on click {rar}</div>
<div>Number state changes {uno}</div>
<button className='btn btn-outline-primary' onClick={innio}>
More
</button>
</div>
)
}
useState() after onClick()
We can pass the useState() and its setter function as props:
//and use the setter function to change the useState
const [versus, setVersus] = useState(false)
<GameStart
versus={versus}
setVersus={setVersus}
/>
<button className="btn btn-danger ms-1" disabled={props.versus}
onClick={ ()=> props.setVersus(true) }>
Stand
</button>
React useEffect with setInterval()
We use the useEffect(function, dependency)hook to synchronize a component with an external variable.
//useEffect triggers on render, with the setState() change being a render
//the setTimeout continues, we use empty [] dependency to render it once
let [esempio, setEsempio]= useState(0)
useEffect(() => {
setTimeout(() => {
setEsempio((esempio) => esempio + 1);
}, 1000);
}, [] );
<div>aumentiamo di uno qui {esempio}</div>
When a dependency state changes the useEffect renders:
useEffect with dependency useState
We need 2 states, one for the dependency change and the other for the javascript expression.
//When the count1 state changes onClick() the useEffect updates the
//calculation1 state and we render the javascript expressions
const [count1, setCount1] = useState(0);
const [calculation1, setCalculation1] = useState(0);
useEffect( () =>{
setCalculation1(()=> Math.pow(count1, 2) - count1*2 )
}, [count1])
<button className="btn btn-outline-success"
onClick={()=> setCount1((c)=> c + 1)} >
aggiungi
</button>
<p>
We did {Math.pow(count1, 2)} subtracting {count1*2} and got {calculation1}
</p>
useEffect function rendering after onClick state
We can implement javascript expression using ternary-operators for DOM content:
//we need to use {` ${``} `} for strings
<button className={`btn btn-${ lancetta ? `danger`: `success` }`}
onClick={()=> setLancetta((w)=> !w ) }
>
{lancetta ? "pause" : "start" }
</button>
//for variables we don't need ""
const [texto, setTexto] = useState("start")
<button>{lancetta ? texto : "no button" }</button>
We can also use && to render React components:
//Similar to a ternary-operator but without the else, won't render if no condition
{record &&
<h4>This is rendered only if condition</h4>
}
We can use a useEffect() hook to start/pause a setInterval(), to do so we need 2 useState() dependencies.
One for the onClick() starter event and another for the useState() time-limit we want to use to stop it
//We need the return clearTimeout() to limit the setInterval() to once at the time
//We use the lancetta to true/false the useEffect setInterval()
//and we use the other dependency useState() to stop it with clearInterval()
const [tempato, setTempato] = useState(0)
const [lancetta, setLancetta] = useState(false)
let interval;
useEffect( ()=>{
if(lancetta){
interval= setInterval( ()=>{
setTempato((temp)=> temp + 1)
}, 500)
}
if( tempato == 10 ){
setLancetta( false )
clearInterval(interval)
}
return () =>{
clearInterval(interval)
}
}, [lancetta, tempato] )
useEffect dependency used with setInterval()
We can also trigger setInterval() and clearInterval() using the same dependency in the useEffect condition:
Reset/Restart single button with useEffect
The stop/pause button will reset the current seconds but not the setInterval(), for that we use the reset button.
We use useEffect() conditionals to trigger the setInterval().
We reset(seconds), and we clearInterval() but we also re-start, by using setIsActive(!isActive) to trigger the useEffect() conditional again while keeping the gradi counter.
We stop seconds and active using reset().
//We need to include both triggers and state counters in the dependencies
const [seconds, setSeconds] = useState(0);
const [gradi, setGradi] = useState(0)
const [isActive, setIsActive] = useState(false);
function reset() {
setSeconds(0);
setIsActive(false);
}
useEffect(() => {
let interval = null;
if (isActive) {
interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
setGradi(gradi => gradi + 1)
}, 500);
} else if (!isActive && seconds !== 0) {
clearInterval(interval);
setSeconds(0)
setIsActive(!isActive);
}
return () => {
clearInterval(interval);
}
}, [isActive, seconds, gradi]);
start/reset/re-start on single button
Including a function inside useEffect() dependencies will Error: This dependency changes on every render.
We clean-up event at the end of useEffect() to avoid memory leaks; events can still be running when the component unmounts, this avoid re-remders.
//The intersectionObserver is not an action that needs to be clean up
useEffect(() => {
const intervalId = setInterval(() => {
setCounter((prevCounter) => prevCounter + 1);
}, 1000);
const timeoutId = setTimeout(() => {
setCounter(0);
}, 5000);
return () => {
clearInterval(intervalId);
clearTimeout(timeoutId);
};
}, []);
We use the React Hook useCallback() to call the function only when Its dependency changes.
//We call also include the entire function within useEffect() without useCallback()
const [message, setMessage] = useState('');
const createOptions = useCallback(() => {
return {
serverUrl: 'https://localhost:1234',
roomId: roomId
};
}, [roomId]); //✅ Only changes when roomId changes
useEffect(() => {
const options = createOptions();
return () => options();
}, [createOptions]); //✅ Only changes when createOptions changes
To implement font-awesome in Reactjs we:
//First we install its npm
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome
npm i @fortawesome/free-brands-svg-icons
//then we import and use it
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStopwatch } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from "@fortawesome/free-brands-svg-icons";
<h1> Welcome to the store
<FontAwesomeIcon icon={faStopwatch} />
</h1>
To deploy a Reactjs app GitHub repository on Netlify we edit the package.json:
//so it can be deployed even if it has warnings
"scripts": {
"start": "react-scripts start",
"build": "CI=false react-scripts build",
"test": "react-scripts test"
}
//Change also the Netlify deploy config, with spaces
CI=false npm run build
ReactJs forms, inputs, and submit
We render input controlled-components using useState() and callback functions.
//onChange() will trigger for each type in the input
const [reminder, setReminder] = useState("");
function handleChange1(e) {
e.preventDefault();
setName(e.target.value);
}
<form>
<input
type="text"
name="reminder"
value={reminder}
onChange={handleChange}
/>
</form>
<p>Inserted text {reminder}</p>
//the input value will be rendered as a useState()
Complete form, input and submit ReactJS
On the DOM, we add the onSubmit() attribute to the <form> component.
//We use the same callback function for all inputs
//the onSubmit() will trigger for any button pressed within <form>
<form onSubmit={mandasotto}>
<input
type="text"
placeholder="Chillin"
name="reminder"
value={reminder}
onChange={handleChange}
/>
<input
type="text"
placeholder="mail"
name="email"
value={email}
onChange={handleChange}
/>
<input
type="password"
placeholder="pass "
name="password"
value={password}
onChange={handleChange}
/>
<p>Text being: {reminder}, email: {email}, password: {password} </p>
<button className="btn btn-warning">Submit</button>
</form>
We use target.name to select which useState() gets which target.value to render.
While onSubmit() we print the current useStates().
We can also render uncontrolled input components, using the useRef hook, we set the callback function and the useState outside of the input component
//We set the ref={} on the input and then use it in useEffect
const [name, setName] = useState('Ravi');
const input = useRef();
useEffect(() => {
input.current.onkeyup = handleChange1;
input.current.value = name;
});
function handleChange1(e) {
e.preventDefault();
setName(e.target.value);
}
<div>
Name:
<input type='text' ref={input} />
</div>
<div>Name is: {name}</div>
Class component, useState() and fetch()
Apart from function components, there are also Class components.
We need the component React hook and the render(){} method for the DOM.
//Class components are the older type of React components
//we implements functions like this.methods
import React, {Component} from "react"
class Num extends Component{
lude = () =>{
console.log("kinda we got")
}
render() {
return (
<div>
<h1>I can smell your</h1>
<button className="btn btn-warning" onClick={this.lude}>super</button>
</div>
)
}
}
export default Num
Class components with useState(), setState() and external component
We can't use the useState() hook in a class component, we can initialize multiple useState() in the state object.
We use a this.method with a callback function to setState().
