Výukový program ReactJS pro začátečníky: Učte se s příkladem krok za krokem

Co je ReactJS?

ReactJS je open-source front-end JavaKnihovna skriptů pro vytváření uživatelských rozhraní. ReactJS je spravován Facebookem a komunitou jednotlivých vývojářů a společností. Je široce používán jako základ při vytváření jednostránkových webových stránek a mobilních aplikací. Je velmi snadno použitelný a umožňuje uživatelům vytvářet opakovaně použitelné komponenty uživatelského rozhraní.

Vlastnosti ReactJS

JSX: JSX je rozšířením javascriptu. Ačkoli není povinné používat JSX v reakci, je to jedna z dobrých funkcí a snadno se používá.

Komponenty: Komponenty jsou jako čistě javascriptové funkce, které pomáhají zjednodušit kód rozdělením logiky do opakovaně použitelného nezávislého kódu. Komponenty můžeme použít jako funkce a komponenty jako třídy. Komponenty mají také stav, rekvizity, které usnadňují život. Uvnitř třídy je udržován stav každé z rekvizit.

Virtuální DOM: React vytváří virtuální dom, tj. mezipaměť datové struktury v paměti. Pouze konečné změny DOM byly později aktualizovány v DOM prohlížečů.

Javascript Výrazy: Výrazy JS lze v souborech jsx použít pomocí složených závorek, například {}.

Výhody ReactJS

Zde jsou důležité výhody/výhody používání ReactJS:

ReactJS používá virtuální dom, který využívá mezipaměť datové struktury v paměti a v prohlížečích dom se aktualizují pouze poslední změny. Díky tomu je aplikace rychlejší.
Pomocí funkce komponenty Reagovat můžete vytvářet komponenty podle svého výběru. Komponenty mohou být znovu použity a také užitečné při údržbě kódu.
Reactjs je open-source javascriptová knihovna, takže je snadné s ní začít.
ReactJS se v krátké době stal velmi populární a udržovaný Facebookem a Instagramem. Používá jej mnoho slavných společností jako Apple, Netflix, Etc.
Facebook spravuje knihovnu ReactJS, takže je dobře udržována a aktualizována.
ReactJS lze použít k vývoji bohatého uživatelského rozhraní pro stolní i mobilní aplikace.
Snadné ladění a testování, protože většina kódování se provádí v Javascript spíše než na Html.

Nevýhody ReactJS

Zde jsou nevýhody/nevýhody používání ReactJS:

Většina kódu je napsána v JSX, tj. Html a css jsou součástí javascriptu, což může být docela matoucí, protože většina ostatních frameworků dává přednost ponechání Html odděleně od kódu javascriptu.
Velikost souboru ReactJS je velká.

Pomocí ReactJS z CDN

Abychom mohli začít pracovat s Reag, musíme nejprve nainstalovat Reagjs. Reagjs můžete snadno začít používat pomocí souborů javascriptu CDN, jak je uvedeno níže.

Přejděte na oficiální stránku Reagjs a získejte odkazy CDN, tj. https://reactjs.org/docs/cdn-links.html a získáte požadované soubory pro vysvětlení následujícího obrázku.

Pro dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Pro prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Nahradit verze s nejnovější verzí reakce pro Reag-development.js i Reag-dom.developement.js. Soubory můžete hostit na svém konci a začít pracovat s reaktjs.

V případě, že plánujete používat soubory CDN, nezapomeňte zachovat atribut cross-origin, abyste předešli problémům mezi doménami. Kód Reactjs nelze spustit přímo v prohlížeči a před spuštěním v prohlížeči je třeba jej převést pomocí Babel na javascript.

Zde je skript BabelJS, který lze použít:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Zde je pracovní příklad ReactJS s použitím souborů cdn a skriptu babeljs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Výstup:

Do podrobností kódu se dostaneme v další kapitole, podívejme se zde na práci se soubory CDN. Říká se, že používat přímo babel script není dobrá praxe a nováčci ho zatím mohou používat jen k tomu, aby se naučili reagovat. Ve výrobě budete muset nainstalovat reagovat pomocí balíčku npm.

Použití balíčků NPM

Ujistěte se, že máte nainstalovaný nodejs. Pokud není nainstalován, projděte si tento návod pro nodejs (https://www.guru99.com/node-js-tutorial.html) instalace.

Jakmile máte nodejs nainstalovaný, vytvořte složku reagovatproj/.

Chcete-li začít s nastavením projektu, spusťte příkaz npm init.

Takto bude vypadat struktura složek:

reactproj\
package.json

Nyní nainstalujeme balíčky, které potřebujeme.

Zde je seznam balíčků pro reaktjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Otevřete příkazový řádek a spusťte výše uvedené příkazy ve složce respondproj/.

Vytvořte složku src / kde do této složky přijde veškerý kód js. Veškerý kód pro projekt respondjs bude dostupný ve složce src/. Vytvořte soubor index.js a přidejte importovat reagovat a reagovat-dom, jak je znázorněno níže.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Vrátili jsme základní kód pro responsejs. Podrobnosti o něm vysvětlíme v další kapitole. Chceme ukázat Dobrý den, z Guru99 Tutorials a totéž je dáno prvku dom s id „root“. Je převzat ze souboru index.html, což je počáteční soubor, jak je uvedeno níže.

Vytvořte složku public/ a přidejte do ní index.html, jak je uvedeno níže

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Balíček reakce-scripts se postará o kompilaci kódu a spuštění serveru pro zobrazení html souboru, tj. index.html. Musíte přidat příkaz do package.json, který se postará o použití skriptů reakce ke kompilaci kódu a spuštění serveru, jak je uvedeno níže:

 "scripts": {
    "start": "react-scripts start" 
  }

Po instalaci všech balíčků a přidání výše uvedeného příkazu je výsledný soubor package.json následující:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Chcete-li zahájit testování reakce, spusťte příkaz

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

Otevře prohlížeč s url http://localhost:3000/ jak je uvedeno níže:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Stejný proces použijeme pro spuštění javascriptových souborů také v dalších kapitolách. Přidejte všechny své soubory js a .jsx do složky src/. Struktura souboru bude následující:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Jak vytvořit nastavení prvního projektu React

Zde je průvodce krok za krokem v tomto tutoriálu ReactJS, jak začít s aplikací první reakce.

Krok 1) Importujte balíčky reakcí.
1. Chcete-li začít s ReactJS, musíme nejprve importovat balíčky reakce následovně.

import React from 'react';	
import ReactDOM from 'react-dom';

2. Uložte soubor jako index.js do složky src/

Krok 2) Napište jednoduchý kód.
V tomto tutoriálu React JS napíšeme jednoduchý kód, ve kterém zobrazíme zprávu "Dobrý den, z tutoriálů Guru99!"

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render přidá tag k prvku s id root. Zde je soubor html, který máme:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Krok 3) Sestavte kodex.

Dále v tomto tutoriálu React.js musíme zkompilovat kód, abychom získali výstup v prohlížeči.

Zde je struktura složek:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Přidali jsme příkazy pro kompilaci konečného souboru v package.json následovně:

"scripts": {
    "start": "react-scripts start"
  },

Chcete-li zkompilovat konečný soubor, spusťte následující příkaz:

npm run start

Když spustíte výše uvedený příkaz, zkompiluje soubory a upozorní vás na nějakou chybu, pokud vše vypadá dobře, otevře prohlížeč a spustí soubor index.html na adrese http://localhost:3000/index.html

Příkaz: npm spuštění spuštění:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Krok 4) Zkontrolujte výstup.
URL http://localhost:3000 otevře se v prohlížeči, jakmile je kód zkompilován, jak je uvedeno níže:

Co je JSX?

JSX je rozšířením javascriptu. Jedná se o šablonový skript, kde budete mít sílu používat HTML a Javascript dohromady.

Zde je jednoduchý příklad kódu JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Proč potřebujeme JSX v Reactu?

Pro uživatelské rozhraní potřebujeme Html a každý prvek v dom bude mít události, které je třeba zpracovat, změny stavu atd.

V případě Reactu nám umožňuje využívat Html a javascript ve stejném souboru a efektivně se starat o změny stavu v domku.

Výrazy v JSX

Zde je jednoduchý příklad, jak používat výrazy v JSX.

V dřívějších příkladech ReactJS jsme napsali něco jako:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Nyní změníme výše uvedený kód a přidáme výrazy. Výrazy se používají ve složených závorkách {} a během běhu se rozbalují. Výrazy v reakci jsou stejné jako výrazy javascriptu.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Nyní totéž otestujeme v prohlížeči.

Vidíte, že výraz {display} není nahrazen. React neví, co dělat, když je v souboru .js použit výraz.

Nyní přidejte změny a vytvořte soubor .jsx, jak je znázorněno níže:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Přidali jsme požadovaný kód a použijeme soubor text.jsx v index.js. Chceme soubor h1tag proměnná, která se má použít v rámci skriptu script.js, takže se exportuje totéž, jak je uvedeno výše v souboru test.jsx

Zde je upravený kód v index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Chcete-li použít test.jsx v index.js, musíme jej nejprve importovat, jak je uvedeno níže:

import h1tag from './test.jsx';

Nyní můžeme použít h1tag v ReactDOM.render, jak je znázorněno níže:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Zde je výstup, když totéž zkontrolujeme v prohlížeči:

Co jsou komponenty v ReactJS?

Komponenty jsou jako čistě javascriptové funkce, které pomáhají zjednodušit kód rozdělením logiky na opakovaně použitelný nezávislý kód.

Komponenty jako funkce

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

Vytvořili jsme funkci tzv Ahoj který vrátil značku h1, jak je uvedeno výše. Název funkce funguje jako prvek, jak je uvedeno níže:

const Hello_comp = <Hello />;
export default Hello_comp;

Komponenta Ahoj se používá jako Html tag, tzn. a přiděleno Hello_comp a totéž se exportuje pomocí exportu.

Nyní použijeme tuto komponentu v souboru index.js, jak je uvedeno níže:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Zde je výstup v prohlížeči:

Třída jako komponenta

Zde je příklad ReactJS, který používá třídu jako komponentu.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Komponentu Hello v souboru index.js můžeme použít následovně:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Komponenta Hello se používá jako značka Html, tj. .

Zde je výstup téhož.

Co je to stát v ReactJS?

Stav je objekt javascriptu podobný rekvizitám, které mají data, která se mají použít s vykreslováním reaktjs. Stavová data jsou soukromý objekt a používají se v rámci komponent uvnitř třídy.

Příklad státu

Zde je pracovní příklad, jak používat stav uvnitř třídy.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Toto dostaneme, když to otestujeme v prohlížeči:

Co jsou rekvizity v ReactJS?

Podpěry jsou vlastnosti, které mají být použity uvnitř komponenty. Fungují jako globální objekt nebo proměnné, které lze použít uvnitř komponenty.

Podpěry k funkčnímu komponentu

Zde je příklad předání rekvizit funkční komponentě.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Jak je uvedeno výše, přidali jsme msg přisuzovat Komponent. Totéž lze přistupovat jako rekvizity uvnitř funkce Hello, což je objekt, který bude mít msg podrobnosti atributu a totéž se používá jako výraz.

Komponenta se v index.js používá následovně:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Zde je výstup v prohlížeči:

Rekvizity ke komponentě třídy

Pro přístup k rekvizitám ve třídě to můžeme udělat následovně:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Jedno msg atribut je předán komponentě v index.js takto:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Toto je výstup v prohlížeči:

Zkontrolujte také: - Výukový program AngularJS pro začátečníky: Naučte se AngularJS krok za krokem

Životní cyklus součásti

Životní cyklus součásti se dělí na fáze inicializace, montáž, aktualizace a odmontování.

Zde je podrobné vysvětlení každé komponenty.

Komponenta v reaktjs má následující fáze:

Inicializace: Toto je první fáze životního cyklu součásti.

Zde bude mít výchozí rekvizity a stav na počáteční úrovni.

Montáž: V této fázi je komponenta renderována uvnitř domku. V montážním stavu jsme vystaveni následujícím metodám.

componentDidMount(): Toto se také volá, když je komponenta právě přidána do dom.

render(): Tuto metodu máte pro všechny vytvořené komponenty. Vrací uzel Html.

Aktualizace: V tomto stavu je dom interagován uživatelem a aktualizován. Například zadáte něco do textového pole, takže se aktualizují vlastnosti stavu.

Ve stavu aktualizace jsou k dispozici následující metody:

shouldComponentUpdate() : volá se při aktualizaci komponenty.

componentDidUpdate() : po aktualizaci komponenty.

Demontáž: tento stav se objeví, když Komponenta není vyžadována nebo odstraněna.

Následující metody jsou dostupné ve stavu odpojení:

Component willUnmount(): volá se, když je komponenta odstraněna nebo zničena.

Pracovní příklad

Zde je pracovní příklad, který ukazuje metody volané v každém stavu.

Příklad: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Když zkontrolujete výstup v prohlížeči

V konzoli prohlížeče získáte:

Když uživatel zadá do textového pole:

V konzole se zobrazí následující zprávy:

Práce s formuláři

V respondjs Html vstupní prvky jako , a <select /> má svůj vlastní stav a je třeba je aktualizovat, když uživatel interaguje pomocí metody setState().

V této kapitole uvidíme, jak pracovat s formuláři v reaktjs.

Zde je pracovní příklad:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

U vstupních polí potřebujeme udržovat stav, takže k tomu reakce poskytuje speciální metodu nazvanou setState, který pomáhá udržovat stav vždy, když dojde ke změně.

Použili jsme události onChange a onClick na textové pole a tlačítko Odeslat. Když uživatel vstoupí do textového pole, zavolá se událost onChange a pole názvu ve stavu objektu stavu se aktualizuje, jak je uvedeno níže:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Výstup v prohlížeči je následující:

Krok 1) Do textového pole zadejte své jméno:

Klikněte na tlačítko Odeslat

Práce s událostmi v ReactJS

Práce s událostmi v respondjs je stejná jako v javascriptu. Můžete použít všechny obslužné rutiny událostí, které se používají v javascriptu. Metoda setState() se používá k aktualizaci stavu, když uživatel interaguje s libovolným prvkem Html.

Zde je pracovní příklad toho, jak používat události v respondjs.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

U vstupních polí potřebujeme udržovat stav, takže k tomu reakce poskytuje speciální metodu nazvanou setState, který pomáhá udržovat stav vždy, když dojde ke změně.

Využili jsme události při změně si onclick na textovém poli a tlačítku. Když uživatel zadá do textového pole při změně je volána událost a pole názvu uvnitř stavu objektu stavu se aktualizuje, jak je znázorněno níže:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Zde je výstup v prohlížeči:

Když uživatel zadá jméno:

Když uživatel klikne na tlačítko Klikněte sem:

Práce s Inline CSS v ReactJS

Podíváme se na pracovní příklad, abyste pochopili fungování inline css v reaktjs.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Do štítku h1 jsem přidal barvu: 'červený' styl.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Výstup v prohlížeči je následující:

Můžete vytvořit objekt stylu, který chcete na prvku, a použít výraz pro přidání stylu, jak je znázorněno v příkladu výše.

Práce s externím CSS v ReactJS

Vytvořme externí css , k tomu vytvořte složku css/ a přidejte do ní style.css.

style.css

.h1tag {
color:red;
}

Přidejte styl.css do svého souboru index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Nyní přidáme třídu do tagu h1 v souboru .jsx

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Atributu className jsou uvedeny podrobnosti o třídě. Nyní otestujeme v prohlížeči.

Toto uvidíte, když si prohlédnete značku h1 v prohlížeči:

Můžete vidět, že class=” h1tag” byl úspěšně přidán do tagu h1.

Shrnutí

ReactJS je open-source front-end JavaKnihovna skriptů pro vytvoření uživatelského rozhraní. Je spravován Facebookem a dnes jej používá mnoho společností pro vývoj uživatelského rozhraní.
Mezi základní vlastnosti ReactJS patří JSX, komponenty (funkční komponenty a komponenty založené na třídách), životní cyklus komponenty, rekvizity a státní podpora komponenty, práce s výrazy javascriptu.
Nastavení projektu ReactJS je vysvětleno pomocí souborů CDN a také pomocí balíčků npm k sestavení projektu.
JSX je rozšířením javascriptu. Jedná se o šablonový skript, kde budete mít sílu používat Html a javascript společně.
Komponenty jsou jako čistě javascriptové funkce, které pomáhají zjednodušit kód rozdělením logiky na opakovaně použitelný nezávislý kód.
Stav je objekt javascriptu podobný rekvizitám, které mají data, která se mají použít s vykreslováním reaktjs. Stavová data jsou soukromý objekt a používají se v rámci komponent uvnitř třídy.
Podpěry jsou vlastnosti, které mají být použity uvnitř komponenty.
Životní cyklus součásti se dělí na fáze inicializace, montáž, aktualizace a odmontování.
V respondjs html vstupní prvky jako , a <select /> má svůj vlastní stav a je třeba je aktualizovat, když uživatel interaguje pomocí metody setState().
Práce s událostmi v respondjs je stejná jako v javascriptu. Můžete použít všechny obslužné rutiny událostí, které se používají v javascriptu. Metoda setState() se používá k aktualizaci stavu, když uživatel interaguje s libovolným prvkem Html.
ReactJS umožňuje pracovat s externím css i s inline css pomocí výrazu javascript.

Zkontrolujte také: - 70 nejčastějších otázek a odpovědí v pohovoru React (aktualizováno)

Máš rád:

5 NEJLEPŠÍCH kurzů React s…

Co je ReactJS?

Vlastnosti ReactJS

Výhody ReactJS

Nevýhody ReactJS

Pomocí ReactJS z CDN

Pro dev

Pro prod

SOUVISEJÍCÍ ČLÁNKY

Použití balíčků NPM

Jak vytvořit nastavení prvního projektu React

Co je JSX?

Proč potřebujeme JSX v Reactu?

Výrazy v JSX

Co jsou komponenty v ReactJS?

Komponenty jako funkce

Třída jako komponenta

Co je to stát v ReactJS?

Příklad státu

Co jsou rekvizity v ReactJS?

Podpěry k funkčnímu komponentu

Rekvizity ke komponentě třídy

Životní cyklus součásti

Pracovní příklad

Práce s formuláři

Práce s událostmi v ReactJS

Práce s Inline CSS v ReactJS

Práce s externím CSS v ReactJS

Shrnutí