React

Ülevaade

React on JavaScripti teek kasutajaliideste ehitamiseks. See mall kasutab Create React App-i (CRA), mis pakub mugavat seadistust Reacti õppimiseks ja kindlat alust ühe lehe rakenduste jaoks.

Kiirjuhend

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

npm install

npm start

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Kohalik arendus Dockeriga

Kui sul ei ole Node.js-i kohalikult paigaldatud, saad Reacti käskude käivitamiseks kasutada Dockerit.

Eeldused

Paigalda Docker Desktop oma operatsioonisüsteemi jaoks (Windows, Mac või Linux).

Käskude käivitamine Dockeriga

# Käivita npm install
docker run --rm -v $(pwd):/app -w /app node:18 npm install

# Käivita arendusserver (kättesaadav aadressil localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Ehita tootmise jaoks
docker run --rm -v $(pwd):/app -w /app node:18 npm run build

Projekti struktuur

Failide asukohtade mõistmine:

├── src/
│   ├── components/           # React komponendid
│   ├── hooks/                # Kohandatud React hookid
│   ├── pages/                # Lehekomponendid
│   ├── services/             # API teenused
│   ├── store/                # Reduxi salvestuse seadistus
│   ├── App.js                # Juurkomponent
│   ├── App.css               # Rakenduse stiilid
│   └── index.js              # Rakenduse sisendpunkt
├── public/                   # Staatilised failid
├── package.json              # Sõltuvused ja skriptid
├── tailwind.config.js        # Tailwind CSS seadistus
└── Dockerfile                # Dockeri ehitamise seadistus
        

Levinud ülesanded

Komponendi loomine

Loo .js failid kataloogis src/components/:

// src/components/Button.js
export default function Button({ label, onClick }) {
  return (
    <button
      className="bg-blue-500 text-white px-4 py-2 rounded"
      onClick={onClick}
    >
      {label}
    </button>
  );
}

React hookide kasutamine

Levinud hookid oleku ja kõrvalmõjude jaoks:

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

React Routeri kasutamine

React Router on navigatsiooni jaoks eelseadistatud:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Tailwind CSS-i kasutamine

Tailwind CSS on eelseadistatud. Kasuta klasse otse oma JSX-is:

<div className="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Kasulikud käsud

Tõrkeotsing

Juurutamise töövoog

Iga kord, kui saadad koodi Giti, ehitatakse ja juurutatakse sinu rakendus automaatselt:

Sinu juurutatud rakenduse URL järgib seda formaati:

https://<your-subdomain>-<repo-name>.<session-domain>

Näide: https://student01-module-a.demo.nstrim.app