React Ievads: Izveidojiet Savu Pirmo Lietotāja Interfeisu No Nulles

React ir JavaScript bibliotēka, ko izmanto lietotāja interfeisu veidošanai. To ir izstrādājis un uztur Facebook, un tā ir kļuvusi par vienu no populārākajiem rīkiem front-end izstrādē. Šī rokasgrāmata palīdzēs jums no nulles soli pa solim apgūt React pamatjēdzienus un izveidot vienkāršu lietotāja interfeisu.

Kāpēc izvēlēties React?

React ir šādas priekšrocības:

• Komponentizācija: React sadala lietotāja interfeisu neatkarīgos, atkārtoti izmantojamos komponentos. Tas atvieglo koda uzturēšanu un sapratni.
• Deklaratīvs: React izmanto deklaratīvu programmēšanas stilu, kas nozīmē, ka jums vienkārši jāapraksta saturs, ko vēlaties attēlot, un React automātiski apstrādās atjauninājumus un renderēšanu.
• Efektīvs: React izmanto virtuālo DOM un viedo diff algoritmu, lai efektīvi atjauninātu lietotāja interfeisu, samazinot nevajadzīgu renderēšanu.
• Liels kopienas atbalsts: React ir liela kopiena un bagātīga ekosistēma, kurā varat atrast daudz pamācību, bibliotēku un rīku, kas palīdzēs jums izstrādāt.
• Starpplatformu iespējas: React Native ļauj izmantot React, lai izstrādātu vietējās mobilās lietotnes (iOS un Android).

Sagatavošanās darbi

Pirms sākt, jums jāpārliecinās, vai jūsu datorā ir instalēti šādi rīki:

• Node.js: Node.js ir JavaScript izpildlaika vide, ko izmanto React izstrādes rīku palaišanai. Varat to lejupielādēt un instalēt no https://nodejs.org/.
• npm vai yarn: npm (Node Package Manager) un yarn ir JavaScript pakotņu pārvaldnieki, ko izmanto React atkarību instalēšanai un pārvaldībai. Parasti npm tiek instalēts kopā ar Node.js. Yarn var instalēt no https://yarnpkg.com/.

Izveidojiet savu pirmo React lietotni

Mēs izmantosim create-react-app, lai ātri izveidotu React projektu.

1. Izveidojiet, izmantojot npm:

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

2. Izveidojiet, izmantojot yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Pēc iepriekš minēto komandu izpildes create-react-app automātiski izveidos direktoriju ar nosaukumu my-first-react-app un inicializēs React projektu šajā direktorijā. Komanda npm start vai yarn start palaidīs izstrādes serveri, un jūs varat apmeklēt http://localhost:3000 pārlūkprogrammā, lai apskatītu savu React lietotni.

Kataloga struktūra

create-react-app izveidotā projekta kataloga struktūra ir šāda:

my-first-react-app/
├── node_modules/         # Projekta atkarību bibliotēkas
├── public/               # Statiskie resursi (piemēram, HTML faili)
│   ├── index.html        # Lietotnes sākuma HTML fails
│   └── ...
├── src/                  # React pirmkods
│   ├── App.css           # App komponenta CSS stili
│   ├── App.js            # App komponents
│   ├── App.test.js       # App komponenta testa fails
│   ├── index.css         # Globālie CSS stili
│   ├── index.js          # Lietotnes sākuma JavaScript fails
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Git ignorēšanas fails
├── package.json          # Projekta metadati un atkarības
├── README.md             # Projekta dokumentācija
└── yarn.lock             # Atkarību versiju fiksācijas fails (ja tiek izmantots yarn)

React Komponentu Izpratne

React lietotnes sastāv no komponentiem. Komponenti ir neatkarīgi, atkārtoti izmantojami koda bloki, kas tiek izmantoti, lai renderētu lietotāja saskarnes konkrētas daļas.

Failā src/App.js jūs varat redzēt noklusējuma App komponentu:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Koda skaidrojums:

• import React from 'react'; Importē React bibliotēku.
• function App() { ... } Definē funkciju komponentu ar nosaukumu App.
• return ( ... ) Atgriež JSX izteiksmi, kas apraksta, kas komponentam jārenderē.
• export default App; Eksportē App komponentu, lai to varētu izmantot citos failos.

JSX (JavaScript XML)

JSX ir JavaScript sintakses paplašinājums, kas ļauj JavaScript kodā rakstīt kodu, kas līdzīgs HTML. Iepriekš minētajā piemērā ... ir JSX izteiksme. JSX kodu Babel pārveidos par standarta JavaScript kodu, lai pārlūkprogramma to varētu saprast.

App Komponenta Modificēšana

Modificēsim App komponentu, lai izveidotu vienkāršu skaitītāju.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Skaitītājs

      Pašreizējais skaitlis: {count}

      +
      -
    
  );
}

export default App;

Izmaiņu skaidrojums:

• import React, { useState } from 'react'; Importē useState Hook. useState ir React Hook, ko izmanto, lai funkciju komponentiem pievienotu stāvokli.
• const [count, setCount] = useState(0); Izmanto useState Hook, lai izveidotu stāvokļa mainīgo ar nosaukumu count un inicializētu to ar 0. setCount ir funkcija, ko izmanto, lai atjauninātu count stāvokli.
• const increment = () => { setCount(count + 1); }; Definē funkciju ar nosaukumu increment, ko izmanto, lai palielinātu count stāvokli par 1.
• const decrement = () => { setCount(count - 1); }; Definē funkciju ar nosaukumu decrement, ko izmanto, lai samazinātu count stāvokli par 1.
• Pašreizējais skaitlis: {count} Parāda count stāvokļa vērtību lapā. {count} ir JSX izteiksme, ko izmanto, lai JSX kodā ievietotu JavaScript mainīgos.
• + un - Izveido divas pogas, kas attiecīgi saista increment un decrement funkcijas. onClick ir notikumu apstrādātājs, ko izmanto, lai izpildītu norādīto funkciju, kad tiek noklikšķināts uz pogas.

Pēc src/App.js faila saglabāšanas pārlūkprogramma automātiski atsvaidzināsies, un jūs redzēsiet vienkāršu skaitītāju. Noklikšķinot uz pogas "+", skaitlis palielināsies, un noklikšķinot uz pogas "-", skaitlis samazināsies.

CSS stilu izmantošana

Jūs varat izmantot CSS, lai izdaiļotu savu React lietotni. create-react-app atbalsta CSS moduļus un parastos CSS failus.

CSS moduļu izmantošana:

CSS moduļi ļauj jums izveidot neatkarīgus CSS stilus katram komponentam, izvairoties no stila konfliktiem. Lai komponentā izmantotu CSS moduļus, jums jāizveido fails, kas beidzas ar .module.css.

Piemēram, izveidojiet failu ar nosaukumu App.module.css un pievienojiet tam šādus CSS stilus:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Pēc tam importējiet CSS moduļus failā src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importē CSS moduļus

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Izmanto styles objektu, lai atsauktos uz CSS klasēm */}
      

# Skaitītājs

      Pašreizējais skaitlis: {count}

      +
      -
    
  );
}

export default App;

Izmantojot parastu CSS failu:

Jūs varat arī izmantot parastu CSS failu, lai definētu globālos stilus. Failā src/index.css jūs varat definēt globālos stilus.

Piemēram, pievienojiet šādu CSS stilu:

body {
  font-family: sans-serif;
}

Šis stils tiks piemērots visam lietotnes body elementam.

Nākamais solis

Apsveicu, jūs esat pabeidzis savu pirmo React lietotni! Tālāk jūs varat uzzināt vairāk par React, piemēram:

• Komponentu komunikācija: Uzziniet, kā panākt, lai dažādi komponenti sazinātos savā starpā.
• Formu apstrāde: Uzziniet, kā izveidot un apstrādāt formas.
• Maršrutēšana: Uzziniet, kā izmantot React Router, lai izveidotu vairāku lapu lietotni.
• Redux vai Context API: Uzziniet, kā pārvaldīt lietotnes stāvokli.
• Hooks: Padziļināti izprotiet React Hooks, piemēram, useEffect, useContext utt.

Atcerieties, ka React ir tehnoloģija, kas prasa nepārtrauktu praksi un mācīšanos. Lai jums patīk mācīties!