Žingsnis 01

Šiame žingsnyje sukursime ir išbandysime pirmąjį React komponentą.

src/components kataloge sukurkite FeedbackList.js ir FeedbackList.css.

01.01 - paprastas komponentas

Naujam komponentui perduokime parametrus ir atvaizduokime komponento rezultatą.

failas: src/components/FeedbackList.js

import React from 'react';

export default function FeedbackList(props) {
  const content = <div>My first component with {props.msg}</div>;
  return content;
}

Kad pamatytume jį programėlėje, reiktų jį importuoti ir pridėti į App.js komponento turinį.

failas: src/App.js

import React from 'react';
import FeedbackList from './components/FeedbackList';

import './App.css';

function App() {
  return (
      <div>
        <FeedbackList msg="my custom message"/>
      </div>
  );
}
export default App;

Naršyklėje turėtumėte pamatyti, kad komponentas yra vaizduojamas, yra rodomas perduotas parametras.

01.02 - sudėtingesnis komponentas

FeedbackList.css faile sukurkime keletą paprastų stiliaus taisyklių:

failas: src/components/FeedbackList.css

.Feedback-List {
  background-color: aqua;
}
.Feedback-List-2 {
  border: 1px solid blue;
}

Išplėskime komponentą.

Perduokime daugiau parametrų, pridėkime logikos, atvaizdavimo kodo, importuokime stiliaus failą.

failas: src/components/FeedbackList.js

import React from 'react';

import './FeedbackList.css';

export default function FeedbackList({ msg, version = null }) {
  const classes = `Feedback-List Feedback-List-${version}`;
  return (
    <div className={classes}>
      <h1>My first component with {msg}</h1> 
      {version && (
        <p>This is v.{version}</p>
      )}
    </div>
  );
}

Pastebėkite ar po šio pakeitimo viskas rodoma (version naudojame, bet neturime perduotos reikšmės).

Dabar App komponento viduje mūsų sukurtam komponentui perduosime papildomą parametrą.

failas: src/App.js

// ..
-<FeedbackList msg="my custom message"/>
+<FeedbackList msg="my custom message" version={2}/>
// ..

Atkreipkite dėmesį koks vaizdas gaunasi pridėjus version reikšmę. Paanalizuokite komponento FeedbackList kodą ir pabandykite suprasti kodėl.

Svarbūs momentai

• import, export
• Functional components; Class components
• JSX in React render; Single, multiline JSX; Interpolation
• Props; Props object decomposition
• Component lifecycle (vėliau)
• Adding style
• Single root component, multiple root components
• Default function parameters