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
Quiz Reagowania
Sprawdź swoje umiejętności React za pomocą quizu.
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-app
jest 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-app
skonfiguruje wszystko, czego potrzebujesz do uruchomienia aplikacji React.
Uwaga:
jeśli wcześniej zainstalowałeś create-react-app
go 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-app
katalogu:
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:3000
w pasku adresu.
Wynik:
Więcej na ten temat dowiesz się create-react-app
w 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 .