React Base | Khurram Bashir

JSX

Con JSX possiamo creare elementi HTML direttamente in JavaScript e integrarli nel DOM, eliminando la necessità dei metodi createElement() e appendChild().
JSX ha la capacità di modificare i tag HTML in elementi React.


1const element = <h1>Hello World</h1>
2ReactDOM.createRoot(
3	document.getElementById('root')
4).render(element)

React Components

I componenti in React sono come pezzi di codice autonomi e riutilizzabili. Esistono due tipi di componenti, noti come componenti Classe e Funzione.

Questi componenti sono come singoli elementi costitutivi che possono essere utilizzati per costruire un'intera pagina Web o un'app.


1function Component() {
2	return <h2>Hello World</h2>
3}
4ReactDOM.createRoot(
5	document.getElementById('root')
6).render(<Component />)

React Props

Props in React sono come i dettagli forniti a pezzi di codice autonomi, simili a come imposteresti le caratteristiche negli elementi del sito web.

Vengono utilizzati nello stesso modo in cui specifichi un attributo durante la creazione di un elemento nel DOM.


1function Component(props) {
2	return <h1>Hello {props.name}</h1>
3}
4ReactDOM.createRoot(
5	document.getElementById('root')
6).render(<Component name="*World*" />)

Handling Events

In React, le azioni possono essere eseguite in base alle interazioni dell'utente come fare clic o spostare il mouse. Queste interazioni vengono chiamate eventi.

Questi eventi sono scritti in modo leggermente diverso in React: utilizzano un mix di lettere minuscole e maiuscole (camelCase), come onClick invece di onclick.


1function Component() {
2	return (
3		<button onClick={() => alert("Hello World")}>
4			Click ME
5		</button>
6	)
7}
8
9ReactDOM.createRoot(
10	document.getElementById('root')
11).render(<Component />)

'if' Statement

Puoi scegliere di mostrare diverse parti della tua app in base a certe condizioni.
Un modo per farlo è usare un ‘if’.


1function Component(props) {
2	let message;
3	if (props.isLoggedIn) {
4		message = 'Welcome back!';
5	} else {
6		message = 'Please sign in.';
7	}
8    
9	return <h1>{message}</h1>;
10}
11
12ReactDOM.createRoot(
13	document.getElementById('root')
14).render(<Component />)

Ternary Operator

È inoltre possibile utilizzare un operatore ternario per il rendering condizionale degli elementi.


1function Component(props) {
2	return (
3		<h1>
4			{props.isLoggedIn
5				? "Welcome back!"
6				: 'Please sign in.'
7			}
8		</h1>
9	)
10}
11
12ReactDOM.createRoot(
13	document.getElementById('root')
14).render(<Component />)

Logical && Operator

Puoi anche decidere di mostrare parti della tua app in base a determinate condizioni utilizzando qualcosa chiamato operatore &&, simile a prendere una decisione in base al fatto che una condizione sia soddisfatta.


1function Component(props) {
2	return (
3		<h1>
4			{props.showMessage && <p>Hello World!</p>}
5		</h1>
6	)
7}
8
9ReactDOM.createRoot(
10	document.getElementById('root')
11).render(<Component showMessage={true} />)

Liste

In React, le liste vengono visualizzati utilizzando un processo che si ripete per ciascun elemento, spesso utilizzando il metodo map() degli array in javascript.

Ogni elemento ha una "key" univoca per tenere traccia delle modifiche, consentendo l'aggiornamento solo dell'elemento modificato, non dell'intera lista. Le chiavi devono essere univoche nel relativo elenco, ma possono ripetersi in elenchi separati.


1function Component() {
2	return (
3		<ul>
4			{[1, 2, 3].map(num =>
5				<li key={num}>{num}</li>
6			)}
7		</ul >
8	)
9}
10
11
12ReactDOM.createRoot(
13	document.getElementById('root')
14).render(<Component />)