Начало работы с React.js

React.js это гибкий и основанный на компонентах Библиотека JavaScript для создание интерактивных пользовательских интерфейсов. это было создан и открыт с помощью Facebook и используется многими ведущими техническими компаниями, такими как Dropbox, AirBnB, PayPal и Netflix. React позволяет разработчикам создавать приложения, насыщенные данными которые могут быть безболезненно обновлены перерисовка только необходимых компонентов.

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

Установить Реакт

Вы можете установить React либо с менеджером пакетов npm или добавление необходимых библиотек вручную на вашу страницу HTML. Рекомендуется используя Реакт с Вавилоном это позволяет вам использовать синтаксис ECMAScript6 и JSX в вашем коде React.

Если хотите установить React вручную, официальные документы рекомендуют использовать этот файл HTML. Вы можете скачать страницу, нажав Файл> Сохранить страницу как… меню в вашем браузере. Скрипты, которые вам понадобятся (React, React DOM, Babel), также будут загружены в реагирующие-example_files / папка. Затем добавьте следующие теги сценария к раздел вашего HTML-документа:

Вместо того, чтобы загружать их, вы можете добавить скрипты React из CDN также.

Вы также можете использовать минимизированные версии из приведенных выше файлов JavaScript:

Если вы предпочитаете установить React с npm, лучший способ - это использовать Создать приложение React Репозиторий Github, созданный Facebook Incubator - это также решение, которое рекомендуют React docs. Помимо React, это также содержит Webpack, Babel, Autoprefixer, ESLint и другие инструменты разработчика. Для начала используйте следующие команды CLI:

 npm install -g создать-реагировать-приложение создать-реагировать-приложение my-app cd my-app запустить npm

Когда вы будете готовы, вы можете получить доступ к вашему новому приложению React на локальный: 3000 URL:

Если вы хотите узнать больше о как установить React, проверить руководство по установке из документов.

Реагировать и JSX

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

Вот самые важные вещи, которые нужно знать о JSX:

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

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

Создать элементы React

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

Ниже вы можете увидеть простой пример элемента React это добавляет кнопку «Нажмите меня» на страницу HTML. В HTML мы добавляем

контейнер с "MyDiv" ID, который будет заполнен элементом React. Мы создаем наш элемент React внутри

   Мы визуализируем наш элемент React с ReactDOM.render () метод который принимает два обязательных параметра,  Реактивный элемент () а также его контейнер (document.getElementById ( 'myDiv')). Вы можете прочитать больше на как работают элементы React в “Элементы рендеринга” раздел документов.
 Создать компоненты
 Реагировать компоненты являются многоразовые, независимые модули пользовательского интерфейса в котором вы можете легко обновить данные. Компонент может состоять из одного или нескольких элементов React.. Реквизит являются произвольные входы Вы можете использовать для передачи данных в компонент. Компонент React работает аналогично функциям JavaScript - каждый раз, когда он вызывается, он генерирует какой-то вывод.
 Вы можете использовать либо классический синтаксис функции или новый Синтаксис класса ES6 в определить компонент React. В этой статье я буду использовать последнее, так как Babel позволяет нам использовать ECMAScript 6. Если вы заинтересованы в том, как создать компонент без ES6, взгляните на страницу «Компоненты и свойства» документации..
 Ниже вы можете увидеть простой компонент React мы собираемся создать в качестве примера. Это основное уведомление, которое пользователь видит после входа на сайт. Есть три части данных, которые будут переходить от случая к случаю: имя пользователя, количество сообщений и количество уведомлений, мы передадим эти как реквизит.
  
Каждый компонент React является классом JavaScript, который расширяет React.Component базовый класс. Наш компонент будет называться Статистика так как он предоставляет пользователю основную статистику. Сначала мы создать Статистика учебный класс с Класс Stats расширяет React.Component … синтаксис, то мы сделать это на экране позвонив ReactDOM.render () метод (мы уже использовали последний в предыдущем разделе).
  Класс Stats extends React.Component render () return (  Здравствуйте, this.props.name, у вас есть this.props.notifications новых уведомлений и this.props.messages новых сообщений. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 
 Первый аргумент ReactDOM.render () метод состоит из название нашего компонента React (), а также его реквизит (название, уведомления, а также Сообщения) со своими ценностями. Когда мы объявляем значения реквизита, строки должны быть заключенный в кавычки (лайк "Джон Доу") и числовые значения в фигурных скобках (лайк 3).
 Обратите внимание, что из-за JavaScript мы используемый имя класса вместо учебный класс чтобы передать атрибут класса в тег HTML (= имя класса «Резюме»).
 Соответствующая HTML-страница выглядит следующим образом:
          
    
 В документации React есть много других интересных примеров как создавать и управлять компонентами React, а также что еще знать о реквизите.
 дальнейшее чтение
 С React появился Facebook новый вид рамок в развитие фронта, что бросает вызов модели проектирования MV *. Если вы хотите лучше понять, как это работает и что вы можете и чего не можете с этим сделать, вот несколько интересных статей, которые могут помочь:
 Сообщение в блоге Facebook на почему они построили React.
 Блестящий пост Эндрю Рэя о хорошем и плохом из React.
 Codementor on Как React и AngularJS сравнивают.
 Мышление FreeCodeCamp о том, MVC мертв на переднем конце.
 Статья HackerNoon о как оптимизировать производительность, связанную с React.