Najmniejszy przykład Reacta wygląda tak:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root'));Wyświetla nagłówek „Witaj, świecie!” na stronie.
Spróbuj go na CodePen
Kliknij powyższy link, aby otworzyć edytor online. Zachęcamy do wprowadzenia zmian i sprawdzenia, jak wpływają one na wynik. Większość stron w tym przewodniku będzie miała edytowalne przykłady, takie jak ten.
Jak czytać ten przewodnik
W tym przewodniku przeanalizujemy elementy składowe aplikacji React: elementy i komponenty. Gdy je opanujesz, będziesz mógł tworzyć złożone aplikacje z małych elementów wielokrotnego użytku.
Porada
Ten przewodnik jest przeznaczony dla osób, które wolą uczyć się koncepcji krok po kroku. Jeśli wolisz uczyć się przez działanie, sprawdź nasz praktyczny tutorial. Być może uznasz, że ten przewodnik i samouczek wzajemnie się uzupełniają.
To jest pierwszy rozdział w przewodniku krok po kroku po głównych koncepcjach Reacta. Listę wszystkich jego rozdziałów znajdziesz w pasku nawigacyjnym. Jeśli czytasz to z urządzenia mobilnego, możesz przejść do nawigacji, naciskając przycisk w prawym dolnym rogu ekranu.
Każdy rozdział w tym przewodniku opiera się na wiedzy wprowadzonej we wcześniejszych rozdziałach. Możesz nauczyć się większości Reacta, czytając rozdziały przewodnika „Główne koncepcje” w kolejności, w jakiej pojawiają się na pasku bocznym. Na przykład, „Wprowadzenie do JSX” jest następnym rozdziałem po tym.
Założenia dotyczące poziomu wiedzy
React jest biblioteką JavaScript, a więc założymy, że masz podstawowe zrozumienie języka JavaScript. Jeśli nie czujesz się zbyt pewnie, zalecamy przejście przez samouczek JavaScript, aby sprawdzić Twój poziom wiedzy i umożliwić Ci podążanie za tym przewodnikiem bez zgubienia się. Może Ci to zająć od 30 minut do godziny, ale w rezultacie nie będziesz musiał się czuć, jakbyś uczył się jednocześnie Reacta i JavaScriptu.
Uwaga
W tym przewodniku czasami używana jest nowsza składnia JavaScriptu w przykładach. Jeśli nie pracowałeś z JavaScriptem w ciągu ostatnich kilku lat, te trzy punkty powinny ułatwić Ci pracę.
Zacznijmy!
Przewijając dalej w dół, znajdziesz link do następnego rozdziału tego przewodnika tuż przed stopką strony.