Pierwsze kroki z React.js

React.js jest elastyczny i oparty na komponentach Biblioteka JavaScript dla budowanie interaktywnych interfejsów użytkownika. To było stworzony i otwarty przez Facebooka i jest używany przez wiele wiodących firm technologicznych, takich jak Dropbox, AirBnB, PayPal i Netflix. React pozwala programistom na tworzyć aplikacje wymagające dużej ilości danych które mogą być bezboleśnie aktualizowane przez ponowne renderowanie tylko niezbędnych komponentów.

Reaguj to Wyświetl warstwę z MVC wzór projektu oprogramowania, i to głównie skupia się na manipulacji DOM. W dzisiejszych czasach wszyscy mówią o React, w tym poście przyglądamy się, jak możesz zacznij z tym.

Zainstaluj React

Możesz także zainstalować React z menedżerem pakietów npm lub przez ręczne dodawanie niezbędnych bibliotek do twojej strony HTML. To jest zalecane używanie React with Babel to pozwala użyj składni ECMAScript6 i JSX w swoim kodzie React.

Jeśli chcesz zainstaluj React ręcznie, oficjalne dokumenty zalecają użyj tego pliku HTML. Możesz pobrać stronę, klikając Plik> Zapisz stronę jako… menu w przeglądarce. Skrypty, których będziesz potrzebować (React, React DOM, Babel), również zostaną pobrane do react-example_files / teczka. Następnie dodaj następujące znaczniki skryptu do sekcja twojego dokumentu HTML:

Zamiast ich pobierać, możesz dodać skrypty React z CDN także.

Możesz także użyć wersje minifikowane z powyższych plików JavaScript:

Jeśli wolisz zainstaluj React with npm, najlepszym sposobem jest użycie Utwórz aplikację React Github repo stworzony przez Facebook Incubator - to także rozwiązanie polecane przez dokumenty React. Oprócz React, to również zawiera Webpack, Babel, Autoprefixer, ESLint i inne narzędzia programistyczne. Aby rozpocząć, użyj następujących poleceń CLI:

 npm install -g utwórz-reaguj-app utwórz-zareaguj-uruchom aplikację moja-aplikacja cd moja-aplikacja npm uruchom

Kiedy będziesz gotowy, możesz dostęp do nowej aplikacji React na localhost: 3000 URL:

Jeśli chcesz przeczytać więcej na ten temat jak zainstalować React, Sprawdź wytyczne dotyczące instalacji doktorów.

React i JSX

Chociaż nie jest to obowiązkowe, możesz użyj składni JSX w aplikacjach React. JSX oznacza JavaScript XML, i to transpiluje do zwykłego JavaScript. Dużą zaletą JSX jest to, że pozwala dołączyć HTML do plików JavaScript, dlatego ułatwia definiowanie elementów React.

Oto najważniejsze informacje o JSX:

To oznacza zacznij od małych liter (dolny przypadek wielbłąda) są renderowane jako zwykłe elementy HTML.
To oznacza zacznij od wielkich liter (górna obudowa wielbłąda) są renderowane jako React components.
Dowolny kod napisane w nawiasach klamrowych … są interpretowane jako dosłowny JavaScript.

Jeśli chcesz wiedzieć więcej o jak używać JSX z React sprawdź tę stronę z dokumentów i dla domyślna dokumentacja JSX możesz zajrzeć na wiki JSX.

Utwórz elementy React

Reakcja ma architektura oparta na komponentach w których tworzą programiści elementy wielokrotnego użytku w celu rozwiązania różnych problemów. Komponent React składa się z kilku lub wielu Elementy reagowania to są najmniejsze jednostki aplikacji React.

Poniżej możesz zobaczyć prosty przykład elementu React dodaje przycisk „Kliknij mnie” do strony HTML. W HTML dodajemy

pojemnik z „myDiv” Identyfikator, który będzie wypełniony elementem React. Tworzymy nasz element React w ciągu

   Nasz element React renderujemy za pomocą ReactDOM.render () metoda który przyjmuje dwa wymagane parametry,  Element reagujący () i jego pojemnik (document.getElementById („myDiv”)). Możesz przeczytać więcej na ten temat jak działają elementy React w “Elementy renderujące” sekcja doktorów.
 Twórz komponenty
 Reaguj na komponenty są niezależne jednostki interfejsu użytkownika wielokrotnego użytku w którym możesz łatwo aktualizować dane. Komponent może składać się z jednego lub wielu elementów React. Rekwizyty są dowolne dane wejściowe możesz użyć do przekazania danych do komponentu. Komponent React działa podobnie do funkcji JavaScript - za każdym razem, gdy jest wywoływany, działa generuje pewnego rodzaju wyjście.
 Możesz użyć albo klasyczna składnia funkcji lub nowy Składnia klasy ES6 do zdefiniuj komponent React. W tym artykule użyję tego drugiego, ponieważ Babel pozwala nam używać ECMAScript 6. Jeśli jesteś zainteresowany, jak utworzyć komponent bez ES6, spójrz na stronę Komponenty i Rekwizyty w dokumentach.
 Poniżej możesz zobaczyć prosty komponent React zamierzamy stworzyć jako przykład. To podstawowe powiadomienie, które użytkownik widzi po zalogowaniu się na stronie. Dostępne są trzy dane zmiana z przypadku na przypadek: nazwa użytkownika, liczba wiadomości i liczba powiadomień, które przekażemy jako rekwizyty.
  
Każdy komponent React to klasa JavaScript rozszerza React.Component klasa bazowa. Nasz komponent zostanie wywołany Statystyki ponieważ zapewnia użytkownikowi podstawową statystykę. Najpierw, my stwórz Statystyki klasa z Stats Stats Extensions React.Component … składnia, a następnie my render na ekran dzwoniąc do ReactDOM.render () metoda (użyliśmy już tej ostatniej w poprzedniej sekcji).
  statystyki klasy rozszerzają React.Component render () return (  Cześć this.props.name, masz this.props.notifications nowe powiadomienia i this.props.messages nowe wiadomości. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Pierwszy argument ReactDOM.render () metoda składa się z nazwa naszego komponentu React (), i jego rekwizyty (imię, powiadomienia, i wiadomości) z ich wartościami. Kiedy deklarujemy wartości rekwizytów, powinny być ciągi ujęte w cudzysłów (lubić "Nieznany z nazwiska") i wartości liczbowe w nawiasach klamrowych (lubić 3).
 Zauważ, że z powodu JavaScript, my używany Nazwa klasy zamiast klasa w celu przekazania atrybutu klasy do tagu HTML (className = "summary").
 Pasująca strona HTML wygląda następująco:
          
    
 W dokumentach React jest wiele innych ciekawych przykładów jak budować i zarządzać komponentami React, i co jeszcze wiedzieć o rekwizytach.
 Dalsze czytanie
 Dzięki React Facebook wprowadził nowy rodzaj ram w rozwój front-end rzuca wyzwanie wzorowi projektowemu MV *. Jeśli chcesz lepiej zrozumieć, jak to działa i co możesz, a czego nie możesz osiągnąć, oto kilka interesujących artykułów, które mogą pomóc:
 Wpis na blogu Facebooka na dlaczego zbudowali React.
 Wspaniały wpis na blogu Andrew Raya na dobre i złe React.
 Codementor on jak porównują React i AngularJS.
 Pomysł FreeCodeCamp na temat tego, czy MVC jest martwy na froncie.
 Artykuł HackerNoon na temat jak zoptymalizować wydajność związaną z React.