Samouczek dotyczący reakcji

[+:

React to biblioteka JavaScript do budowania interfejsów użytkownika.

React służy do budowania aplikacji jednostronicowych.

React pozwala nam tworzyć komponenty UI wielokrotnego użytku.

Zacznij się uczyć Reaguj teraz ❯

Nauka przez przykłady

Nasze narzędzie „Pokaż React” ułatwia zademonstrowanie Reacta. Pokazuje zarówno kod, jak i wynik.

Przykład:

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

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

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


Nauka przez ćwiczenia

Ćwiczenia Reagowania

Ćwiczenie:

Wprowadź poprawną metodę ReactDOM, aby wyrenderować element React do DOM.

ReactDOM.(myElement, document.getElementById('root'));



Quiz Reagowania

Sprawdź swoje umiejętności React za pomocą quizu.

Quiz Reagowania


Utwórz aplikację React

Aby nauczyć się i przetestować React, powinieneś skonfigurować React Environment na swoim komputerze.

Ten samouczek wykorzystuje create-react-app.

Narzędzie create-react-appjest oficjalnie obsługiwanym sposobem tworzenia aplikacji React.

Node.js jest wymagany do użycia create-react-app.

Otwórz terminal w katalogu, w którym chcesz utworzyć swoją aplikację.

Uruchom to polecenie, aby utworzyć aplikację React o nazwie my-react-app:

npx create-react-app my-react-app

create-react-appskonfiguruje wszystko, czego potrzebujesz do uruchomienia aplikacji React.

Uwaga: jeśli wcześniej zainstalowałeś create-react-appgo globalnie, zaleca się odinstalowanie pakietu, aby upewnić się, że npx zawsze używa najnowszej wersji create-react-app. Aby odinstalować, uruchom to polecenie: npm uninstall -g create-react-app.


Uruchom aplikację React

Uruchom to polecenie, aby przejść do my-react-appkatalogu:

cd my-react-app

Uruchom to polecenie, aby uruchomić aplikację React my-react-app:

npm start

Pojawi się nowe okno przeglądarki z nowo utworzoną aplikacją React! Jeśli nie, otwórz przeglądarkę i wpisz localhost:3000w pasku adresu.

Wynik:


Więcej na ten temat dowiesz się create-react-appw rozdziale React Pierwsze kroki .


Co powinieneś już wiedzieć

Zanim zaczniesz z React.JS, powinieneś mieć średnie doświadczenie w:

  • HTML
  • CSS
  • JavaScript

Powinieneś także mieć trochę doświadczenia z nowymi funkcjami JavaScript wprowadzonymi w ECMAScript 6 (ES6), dowiesz się o nich w rozdziale React ES6 .