React учебник
Начало работы с реакцией

Android CSS firebase HTML JavaScript jQuery meteor Node.js react-native TypeScript
Поиск…


замечания

React - это декларативная, основанная на компонентах JavaScript-библиотека, используемая для создания пользовательских интерфейсов.

Для достижения MVC-структуры, такой как функциональность в React, разработчики используют ее в сочетании с вкусом Flux , например Redux .

Версии

Версия Дата выхода
0.3.0 2013-05-29
0.4.0 2013-07-17
0.5.0 2013-10-16
0.8.0 2013-12-19
0.9.0 2014-02-20
0.10.0 2014-03-21
0.11.0 2014-07-17
0.12.0 2014-10-28
0.13.0 2015-03-10
0.14.0 2015-10-07
15.0.0 2016-04-07
15.1.0 2016-05-20
15.2.0 2016-07-01
15.2.1 2016-07-08
15.3.0 2016-07-29
15.3.1 2016-08-19
15.3.2 2016-09-19
15.4.0 2016-11-16
15.4.1 2016-11-23
15.4.2 2017-01-06
15.5.0 2017-04-07
15.6.0 2017-06-13

Установка или настройка

ReactJS - это библиотека JavaScript, содержащаяся в одном файле react-<version>.js который может быть включен в любую HTML-страницу. Люди также обычно устанавливают React DOM library react-dom-<version>.js вместе с основным файлом React:

Основное включение 

<!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>

Чтобы получить файлы JavaScript, перейдите на страницу установки официальной документации React.

React также поддерживает синтаксис JSX . JSX - это расширение, созданное Facebook, которое добавляет синтаксис XML к JavaScript. Чтобы использовать JSX, вам нужно включить библиотеку Babel и изменить <script type="text/javascript"> на <script type="text/babel"> , чтобы перевести JSX на 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>

Установка через npm

Вы также можете установить React с помощью npm , выполнив следующие действия:

npm install --save react react-dom

Чтобы использовать React в вашем проекте JavaScript, вы можете сделать следующее: 

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

Установка через пряжу

Facebook выпустил собственный менеджер пакетов с именем Yarn , который также можно использовать для установки React. После установки пряжи вам просто нужно запустить эту команду: 

yarn add react react-dom

Затем вы можете использовать React в своем проекте точно так же, как если бы вы установили React через npm.

Привет, мир

Компонент React может быть определен как класс ES6, который расширяет базовый класс React.Component . В своей минимальной форме компонент должен определить метод render который указывает, как компонент отображает DOM. Метод render возвращает React node, который может быть определен с использованием синтаксиса JSX как HTML-подобных тегов. В следующем примере показано, как определить минимальный компонент: 

import React from 'react'

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

export default HelloWorld

Компонент также может получать props . Это свойства, переданные его родителем, чтобы указать некоторые значения, которые компонент не может знать сам по себе; свойство может также содержать функцию, которая может быть вызвана компонентом после возникновения определенных событий - например, кнопка может получить функцию для своего свойства onClick и вызывать ее всякий раз, когда нажимается. При написании компонента его props можно получить через объект props самого Компонента: 

import React from 'react'

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

export default Hello

В приведенном выше примере показано, как компонент может отображать произвольную строку, переданную в name prop своим родителем. Обратите внимание, что компонент не может изменять получаемые реквизиты.

Компонент может отображаться в любом другом компоненте или непосредственно в DOM, если он является самым верхним компонентом, используя ReactDOM.render и предоставляя ему как компонент, так и узел DOM, в котором вы хотите, чтобы дерево React было отображено: 

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

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

К настоящему времени вы знаете, как создать базовый компонент и принять props . Давайте сделаем еще один шаг и представим state .

Для демонстрации давайте сделаем наше приложение Hello World, отображаем только первое имя, если дано полное имя. 

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

Примечание. Каждый компонент может иметь собственное состояние или принимать состояние родителя в качестве опоры.

Ссылка Codepen на пример.

Привет, мир

Без JSX

Вот базовый пример, который использует основной API React для создания элемента React и React DOM API для визуализации элемента React в браузере. 

<!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>

С JSX

Вместо создания элемента React из строк можно использовать JSX (расширение Javascript, созданное Facebook для добавления синтаксиса XML к JavaScript), что позволяет писать 

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

как эквивалент (и более легкий для чтения для кого-то знакомого с HTML) 

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

Код, содержащий JSX, должен быть заключен в <script type="text/babel"> . Все внутри этого тега будет преобразовано в обычный Javascript, используя библиотеку Babel (которая должна быть включена в дополнение к библиотекам React).

Итак, наконец, приведенный выше пример: 

<!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>

Что такое ReactJS?

ReactJS - это библиотека с открытым исходным кодом, основанная на компонентах, отвечающая только за уровень представления приложения. Он поддерживается Facebook.

ReactJS использует виртуальный механизм DOM для заполнения данных (представлений) в HTML DOM. Виртуальный DOM работает быстро, владея тем фактом, что он меняет только отдельные элементы DOM, а не перезагружает полную DOM каждый раз

Приложение React состоит из нескольких компонентов , каждый из которых отвечает за вывод небольшого многократно используемого фрагмента HTML. Компоненты могут быть вложены в другие компоненты, чтобы создавать сложные приложения из простых строительных блоков. Компонент может также поддерживать внутреннее состояние - например, компонент TabList может хранить переменную, соответствующую текущей открытой вкладке.

React позволяет писать компоненты, используя язык, специфичный для домена, который называется JSX. JSX позволяет нам писать наши компоненты с помощью HTML, одновременно смешивая события JavaScript. React будет внутренне преобразовывать это в виртуальный DOM и в конечном итоге выводит наш HTML для нас.

Реагируйте « реагирует », чтобы быстро и автоматически изменять изменения в ваших компонентах, чтобы повторно перенести компоненты в DOM HTML, используя виртуальную DOM. Виртуальный DOM представляет собой представление в реальном времени DOM. Выполняя большую часть обработки внутри виртуальной DOM, а не непосредственно в DOM браузера, React может действовать быстро и только добавлять, обновлять и удалять компоненты, которые изменились с момента последнего цикла рендеринга.

Hello World с функциями безгражданства

Компоненты без гражданства получают свою философию от функционального программирования. Это означает, что: функция возвращает все время одинаково точно на то, что ему дано.

Например: 

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

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

Как видно из приведенного выше примера, statelessSum всегда возвращает те же значения, что и a и b. Однако функция statefulSum не будет возвращать те же значения, которые даны даже без параметров. Такое поведение функции также называется побочным эффектом . Так как компонент влияет на что-то за пределами.

Поэтому рекомендуется чаще использовать компоненты без гражданства, поскольку они свободны от побочных эффектов и всегда будут создавать одинаковое поведение. Это то, что вы хотите использовать в своих приложениях, потому что колебательное состояние - наихудший сценарий для поддерживаемой программы.

Самый основной тип реагирующего компонента - один без состояния. Реагировать на компоненты, которые являются чистыми функциями своих реквизитов и не требуют какого-либо внутреннего управления состоянием, могут быть написаны как простые функции JavaScript. Они говорят, что Stateless Functional Components , поскольку они являются функцией только props , не имея state , чтобы следить.

Вот простой пример, иллюстрирующий концепцию 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>

Обратите внимание, что все, что делает этот компонент, представляет собой элемент h1 содержащий name prop. Этот компонент не отслеживает состояние. Вот пример ES6: 

import React from 'react'

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

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

export default HelloWorld

Поскольку эти компоненты не требуют экземпляра поддержки для управления состоянием, React имеет больше возможностей для оптимизации. Реализация чиста, но пока не реализована такая оптимизация для компонентов без состояния .

Создать приложение React

create-react-app - это генератор шаблонов приложения React, созданный Facebook. Он обеспечивает среду разработки, настроенную для простоты использования с минимальной настройкой, в том числе:

  • ES6 и трансляция JSX
  • Сервер Dev с горячей перезагрузкой модуля
  • Листинг кода
  • Автоматическое префикс CSS
  • Сценарий сборки с использованием JS, CSS и компоновки изображений и исходных карт
  • Схема тестирования Jest

Монтаж

Во-первых, установите приложение create-response-app глобально с менеджером пакетов узлов (npm). 

npm install -g create-react-app

Затем запустите генератор в выбранном вами каталоге. 

create-react-app my-app

Перейдите во вновь созданный каталог и запустите стартовый скрипт. 

cd my-app/
npm start

конфигурация

По умолчанию приложение create-react-приложение намеренно не настраивается. Если требуется использовать нестандартное использование, например, для использования скомпилированного языка CSS, такого как Sass, тогда можно использовать команду eject. 

npm run eject

Это позволяет редактировать все файлы конфигурации. NB это необратимый процесс.

альтернативы

Альтернативные контрольные плиты включают:

Приложение Build React

Чтобы готовить приложение для производства, выполните следующую команду 

npm run build

Абсолютные основы создания многоразовых компонентов

Компоненты и реквизит

Поскольку React затрагивает себя только с точки зрения приложения, основной частью разработки в React будет создание компонентов. Компонент представляет часть представления вашего приложения. «Опоры» - это просто атрибуты, используемые на узле JSX (например, <SomeComponent someProp="some prop's value" /> ) и являются основным способом взаимодействия нашего приложения с нашими компонентами. В фрагменте выше, внутри SomeComponent, у нас будет доступ к this.props , значением которого будет объект {someProp: "some prop's value"} .

Может быть полезно подумать о компонентах React как о простых функциях - они принимают входные данные в виде «реквизита» и производят вывод в виде разметки. Многие простые компоненты делают это еще дальше, делая себя «Чистыми функциями», что означает, что они не выдают побочных эффектов и являются идемпотентными (с учетом набора входов компонент всегда будет воспроизводить один и тот же результат). Эта цель может быть формально введена в действие, фактически создавая компоненты как функции, а не «классы». Существует три способа создания компонента React:

  • Функциональные («Безстоящие») компоненты 
const FirstComponent = props => (
    <div>{props.content}</div>
);
  • React.createClass () 
const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});
  • Классы ES2015 
class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Эти компоненты используются точно так же: 

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

Вышеприведенные примеры приведут к одинаковой разметке.

Функциональные компоненты не могут иметь «состояние» внутри них. Поэтому, если ваш компонент должен иметь состояние, то перейдите для компонентов на основе классов. Дополнительную информацию см. В разделе « Создание компонентов» .

В качестве последней заметки, реакция реквизита неизменна после того, как они были переданы, то есть они не могут быть изменены изнутри компонента. Если родительский компонент компонента изменяет значение prop, React обрабатывает замену старых реквизитов на новый, компонент будет повторно выполнять себя с использованием новых значений.

См. « Мышление в реакциях и многоразовых компонентах» для более глубоких погружений в отношение реквизита к компонентам.



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow