Summary  
This chapter covers creating a React functional component that uses the useState hook to manage and update component state based on user input and renders a dynamic list of items.

General domain of usage  
Product listing page in a web application.

Seuraava tavoitteemme aiemmin rakennetun sovelluksen parissa on luoda "Products"-sivu. Tämä sivu toimii alustana, jolla näytetään `data.js`-tiedostosta saatavat tiedot ja mahdollistaa niiden käsittelyn.

Aloitamme luomalla `ProductsPage`-komponentin. Komponentin rakenne on seuraava:

```js
import React, { useState } from "react";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);

  const handleChange = (e) => {
    // Handle user input and update the state (companies in this case)
  };

  return (
    <>
      <input type="text" onChange={handleChange} />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

export default ProductsPage;
```

- Olemme luoneet React-komponentin nimeltä `ProductsPage`. Tämä komponentti on suunniteltu yrityslistan näyttämiseen;
- `useState`-hook alustaa `companies`-tilan. Tämä tila mahdollistaa komponentin hallita ja reagoida yrityslistan muutoksiin;
- `handleChange`-funktio on määritelty käsittelemään käyttäjän syötettä ja käynnistämään päivitykset syötteen perusteella.

Tämän `ProductsPage`-komponentin avulla voimme näyttää dynaamisen yrityslistan ja mahdollistaa käyttäjän vuorovaikutuksen datan kanssa.

Opi hallitsemaan navigointia React-sovelluksissa käyttämällä React Routeria. Ymmärrä URL-osoitteiden rakenne ja reitityksen merkitys verkkosovelluksissa. Ota käyttöön React Router monisivuisen sovelluksen luomiseksi, jossa dynaaminen sisältö perustuu URL-polkuun. Hyödynnä edistyneitä ominaisuuksia, kuten kyselymerkkijonoja ja URL-parametreja, sovelluksen tilan ja käyttäjän navigoinnin hallintaan.

Opi teoreettiset perusteet käsitteille kuten URL, verkkotunnus, protokolla, kyselyparametrit ja muut. Ymmärrä reitityksen merkitys verkkosovelluksissa sekä syyt React Router -kirjaston tarpeellisuudelle.

Opi luomaan kokonainen React-sovellus alusta alkaen, jossa sisällön näyttäminen mukautuu URL-osoitteen perusteella React Router -toiminnallisuuden avulla.

Perehdy kyselymerkkijonojen käyttöön sovelluksen tilan jakamisessa ja hallinnassa URL-osoitteiden kautta, työskentele erilaisten tietotyyppien kanssa kyselyparametreissa sekä hyödynnä React Routeria navigointiin ja URL-muutoksiin perustuvien vaikutusten hallintaan.

React-komponentin Käyttöönotto

Awesome!

React-komponentin Käyttöönotto