Reageer Tutoriaal

❮ Tuis Volgende ❯

[+:

React is 'n JavaScript-biblioteek vir die bou van gebruikerskoppelvlakke.

React word gebruik om enkelbladsy-toepassings te bou.

React stel ons in staat om herbruikbare UI-komponente te skep.

Begin leer Reageer nou ❯

Leer deur voorbeelde

Ons "Show React"-instrument maak dit maklik om React te demonstreer. Dit wys beide die kode en die resultaat.

Voorbeeld:

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

function Hello(props) {
  return <h1>Hello World!</h1>;
}

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

Leer deur oefeninge

Reageer vasvra

Toets jou Reageer-vaardighede met 'n vasvra.

Reageer vasvra

Skep React App

Om React te leer en te toets, moet jy 'n React-omgewing op jou rekenaar opstel.

Hierdie tutoriaal gebruik die create-react-app.

Die create-react-appinstrument is 'n amptelik ondersteunde manier om React-toepassings te skep.

Node.js word vereis om create-react-app.

Maak jou terminaal oop in die gids wat jy jou toepassing wil skep.

Voer hierdie opdrag uit om 'n React-toepassing te skep met die naam my-react-app:

npx create-react-app my-react-app

create-react-app sal alles opstel wat jy nodig het om 'n React-toepassing te laat loop.

Let wel: As jy voorheen create-react-appwêreldwyd geïnstalleer het, word dit aanbeveel dat jy die pakket deïnstalleer om te verseker dat npx altyd die nuutste weergawe van gebruik create-react-app. Om te verwyder, voer hierdie opdrag uit: npm uninstall -g create-react-app.

Begin die React-toepassing

Voer hierdie opdrag uit om na die my-react-appgids te beweeg:

cd my-react-app

Voer hierdie opdrag uit om die React-toepassing uit te voer my-react-app:

npm start

'n Nuwe blaaiervenster sal verskyn met jou nuutgeskepte React-toepassing! Indien nie, maak jou blaaier oop en tik localhost:3000in die adresbalk.

Die resultaat:

Jy sal meer oor die create-react-appin die React Begin- hoofstuk leer.

Wat jy reeds behoort te weet

Voordat jy met React.JS begin, moet jy intermediêre ondervinding hê in:

HTML
CSS
JavaScript

Jy moet ook 'n bietjie ervaring hê met die nuwe JavaScript-kenmerke wat in ECMAScript 6 (ES6) bekendgestel is, jy sal daaroor leer in die React ES6- hoofstuk.

❮ Tuis Volgende ❯