Studieaza React

               React este o bibliotecă JavaScript populară pentru construirea de interfețe de utilizator, dezvoltată și menținută de Facebook. 

               Este folosită pe scară largă datorită eficienței și ușurinței în gestionarea componentelor UI. Iată un ghid pentru a începe cu React:

1. Înțelegerea bazelor React:
Ce este React?

React este o bibliotecă JavaScript pentru construirea de interfețe de utilizator. Este bazată pe component-based architecture, ceea ce înseamnă că aplicațiile React sunt construite din componente reutilizabile.
2. Resurse de inceput:
Documentație oficială:

React Official Documentation: React Documentation
Tutoriale și Cursuri OnlineCodecademy: Learn React
FreeCodeCamp: React Courses
Udemy: „React - The Complete Guide (incl Hooks, React Router, Redux)” de Maximilian Schwarzmüller
3. Instrumente și setări inițiale:
Instalarea Node.js și npm

React necesită Node.js și npm (Node Package Manager). Le poți descărca de pe nodejs.org.
Crearea unui proiect React:

Folosind Create React App, un tool oficial pentru configurarea unei aplicații :
npx create-react-app my-app

 cd my-app 

npm start

Aceasta va inițializa un nou proiect React și va porni serverul de dezvoltare.
4. Structura de bază a unui proiect React:

public/: Conține fișierele publice (index.html).
src/: Conține fișierele sursă (App.js, index.js, etc.).
components/: Aici poți crea și organiza componentele React.
5. Înțelegerea JSX:

JSX (JavaScript XML) este o extensie de sintaxă pentru JavaScript care permite scrierea de HTML în React:jsx:

const element = <h1>Hello, world!</h1>;

6. Componente React:
Componente funcționale și Clasă:

Componente Funcționale:jsx:

function Welcome(props) {

 return <h1>Hello, {props.name}</h1>; 

}
Componente Clasă:jsx:

class Welcome extends React.Component { 

 render() { 

 return <h1>Hello, {this.props.name}</h1>;

 }

 }

7. State și Props:

Props: Proprietăți transmise componentelor.
State: Stare locală a unei componente, gestionată în interiorul componentei.
Exemplu de utilizare a state-ului:
class Clock extends React.Component { 

 constructor(props) { 

 super(props);

 this.state = { date: new Date() }; 

 } 

 componentDidMount() { 

 this.timerID = setInterval(

 () => this.tick(), 

 1000

 );

 } 

 componentWillUnmount() {

 clearInterval(this.timerID); 

 } 

 tick() {

 this.setState({ 

 date: new Date()

 }); 

 } 

 render() {

 return ( 

 <div> 

 <h1>Hello, world!</h1>

 <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 

 </div>

 );

 }

 }

8. Utilizarea Hook-urilor:

Hook-urile sunt o modalitate nouă de a folosi starea și alte caracteristici React în componentele funcționale:

useState Hook:

import React, { useState } from 'react'; 

 function Example() { 

 const [count, setCount] = useState(0); 

 return (

 <div> 

 <p>You clicked {count} times</p> 

 <button onClick={() => setCount(count + 1)}>

 Click me 

 </button> 

 </div>

 );

}

 
useEffect Hook:

import React, { useState, useEffect } from 'react'; 

 function Example() { 

 const [count, setCount] = useState(0); 

 useEffect(() => {

 document.title = `You clicked ${count} times`; 

 }, [count]); 

 return (

 <div>

 <p>You clicked {count} times</p> 

 <button onClick={() => setCount(count + 1)}> 

 Click me 

 </button> 

 </div> 

 );

 }

9. Routing în React:

Utilizează React Router pentru navigarea între diferite pagini:

Instalare:
npm install react-router-dom
Utilizare:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

 function App() {

 return ( 

 <Router> 

 <div> 

 <Switch> 

 <Route path="/about">

 <About /> 

 </Route> 

 <Route path="/"> 

 <Home />

 </Route> 

 </Switch> 

 </div> 

 </Router>

 ); 

}

10. State Management:

Pentru aplicații mai complexe, poți folosi librării de gestionare a stării precum Redux sau Context API din React.

Redux:

Instalare:

npm install redux react-redux

 
Exemplu simplu:

import { createStore } from 'redux'; 

import { Provider } from 'react-redux';

 const initialState = { count: 0 }; 

 function reducer(state = initialState, action) { 

 switch (action.type) { 

 case 'INCREMENT': 

 return { count: state.count + 1 }; 

 default: 

 return state; 

 } 

} 

 const store = createStore(reducer); 

 function Counter() { 

 return ( 

 <Provider store={store}>

 <App />

 </Provider>

 ); 

}

11. Proiecte practice:

Creează un To-Do List cu adăugare, ștergere și marcarea sarcinilor ca complete.
Dezvoltă un simplu blog cu pagini pentru postări individuale.
Construiește un joc simplu (de exemplu, Tic-Tac-Toe).
12. Resurse suplimentare:
Bloguri și Site-uri Web:

React Blog: React Blog
Overreacted: Blog de Dan Abramov, co-creatorul Redux și dezvoltator React (overreacted.io)

Canale YouTubeThe Net Ninja: React Tutorials
Traversy Media: React Crash Course

              Prin utilizarea acestor resurse și urmarea acestor pași, vei putea învăța și aplica eficient cunoștințele tale în dezvoltarea aplicațiilor React. 

              Practicarea constantă și explorarea proiectelor te vor ajuta să devii un dezvoltator React competent.