React

Apžvalga

React yra JavaScript biblioteka vartotojo sąsajoms kurti. Šiame šablone naudojama Create React App (CRA), kuri suteikia patogų sąrankos variantą React mokymuisi ir tvirtą pagrindą vieno puslapio aplikacijoms.

Greitas startas

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

Vietinis kūrimas su Docker

Jei vietoje neturite įdiegto Node.js, galite naudoti Docker React komandoms vykdyti.

Reikalavimai

Įdiekite Docker Desktop savo operacinei sistemai (Windows, Mac arba Linux).

Komandų vykdymas su Docker

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

# Paleisti kūrimo serverį (pasiekiamas adresu localhost:3000)
docker run --rm -v $(pwd):/app -w /app -p 3000:3000 node:18 npm start

# Sukompiliuoti produkcijai
docker run --rm -v $(pwd):/app -w /app node:18 npm run build

Projekto struktūra

Kur yra failai:

├── src/
│   ├── components/           # React komponentai
│   ├── hooks/                # Pasirinktiniai React hooks
│   ├── pages/                # Puslapio komponentai
│   ├── services/             # API paslaugos
│   ├── store/                # Redux saugyklos konfigūracija
│   ├── App.js                # Šaknies komponentas
│   ├── App.css               # Aplikacijos stiliai
│   └── index.js              # Aplikacijos įėjimo taškas
├── public/                   # Statiniai failai
├── package.json              # Priklausomybės ir skriptai
├── tailwind.config.js        # Tailwind CSS konfigūracija
└── Dockerfile                # Docker kompiliavimo konfigūracija
        

Įprastos užduotys

Komponento kūrimas

Kurkite .js failus src/components/ kataloge:

// 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 Hooks naudojimas

Įprasti hooks būsenai ir šalutiniams efektams:

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 Router naudojimas

React Router yra iš anksto sukonfigūruotas navigacijai:

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 naudojimas

Tailwind CSS yra iš anksto sukonfigūruotas. Naudokite klases tiesiogiai savo JSX:

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

Naudingos komandos

Trikčių šalinimas

Diegimo eiga

Kiekvieną kartą, kai įkeliate kodą į Git, jūsų aplikacija automatiškai sukompiliuojama ir įdiegiama:

Jūsų įdiegtos aplikacijos URL atitinka šį formatą:

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

Pavyzdys: https://student01-module-a.demo.nstrim.app