React Inngangsorð: Byggðu þitt fyrsta notendaviðmót frá grunni

React er JavaScript bókasafn til að byggja notendaviðmót. Það er þróað og viðhaldið af Facebook og er orðið eitt af vinsælustu verkfærunum í framendaþróun. Þessi leiðarvísir mun leiða þig frá grunni, skref fyrir skref, til að skilja grunnhugtök React og byggja einfalt notendaviðmót.

Hvers vegna að velja React?

React hefur eftirfarandi kosti:

• Íhlutun: React brýtur notendaviðmótið niður í sjálfstæða, endurnýtanlega íhluti. Þetta gerir kóðann auðveldari í viðhaldi og skilningi.
• Yfirlýsingarstíll: React notar yfirlýsingarstíl í forritun, sem þýðir að þú þarft aðeins að lýsa því sem þú vilt birta og React sér um uppfærslur og birtingu sjálfkrafa.
• Skilvirkt: React notar sýndar DOM og snjalla diff reiknirit, sem gerir það kleift að uppfæra notendaviðmótið á skilvirkan hátt og draga úr óþarfa birtingu.
• Stór samfélagsstuðningur: React hefur stórt samfélag og ríkt vistkerfi, þú getur fundið mikið af kennsluefni, bókasöfnum og verkfærum til að hjálpa þér við þróun.
• Þverpalla geta: React Native gerir þér kleift að nota React til að þróa innfæddar farsímaforrit (iOS og Android).

Undirbúningur

Áður en þú byrjar þarftu að ganga úr skugga um að þú hafir eftirfarandi verkfæri uppsett á tölvunni þinni:

• Node.js: Node.js er JavaScript keyrsluumhverfi til að keyra React þróunarverkfæri. Þú getur hlaðið því niður og sett það upp frá https://nodejs.org/.
• npm eða yarn: npm (Node Package Manager) og yarn eru JavaScript pakkastjórar til að setja upp og stjórna háðum hlutum React. Venjulega er npm sett upp ásamt Node.js. Hægt er að setja yarn upp frá https://yarnpkg.com/.

Búðu til þitt fyrsta React forrit

Við munum nota create-react-app til að búa til React verkefni fljótt.

1. Búðu til með npm:

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

2. Búðu til með yarn:

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

Eftir að hafa keyrt ofangreindar skipanir mun create-react-app sjálfkrafa búa til möppu sem heitir my-first-react-app og frumstilla React verkefni í þeirri möppu. Skipunin npm start eða yarn start mun ræsa þróunarþjóninn og þú getur heimsótt http://localhost:3000 í vafranum þínum til að skoða React forritið þitt.

Möppuskipan

Möppuskipan verkefnisins sem create-react-app býr til er sem hér segir:

my-first-react-app/
├── node_modules/         # Bókasöfn sem verkefnið er háð
├── public/               # Static auðlindir (eins og HTML skrár)
│   ├── index.html        # Aðgangs HTML skrá forritsins
│   └── ...
├── src/                  # React frumkóði
│   ├── App.css           # CSS stílar fyrir App hlutann
│   ├── App.js            # App hlutinn
│   ├── App.test.js       # Prófunarskrá fyrir App hlutann
│   ├── index.css         # Almennir CSS stílar
│   ├── index.js          # Aðgangs JavaScript skrá forritsins
│   ├── logo.svg          # React lógó
│   └── ...
├── .gitignore            # Git hunskrá
├── package.json          # Lýsigögn og háðir hlutir verkefnisins
├── README.md             # Lýsing á verkefninu
└── yarn.lock             # Skrá sem læsir útgáfum af háðum hlutum (ef yarn er notað)

Skilningur á React Hlutum

React forrit eru byggð upp af hlutum. Hlutir eru sjálfstæðir, endurnýtanlegir kóðabútar sem eru notaðir til að birta ákveðna hluta notendaviðmótsins.

Í src/App.js skránni geturðu séð sjálfgefinn App hlut:

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;

Útskýring á kóða:

• import React from 'react'; Flytur inn React bókasafnið.
• function App() { ... } Skilgreinir fallhlut sem heitir App.
• return ( ... ) Skilar JSX tjáningu sem lýsir því hvað hluturinn á að birta.
• export default App; Flytur út App hlutann til að hægt sé að nota hann í öðrum skrám.

JSX (JavaScript XML)

JSX er JavaScript setningafræðilegri viðbót sem gerir þér kleift að skrifa HTML-líkan kóða í JavaScript kóðanum þínum. Í dæminu hér að ofan er ... JSX tjáning. JSX kóði er umbreyttur af Babel í venjulegan JavaScript kóða, svo vafrinn geti skilið hann.

Breyting á App Hlutnum

Við skulum breyta App hlutnum til að búa til einfaldan teljara.

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 (
    
      

# Teljari

      Núverandi telja: {count}

      +
      -
    
  );
}

export default App;

Breytingar:

• import React, { useState } from 'react'; Flytur inn useState Hook. useState er React Hook sem er notað til að bæta ástandi við virknihluti.
• const [count, setCount] = useState(0); Notar useState Hook til að búa til ástandisbreytu sem heitir count og frumstillir hana í 0. setCount er virkni til að uppfæra count ástandið.
• const increment = () => { setCount(count + 1); }; Skilgreinir virkni sem heitir increment til að bæta 1 við count ástandið.
• const decrement = () => { setCount(count - 1); }; Skilgreinir virkni sem heitir decrement til að draga 1 frá count ástandinu.
• Núverandi telja: {count} Sýnir gildi count ástandsins á síðunni. {count} er JSX tjáning sem er notuð til að setja JavaScript breytur inn í JSX kóða.
• + og - búa til tvo hnappa, sem eru bundnir við increment og decrement virknina. onClick er atburðahöndlari sem er notaður til að keyra tilgreinda virkni þegar smellt er á hnappinn.

Eftir að hafa vistað src/App.js skrána mun vafrinn endurnýjast sjálfkrafa og þú munt sjá einfaldan teljara. Að smella á "+" hnappinn mun auka teljarann, að smella á "-" hnappinn mun minnka teljarann.

Notkun CSS stíla

Þú getur notað CSS til að fegra React forritið þitt. create-react-app styður CSS Modules og venjulegar CSS skrár.

Notkun CSS Modules:

CSS Modules leyfa þér að búa til sjálfstæða CSS stíla fyrir hvern hluta, til að forðast stílaátök. Til að nota CSS Modules í hluta þarftu að búa til skrá sem endar á .module.css.

Til dæmis, búðu til skrá sem heitir App.module.css og bættu við eftirfarandi CSS stílum:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Flyttu síðan inn CSS Modules í src/App.js skránni:

import React, { useState } from 'react';
import styles from './App.module.css'; // Flytja inn CSS Modules

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

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

  return (
     {/* Notar styles hlutinn til að vísa í CSS klasa */}
      

# Teljari

      Núverandi tala: {count}

      +
      -
    
  );
}

export default App;

Notkun venjulegrar CSS skráar:

Þú getur einnig notað venjulega CSS skrá til að skilgreina alþjóðleg stíl. Í src/index.css skránni geturðu skilgreint alþjóðleg stíl.

Til dæmis, bættu við eftirfarandi CSS stíl:

body {
  font-family: sans-serif;
}

Þessi stíll verður notaður á body elementið í öllu forritinu.

Næsta skref

Til hamingju, þú hefur lokið við fyrsta React forritið þitt! Næst geturðu lært meira um React, til dæmis:

• Samskipti íhluta: Lærðu hvernig á að láta mismunandi íhluti eiga samskipti sín á milli.
• Formvinnslu: Lærðu hvernig á að búa til og vinna með form.
• Beiningar (Routing): Lærðu hvernig á að nota React Router til að búa til fjölsíðuforrit.
• Redux eða Context API: Lærðu hvernig á að stjórna stöðu forritsins.
• Hooks: Kafaðu dýpra í React Hooks, eins og useEffect, useContext o.s.frv.

Mundu að React er tækni sem krefst stöðugrar æfingar og náms. Gangi þér vel með námið!