React Samouczek => Pierwsze kroki z React

Uwagi

React to deklaratywna, oparta na komponentach biblioteka JavaScript służąca do tworzenia interfejsów użytkownika.

Aby osiągnąć framework MVC, taki jak funkcjonalności w React, programiści używają go w połączeniu z wybranym smakiem Flux , np. Redux .

Wersje

Wersja	Data wydania
0.3.0	2013-05-29
0.4.0	2013-07-17
0,5.0	16.10.2013
0.8.0	19.12.2013
0.9.0	2014-02-20
0.10.0	21.03.2014
0.11.0	2014-07-17
0.12.0	28.10.2014
0.13.0	2015-03-10
0.14.0	07.10.2015
15.0.0	07.04.2016
15.1.0	2016-05-20
15.2.0	01.07.2016
15.2.1	08.07.2016
15.3.0	2016-07-29
15.3.1	19.08.2016
15.3.2	19.09.2016
15.4.0	16.11.2016
15.4.1	23.11.2016
15.4.2	2017-01-06
15.5.0	2017-04-07
15.6.0	13.06.2017

Instalacja lub konfiguracja

ReactJS to biblioteka JavaScript zawarta w pojedynczym pliku react-<version>.js która może być zawarta na dowolnej stronie HTML. Ludzie również często instalują bibliotekę React DOM React react-dom-<version>.js wraz z głównym plikiem React:

Podstawowa integracja

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

Aby pobrać pliki JavaScript, przejdź do strony instalacji oficjalnej dokumentacji React.

React obsługuje również składnię JSX . JSX to rozszerzenie utworzone przez Facebooka, które dodaje składnię XML do JavaScript. Aby korzystać z JSX, musisz dołączyć bibliotekę Babel i zmienić <script type="text/javascript"> na <script type="text/babel"> w celu przetłumaczenia JSX na kod JavaScript.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

Instalowanie przez npm

Możesz także zainstalować React przy użyciu npm , wykonując następujące czynności:

npm install --save react react-dom

Aby użyć React w projekcie JavaScript, możesz wykonać następujące czynności:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Instalowanie za pomocą przędzy

Facebook wydał własnego menedżera pakietów o nazwie Yarn , którego można również użyć do zainstalowania React. Po zainstalowaniu Yarn wystarczy uruchomić polecenie:

yarn add react react-dom

Następnie możesz użyć React w swoim projekcie dokładnie w taki sam sposób, jakbyś zainstalował React przez npm.

Hello World Component

Składnik React można zdefiniować jako klasę ES6, która rozszerza podstawową klasę React.Component . W minimalnej formie komponent musi zdefiniować metodę render , która określa sposób renderowania komponentu do DOM. Metoda render zwraca węzły React, które można zdefiniować przy użyciu składni JSX jako znaczniki podobne do HTML. Poniższy przykład pokazuje, jak zdefiniować minimalny komponent:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

Komponent może również otrzymywać props . Są to właściwości przekazywane przez jego element nadrzędny w celu określenia niektórych wartości, których składnik sam nie może poznać; właściwość może również zawierać funkcję, która może zostać wywołana przez komponent po wystąpieniu określonych zdarzeń - na przykład przycisk może otrzymać funkcję dla swojej właściwości onClick i wywołać ją za każdym razem, gdy zostanie kliknięty. Pisząc komponent, jego props można uzyskać poprzez props obiektu na samego składnika:

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

Powyższy przykład pokazuje, w jaki sposób komponent może renderować dowolny ciąg przekazany do name prop przez swojego rodzica. Zauważ, że komponent nie może modyfikować otrzymanych rekwizytów.

Składnik można wyrenderować w dowolnym innym składniku lub bezpośrednio w DOM, jeśli jest to najwyższy składnik, używając ReactDOM.render i udostępniając mu zarówno składnik, jak i Węzeł DOM, w którym ma być renderowane drzewo React:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

Do tej pory wiesz, jak zrobić podstawowy komponent i akceptować props . Przejdźmy o krok dalej i wprowadźmy state .

Na potrzeby wersji demo, stwórzmy naszą aplikację Hello World, wyświetlającą tylko imię, jeśli podano pełną nazwę.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

Uwaga: Każdy komponent może mieć własny stan lub zaakceptować stan nadrzędny jako rekwizyt.

Codepen Link do przykładu.

Witaj świecie

Bez JSX

Oto podstawowy przykład, w którym główny interfejs API React służy do tworzenia elementu React oraz interfejsu API React DOM do renderowania elementu React w przeglądarce.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Z JSX

Zamiast tworzyć element React z ciągów znaków, można użyć JSX (rozszerzenie JavaScript utworzone przez Facebooka w celu dodania składni XML do JavaScript), które pozwala pisać

var rElement = React.createElement('h1', null, 'Hello, world!');

jako odpowiednik (i łatwiejszy do odczytania dla osoby znającej HTML)

var rElement = <h1>Hello, world!</h1>;

Kod zawierający JSX musi być zawarty w <script type="text/babel"> . Wszystko w tym znaczniku zostanie przekształcone w zwykły skrypt Javascript za pomocą biblioteki Babel (która musi zostać dołączona oprócz bibliotek React).

W końcu powyższy przykład brzmi:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Co to jest ReactJS?

ReactJS jest biblioteką front-endową opartą na otwartym kodzie źródłowym, odpowiedzialną tylko za warstwę widoku aplikacji. Obsługuje go Facebook.

ReactJS używa mechanizmu opartego na wirtualnym DOM do wypełniania danych (widoków) w HTML DOM. Wirtualny DOM działa szybko, ponieważ zmienia tylko pojedyncze elementy DOM zamiast przeładowywać kompletny DOM za każdym razem

Aplikacja React składa się z wielu komponentów , z których każdy odpowiada za wydrukowanie niewielkiego fragmentu kodu HTML wielokrotnego użytku. Komponenty można zagnieżdżać w innych komponentach, aby umożliwić tworzenie złożonych aplikacji z prostych bloków konstrukcyjnych. Składnik może również utrzymywać stan wewnętrzny - na przykład składnik TabList może przechowywać zmienną odpowiadającą aktualnie otwartej karcie.

React pozwala nam pisać komponenty przy użyciu języka specyficznego dla domeny zwanego JSX. JSX pozwala nam pisać nasze komponenty przy użyciu HTML, jednocześnie mieszając zdarzenia JavaScript. React przekształci to wewnętrznie w wirtualny DOM i ostatecznie wyda dla nas nasz HTML.

Reakcja „ reaguje ” na szybkie i automatyczne wprowadzanie zmian w komponentach w celu ponownego przesłania komponentów w DOM HTML za pomocą wirtualnego DOM. Wirtualny DOM to reprezentacja rzeczywistej DOM w pamięci. Wykonując większość przetwarzania w wirtualnym DOM, a nie bezpośrednio w DOM przeglądarki, React może działać szybko i tylko dodawać, aktualizować i usuwać komponenty, które zmieniły się od ostatniego cyklu renderowania.

Hello World z bezpaństwowymi funkcjami

Bezstanowe komponenty czerpią swoją filozofię z programowania funkcjonalnego. Co implikuje, że: Funkcja zwraca zawsze to samo, dokładnie to, co jest jej dane.

Na przykład:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

Jak widać z powyższego przykładu, statelessSum is zawsze zwróci te same wartości dla danych aib. Jednak funkcja statefulSum nie zwróci tych samych wartości, nawet przy braku parametrów. Tego rodzaju zachowanie funkcji jest również wywoływane jako efekt uboczny . Ponieważ składnik wpływa na coś poza.

Dlatego zaleca się częstsze stosowanie składników bezpaństwowych, ponieważ są one wolne od skutków ubocznych i zawsze powodują takie samo zachowanie. Właśnie tego chcesz szukać w swoich aplikacjach, ponieważ fluktuacja stanu jest najgorszym scenariuszem możliwym do utrzymania w programie.

Najbardziej podstawowym rodzajem elementu reagującego jest element bez stanu. Reaguj komponenty, które są czystymi funkcjami swoich rekwizytów i nie wymagają wewnętrznego zarządzania stanem, można zapisać jako proste funkcje JavaScript. Mówi się, że są to Stateless Functional Components ponieważ są one funkcją tylko props , bez żadnego state do śledzenia.

Oto prosty przykład ilustrujący koncepcję Stateless Functional Component :

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Zauważ, że wszystko, co robi ten komponent, renderuje element h1 zawierający name prop. Ten komponent nie śledzi żadnego stanu. Oto także przykład ES6:

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

Ponieważ te składniki nie wymagają wystąpienia kopii zapasowej do zarządzania stanem, React ma więcej miejsca na optymalizacje. Implementacja jest czysta, ale jak dotąd nie wdrożono takich optymalizacji dla komponentów bezstanowych .

Utwórz aplikację React

Utwórz-zareaguj-aplikacja to generowany przez Facebook generator aplikacji React. Zapewnia środowisko programistyczne skonfigurowane pod kątem łatwości użytkowania przy minimalnej konfiguracji, w tym:

Transplantacja ES6 i JSX
Serwer deweloperski z przeładowaniem modułu na gorąco
Kreskowanie kodu
Automatyczne prefiksowanie CSS
Twórz skrypty z JS, CSS i pakietowaniem obrazów oraz sourcemaps
Jest to środowisko testowe

Instalacja

Najpierw zainstaluj aplikację stwórz-reaguj globalnie za pomocą menedżera pakietów węzłów (npm).

npm install -g create-react-app

Następnie uruchom generator w wybranym katalogu.

create-react-app my-app

Przejdź do nowo utworzonego katalogu i uruchom skrypt startowy.

cd my-app/
npm start

Konfiguracja

Aplikacja create-reag-app jest domyślnie nieskonfigurowalna. Jeśli na przykład do korzystania ze skompilowanego języka CSS, takiego jak Sass, wymagane jest użycie niestandardowe, można użyć polecenia eject.

npm run eject

Pozwala to na edycję wszystkich plików konfiguracyjnych. NB jest to proces nieodwracalny.

Alternatywy

Alternatywne płyty grzewcze React obejmują:

Zbuduj aplikację React

Aby zbudować aplikację gotową do produkcji, uruchom następujące polecenie

npm run build

Absolutne podstawy tworzenia komponentów wielokrotnego użytku

Komponenty i rekwizyty

Ponieważ React dotyczy samego widoku aplikacji, większość rozwoju w React będzie polegać na tworzeniu komponentów. Komponent reprezentuje część widoku aplikacji. „Rekwizyty” to po prostu atrybuty używane w węźle JSX (np. <SomeComponent someProp="some prop's value" /> ) i są podstawowym sposobem interakcji naszej aplikacji z naszymi komponentami. W powyższym fragmencie, w SomeComponent, mielibyśmy dostęp do this.props , którego wartością byłby obiekt {someProp: "some prop's value"} .

Przydatne może być myślenie o komponentach React jako o prostych funkcjach - przyjmują dane wejściowe w postaci „rekwizytów” i generują dane wyjściowe jako znaczniki. Wiele prostych komponentów posuwa się o krok dalej, czyniąc się „czystymi funkcjami”, co oznacza, że nie wywołują skutków ubocznych i są idempotentne (biorąc pod uwagę zestaw danych wejściowych, komponent zawsze będzie wytwarzał takie same wyniki). Cel ten można formalnie zrealizować, tworząc komponenty jako funkcje, a nie „klasy”. Istnieją trzy sposoby tworzenia komponentu React:

Komponenty funkcjonalne („bezstanowe”)

const FirstComponent = props => (
    <div>{props.content}</div>
);

React.createClass ()

const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});

Klasy ES2015

class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Te elementy są używane dokładnie w ten sam sposób:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

Powyższe przykłady dadzą identyczne znaczniki.

Komponenty funkcjonalne nie mogą mieć w sobie „stanu”. Więc jeśli twój komponent musi mieć stan, wybierz komponenty oparte na klasach. Aby uzyskać więcej informacji, patrz Tworzenie komponentów .

Na koniec, rekwizyty reagujące są niezmienne po ich przekazaniu, co oznacza, że nie można ich modyfikować z poziomu komponentu. Jeśli element nadrzędny komponentu zmieni wartość rekwizytu, React zajmie się zastąpieniem starych rekwizytów nowymi, komponent zresetuje się, używając nowych wartości.

Zobacz temat Myślenie w reakcyjnych i wielokrotnego użytku komponentach, aby uzyskać głębsze informacje na temat relacji rekwizytów z komponentami.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

React Samouczek
Pierwsze kroki z React

Szukaj…