Reactin aloitusopas: Rakenna ensimmäinen käyttöliittymäsi alusta alkaen

# Reactin aloitusopas: Rakenna ensimmäinen käyttöliittymäsi alusta alkaen

React on JavaScript-kirjasto käyttöliittymien rakentamiseen. Sen on kehittänyt ja ylläpitää Facebook, ja siitä on tullut yksi suosituimmista työkaluista frontend-kehityksessä. Tämä opas opastaa sinut alusta alkaen, askel askeleelta, ymmärtämään Reactin peruskäsitteet ja rakentamaan yksinkertaisen käyttöliittymän.

## Miksi valita React?

Reactilla on seuraavat edut:

* **Komponenttipohjainen:** React jakaa käyttöliittymän itsenäisiin, uudelleenkäytettäviin komponentteihin. Tämä helpottaa koodin ylläpitoa ja ymmärtämistä.
* **Deklaratiivinen:** React käyttää deklaratiivista ohjelmointityyliä, mikä tarkoittaa, että sinun tarvitsee vain kuvata, mitä haluat esittää, ja React hoitaa päivitykset ja renderöinnin automaattisesti.
* **Tehokas:** React käyttää virtuaalista DOMia ja älykästä diff-algoritmia, joka pystyy päivittämään käyttöliittymän tehokkaasti ja vähentämään tarpeetonta renderöintiä.
* **Laaja yhteisön tuki:** Reactilla on laaja yhteisö ja rikas ekosysteemi, josta löydät runsaasti opetusohjelmia, kirjastoja ja työkaluja, jotka auttavat sinua kehittämään.
* **Alustojen välinen kyvykkyys:** React Native mahdollistaa natiivien mobiilisovellusten (iOS ja Android) kehittämisen Reactilla.

## Valmistelut

Ennen aloittamista sinun on varmistettava, että tietokoneellesi on asennettu seuraavat työkalut:

* **Node.js:** Node.js on JavaScript-suoritusympäristö, jota käytetään React-kehitystyökalujen suorittamiseen. Voit ladata ja asentaa sen osoitteesta [https://nodejs.org/](https://nodejs.org/).
* **npm tai yarn:** npm (Node Package Manager) ja yarn ovat JavaScript-pakettienhallintaohjelmia, joita käytetään Reactin riippuvuuksien asentamiseen ja hallintaan. Yleensä npm asennetaan Node.js:n asennuksen yhteydessä. yarn voidaan asentaa osoitteesta [https://yarnpkg.com/](https://yarnpkg.com/).

## Luo ensimmäinen React-sovelluksesi

Käytämme `create-react-app` -ohjelmaa React-projektin luomiseen nopeasti.

1. **Luo npm:llä:**

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

2. Luo yarnilla:

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

Kun olet suorittanut yllä olevat komennot, create-react-app luo automaattisesti hakemiston nimeltä my-first-react-app ja alustaa React-projektin kyseiseen hakemistoon. npm start tai yarn start -komento käynnistää kehityspalvelimen, ja voit tarkastella React-sovellustasi selaimessa osoitteessa http://localhost:3000.

Hakemistorakenne

create-react-app -ohjelman luoman projektin hakemistorakenne on seuraava:

my-first-react-app/
├── node_modules/         # Projektin riippuvuuskirjastot
├── public/               # Staattiset resurssit (esim. HTML-tiedostot)
│   ├── index.html        # Sovelluksen pääasiallinen HTML-tiedosto
│   └── ...
├── src/                  # React-lähdekoodi
│   ├── App.css           # App-komponentin CSS-tyylit
│   ├── App.js            # App-komponentti
│   ├── App.test.js       # App-komponentin testitiedosto
│   ├── index.css         # Globaalit CSS-tyylit
│   ├── index.js            # Sovelluksen pääasiallinen JavaScript-tiedosto
│   ├── logo.svg          # React-logo
│   └── ...
├── .gitignore            # Git-ohitustiedosto
├── package.json          # Projektin metatiedot ja riippuvuudet
├── README.md             # Projektin ohjedokumentaatio
└── yarn.lock             # Riippuvuuksien versiolukitustiedosto (jos käytössä yarn)
```

## React-komponenttien ymmärtäminen

React-sovellukset koostuvat komponenteista. Komponentit ovat itsenäisiä, uudelleenkäytettäviä koodilohkoja, joita käytetään renderöimään käyttöliittymän tiettyjä osia.

`src/App.js` -tiedostossa näet oletusarvoisen `App`-komponentin:

```javascript
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;
```

**Koodin selitys:**

* `import React from 'react';` Tuo React-kirjaston.
* `function App() { ... }` Määrittelee `App`-nimisen funktiokomponentin.
* `return ( ... )` Palauttaa JSX-lausekkeen, joka kuvaa, mitä komponentin tulisi renderöidä.
* `export default App;` Vie `App`-komponentin, jotta sitä voidaan käyttää muissa tiedostoissa.

**JSX (JavaScript XML)**

JSX on JavaScript-syntaksin laajennus, jonka avulla voit kirjoittaa HTML:n kaltaista koodia JavaScript-koodissa. Yllä olevassa esimerkissä `...` on JSX-lauseke. JSX-koodi muunnetaan Babelin avulla tavalliseksi JavaScript-koodiksi, jotta selain voi ymmärtää sen.

## App-komponentin muokkaaminen

Muokataan `App`-komponenttia ja luodaan yksinkertainen laskuri.

```javascript
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 (
    
      

# Laskuri

      Nykyinen lukumäärä: {count}

      +
      -
    
  );
}

export default App;
```

**Muokkausohjeet:**

* `import React, { useState } from 'react';` Tuo `useState` Hookin. `useState` on React Hook, jota käytetään tilan lisäämiseen funktiopohjaisiin komponentteihin.
* `const [count, setCount] = useState(0);` Luo `useState` Hookin avulla tilamuuttujan nimeltä `count` ja alustaa sen arvoon `0`. `setCount` on funktio, jota käytetään `count`-tilan päivittämiseen.
* `const increment = () => { setCount(count + 1); };` Määrittelee funktion nimeltä `increment`, jota käytetään `count`-tilan kasvattamiseen yhdellä.
* `const decrement = () => { setCount(count - 1); };` Määrittelee funktion nimeltä `decrement`, jota käytetään `count`-tilan vähentämiseen yhdellä.
* `Nykyinen lukumäärä: {count}
` Näyttää `count`-tilan arvon sivulla. `{count}` on JSX-lauseke, jota käytetään JavaScript-muuttujien lisäämiseen JSX-koodiin.
* `+` ja `-` Luo kaksi painiketta, jotka on sidottu `increment`- ja `decrement`-funktioihin. `onClick` on tapahtumakäsittelijä, jota käytetään määritetyn funktion suorittamiseen, kun painiketta napsautetaan.

Kun olet tallentanut `src/App.js` -tiedoston, selain päivittyy automaattisesti ja näet yksinkertaisen laskurin. Napsauttamalla "+" -painiketta lukumäärä kasvaa ja napsauttamalla "-" -painiketta lukumäärä pienenee.

## CSS-tyylien käyttäminen

Voit käyttää CSS:ää React-sovelluksesi ulkoasun parantamiseen. `create-react-app` tukee CSS-moduuleja ja tavallisia CSS-tiedostoja.

**CSS-moduulien käyttäminen:**

CSS-moduulien avulla voit luoda erillisiä CSS-tyylejä kullekin komponentille, mikä välttää tyylien ristiriitoja. Jos haluat käyttää CSS-moduuleja komponentissa, sinun on luotava tiedosto, jonka pääte on `.module.css`.

Luo esimerkiksi tiedosto nimeltä `App.module.css` ja lisää siihen seuraavat CSS-tyylit:

```css
.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Tuodaan sitten CSS-moduulit `src/App.js` -tiedostoon:

```javascript
import React, { useState } from 'react';
import styles from './App.module.css'; // Tuo CSS-moduulit

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

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

  return (
     {/* Käytä styles-objektia viittaamaan CSS-luokkiin */}
      

# Laskuri

      Nykyinen lukumäärä: {count}

      +
      -
    
  );
}

export default App;
```

**Yleisen CSS-tiedoston käyttäminen:**

Voit myös käyttää tavallista CSS-tiedostoa määrittääksesi yleisiä tyylejä. `src/index.css` -tiedostossa voit määrittää yleisiä tyylejä.

Lisää esimerkiksi seuraavat CSS-tyylit:

```css
body {
  font-family: sans-serif;
}
```

Tämä tyyli kohdistuu koko sovelluksen `body`-elementtiin.

## Seuraavat vaiheet

Onnittelut, olet suorittanut ensimmäisen React-sovelluksesi! Seuraavaksi voit oppia lisää Reactista, kuten:

* **Komponenttien välinen kommunikaatio:** Opi, miten eri komponentit voivat kommunikoida keskenään.
* **Lomakkeiden käsittely:** Opi, miten luoda ja käsitellä lomakkeita.
* **Reititys:** Opi luomaan monisivuisia sovelluksia React Routerin avulla.
* **Redux tai Context API:** Opi hallitsemaan sovelluksen tilaa.
* **Hooks:** Tutustu syvemmin React Hookseihin, kuten `useEffect`, `useContext` jne.

Muista, että React on tekniikka, joka vaatii jatkuvaa harjoittelua ja oppimista. Hyviä opintoja!