Tutorialul Ultimate React: construirea primului dvs. aplicare …

React, o bibliotecă JavaScript dezvoltată de Facebook, a transformat modul în care construim interfețe de utilizator. Arhitectura sa bazată pe componente o face favorită în rândul dezvoltatorilor, permițându-le să creeze aplicații web dinamice cu ușurință. În acest tutorial, vom construi o aplicație simplă de la zero, ghidându -vă prin etapele esențiale ale utilizării React.

Cuprins

1. Introducere pentru a reacționa
2. Configurarea mediului dvs. de dezvoltare
3. Crearea primei aplicații React
4. Înțelegerea componentelor
5. Gestionarea statului și a recuzitării
6. Manipularea evenimentelor
7. Construirea unei aplicații simple de a face
8. Concluzie

1. Introducere pentru a reacționa

React permite dezvoltatorilor să creeze componente UI reutilizabile, promovând un proces de dezvoltare mai eficient. Excelsează în crearea de aplicații cu o singură pagină (SPA), unde pagina nu se reîncărcă. DOM -ul virtual al REACT actualizează doar părțile paginii web care se schimbă, asigurând performanțe lină și rapide.

2. Configurarea mediului dvs. de dezvoltare

Înainte de a începe codificarea, asigurați -vă că aveți Node.js instalat pe mașina dvs. Îl puteți descărca din Nod.js.

Odată ce Node.js este instalat, urmați acești pași pentru a configura mediul React:

1. Instalați aplicația Create React: Acest instrument stabilește tot ce ai nevoie pentru o aplicație React.

   npx create-react-app my-first-app
   
   cd my-first-app

2. Începeți serverul dvs. de dezvoltare:

   npm start

   Aplicația dvs. ar trebui să funcționeze acum http: // localhost: 3000!

3. Crearea primei aplicații React

În src dosar, veți găsi un App.js fişier. Aici veți scrie codul aplicației. Conținutul implicit arată astfel:

import React from 'react';



function App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1>Welcome to My First React App!</h1>

      </header>

    </div>

  );

}



export default App;

Simțiți -vă liber să modificați titlul și să adăugați ceva stil App.css.

4. Înțelegerea componentelor

Componentele sunt blocurile de construcție ale unei aplicații React. Fiecare componentă este o funcție JavaScript sau o clasă care returnează o bucată din UI. Puteți crea componente funcționale precum App sau utilizați componente bazate pe clasă, dacă este necesar.

Crearea unei componente noi

Să creăm un Greeting componentă:

1. Creați un nou fișier numit Greeting.js în src pliant.
2. Adăugați următorul cod:

import React from 'react';



const Greeting = () => {

  return <h2>Hello, User!</h2>;

};



export default Greeting;

1. Acum, importați -l și utilizați -l în App.js:

import React from 'react';

import Greeting from './Greeting';



function App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1>Welcome to My First React App!</h1>

        <Greeting />

      </header>

    </div>

  );

}

5. Gestionarea statului și a recuzitării

Stat

Starea permite componentelor să gestioneze datele dinamice. Puteți gestiona starea folosind useState cârlig:

import React, { useState } from 'react';



const Counter = () => {

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



  return (

    <div>

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

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

    </div>

  );

};

Recuzită

Prop -urile sunt utilizate pentru a transmite date de la o componentă la alta. De exemplu, actualizați Greeting componentă pentru a accepta un nume de nume:

const Greeting = ({ name }) => {

   return <h2>Hello, {name}!</h2>;

};



// Passing prop in App.js

<Greeting name="User" />

6. Evenimente de manipulare

Puteți gestiona evenimente în React folosind manipulatori de evenimente. Să adăugăm un buton la Greeting componentă pentru a schimba numele:

const Greeting = () => {

  const (name, setName) = useState("User");



  return (

    <div>

      <h2>Hello, {name}!</h2>

      <button onClick={() => setName("React Lover")}>Change Name</button>

    </div>

  );

};

7. Construirea unei aplicații simple de a face

Să punem totul împreună pentru a crea o aplicație simplă de a face.

Pasul 1: Creați componenta de a face

Creați un nou fișier numit Todo.js:

import React, { useState } from 'react';



const Todo = () => {

  const (input, setInput) = useState('');

  const (todos, setTodos) = useState(());



  const addTodo = () => {

    setTodos((...todos, input));

    setInput('');

  };



  return (

    <div>

      <input 

        type="text" 

        value={input} 

        onChange={(e) => setInput(e.target.value)} 

      />

      <button onClick={addTodo}>Add Todo</button>

      <ul>

        {todos.map((todo, index) => (

          <li key={index}>{todo}</li>

        ))}

      </ul>

    </div>

  );

};



export default Todo;

Pasul 2: Utilizați componenta de a face în App.js

import React from 'react';

import Todo from './Todo';



function App() {

  return (

    <div className="App">

      <header className="App-header">

        <h1>My To-Do List</h1>

        <Todo />

      </header>

    </div>

  );

}



export default App;

8. Concluzie

Felicitări! Tocmai ai creat o aplicație React simplă. Ați aflat despre componente, stat, recuzită și manipulare a evenimentelor. Modelul bazat pe componente REACT permite codul scalabil și întreținut, ceea ce îl face un instrument puternic pentru construirea de aplicații web moderne.

Pașii următori

1. Explorați mai multe componente: Aflați despre componentele clasei și metodele ciclului de viață.
2. Stil: Integrați cadre CSS precum bootstrap sau componente stilate.
3. Rutare: Utilizați routerul React pentru a activa navigarea în aplicația dvs.
4. Preluarea datelor: Aflați cum să obțineți date din API -uri.

Cu această fundație, sunteți pe cale să deveniți un dezvoltator de reacție priceput. Codificare fericită!