React praktiskais darbs aplikācijas instalācija un Multiplie komponenti

Šajā praktiskajā darbā izveidosim 3 kartes elementus React aplikācijā, tāpēc pirms šī darba uzsākšanas pārliecinieties, vai Jums ir svaigi instalēta react aplikācija Jūsu izvēlētajā mapē.

React jaunas aplikācijas instalācija

Es saviem darbiem izmantoju Visual Studio Code, tādēļ React aplikācijas instalācija ir vienkārša:

1. Uz desktop/darbvirsmas savā datorā izveidoju jaunu tukšu mapi un atveru to caur Visual Studio Code, lai turpinātu ar svaigas React aplikācijas instalāciju jau VSC (Visual Studio Code) terminālī, ko arī parādīšu nakošajos soļos:

2. Tālāk iekš VSC atveram termināli un instalējam jaunu React aplikāciju izmantojot sekojošās komandas:

• npx create-react-app aplikācijas-nosaukums / ar šo komandu tiek ierosināta jaunas aplikācijas inztalācija un piešķirts tai Jūsu dotais nosaukums
• cd aplikācijas-nosaukums / cd komanda ļauj no Jūsu izveidotās mapes, pāriet uz jaunizveidotās aplikācijas mapi, lai ar to varētu veikt turpākās nepieciešamās darbības terminālī
• npm start / ja izmantojāt iepriekš minēto cd komandu un aplikācijas nosaukumu un terminālis uzrāda, ka atrodaties savas aplikācijas mapē, tad ar šo komandu varat startēt savu aplikāciju, lai rakstot kodu varētu tajā redzēt savas veiktās izmaiņas.

3. Startējot aplikāciju Jūsu noklusējuma pārlūkprogrammā atvērsies aplikācijas vizualizācijas lapa jaunā pārlūka cilnē ar adresi localhost:3000

Un Jūsu pārlūkā redzams šāds rotējošs React simbols:

Tātad tagad, kad aplikācija veiksmīgi instalēta un pārlūkojama pārlūkā, mēs varam turpināt ar izmaiņu veikšanu tajā.

Instrukcijas praktiskajam darbam un darba gaida aplikācijas izveidošanai:

1. darbība

Šī uzdevuma sākumpunkts ir lietotnes komponenta h1 elements, kas uzdod: “Uzdevums: pievienojiet trīs kartes elementus”.

Tomēr šajā sākuma kodā nav kartes komponenta JS faila “Card.js”. Tāpēc pirmais uzdevums ir pievienot Card.js failu un tā iekšpusē deklarēt kartes funkciju.

Kad Card.js fails ir pievienots, tad tajā deklarējam jaunu funkciju:

function Card(props) {
    
};

2. darbība

Faila Card.js funkcijā Card pievienojiet atgriešanas paziņojumu ar divām iekavām aiz tā, lai ļautu atgriešanas paziņojumam izplatīties vairākās rindās.

function Card(props) {
    return (


    );
};

3. darbība

Atgriešanās return priekšrakstā pievienojiet iesaiņojuma wrapping div elementu.

function Card(props) {
    return (
        <div>
        </div>
    );
};

4. darbība

Iesaiņojuma div elementā pievienojiet elementu h2 un zem tā elementu h3.

function Card(props) {
    return (
        <div>
            <h2></h2>
            <h3></h3>
        </div>  
    );
};

5. darbība

Jau pievienotajam elementam h2 pievienojiet JSX izteiksmi: {props.h2}.

function Card(props) {
    return (
        <div className="card">
            <h2>{props.h2}</h2>
            <h3></h3>
        </div>
    );
};

6. darbība

Jau pievienotajam elementam h3 pievienojiet JSX izteiksmi: {props.h3}.

function Card(props) {
    return (
        <div className="card">
            <h2>{props.h2}</h2>
            <h3>{props.h3}</h3>
        </div>
    );
};

7. darbība

Neaizmirstiet faila Cards.js pašā apakšā pievienot koda rindiņu, kas nolasa eksportēšanas noklusējuma karti.

function Card(props) {
    return (
        <div className="card">
            <h2>{props.h2}</h2>
            <h3>{props.h3}</h3>
        </div>
    );
};


export default Card;

8. darbība

Atveriet lietotnes komponentu App.js, un aizstājiet tur esošo kodu ar sekojošo. Importējot kartes komponentu aplikācijas komponentā.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div>
            <h1>Pievieno trīs kartes elementus</h1>
        </div>
    );
};


export default App;

9. darbība

Lietotnes komponenta App.js atgriešanas priekšrakstā zem elementa h1 pievienojiet trīs <Card /> JSX elementus.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div>
            <h1>Pievieno trīs kartes elementus</h1>
            <Card />
            <Card />
            <Card />
        </div>
    );
};


export default App;

10. darbība

Pievienojiet h2 rekvizītu pirmajam elementam <Card />, piemēram: h2=”Pirmās kartes h2″.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div>
            <h1>Pievieno trīs kartes elementus</h1>
            <Card h2="Pirmās kartes h2" />
            <Card />
            <Card />
        </div>
    );
};


export default App;

11. darbība

Pievienojiet h3 rekvizītu pirmajam elementam <Card />, piemēram: h3=”Pirmās kartes h3″.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div>
            <h1>Pievieno trīs kartes elementus</h1>
            <Card h2="Pirmās kartes h2" h3="Pirmās kartes h3" />
            <Card />
            <Card />
        </div>
    );
};


export default App;

12. darbība

Pievienojiet h2 un h3 rekvizītus otrajam elementam <Card /> ar h2 rādījumu: “Otrās kartes h2” un h3 rādījumu “Otrās kartes h3”.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div>
            <h1>Pievieno trīs kartes elementus</h1>
            <Card h2="Pirmās kartes h2" h3="Pirmās kartes h3" />
            <Card h2="Otrās kartes h2" h3="Otrās kartes h3" />
            <Card />
        </div>
    );
};


export default App;

13. darbība

Pievienojiet h2 un h3 balstus trešajam elementam <Card /> ar h2 rādījumu: “Trešās kartes h2” un h3 rādījumu “Trešās kartes h3”.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div>
            <h1>Pievieno trīs kartes elementus</h1>
            <Card h2="Pirmās kartes h2" h3="Pirmās kartes h3" />
            <Card h2="Otrās kartes h2" h3="Otrās kartes h3" />
            <Card h2="Trešās kartes h2" h3="Trešās kartes h3" />
        </div>
    );
};


export default App;

14. darbība

Pievienojiet atribūtu className faila Card.js funkcijas Card atgriešanas paziņojuma iesaiņojuma div elementam.

import "./App.css";
import Card from "./Card";


function App() {
    return (
        <div className="App">
            <h1>Pievieno trīs kartes elementus</h1>
            <Card h2="Pirmās kartes h2" h3="Pirmās kartes h3" />
            <Card h2="Otrās kartes h2" h3="Otrās kartes h3" />
            <Card h2="Trešās kartes h2" h3="Trešās kartes h3" />
        </div>
    );
};


export default App;

15. darbība

Saglabājiet un skatiet lietotni pārlūkprogrammā.

Nobeigumā: Tātad esam izveidojuši React aplikācijas pamatu, kurā aizsākta 3 karšu izveide, kuras tālāk iespējams pilnveidot un stilizēt pievienojot tām CSS un papildinot kodu ar nepieciešamajiem elementiem.

Aizstājot šai aplikācijai sākotnēji esošo CSS kodu komponentā App.css ar savu uzrakstīto CSS izveidoju šādu rezultātu bet to droši iespējams papildināt un piešķirt citu izskatu, kā arī funkcionalitāti:

CSS kods, ar kuru aizstāju esošo App.css:

.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.Card {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px;
  padding: 20px;
  border: 2px solid black;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}


.Card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  filter: blur(10px);
  z-index: -1;
}


.Card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: -1;
}


.Card h2, .Card h3 {
  margin: 0;
  padding: 0;
  text-align: center;
}


.Card h2 {
  font-size: 24px;
}


.Card h3 {
  font-size: 18px;
}