React.js на русском языке. Часть первая

Мне очень нравиться концепция и подход React.js, что решил сделать перевод официальной документации React.js на русский язык. В одном посте все конечно не поместиться, так что это будет цикл постов.

Для чего я это сделал? Хочется внести свой вклад в данную библиотеку и скорее всего данный перевод будет полезен, кто сильно хочет учить и развиваться в данном направление, но имеет проблемы с английски языком.

Установка

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

Знакомство с React

Если вы хотите просто ознакомиться с библиотекой, вы можете использовать онлайн-инструмент CodePen. Попробуйте начать с легкого примера кода «Hello World». При этом, не нужно ничего устанавливать, вы можете просто модифицировать код и наблюдать, как работает программа.

Создание одностраничного приложения

Create React App – это лучший инструмент для создания нового одностраничного приложения.

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

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Create React App не привязан к программной логике или хранилищам информации, он просто создает фронтенд, с которым вы можете работать с любого сервера. В процессе сборки он использует такие расширения, как Webpack, Babel и ESLint, однако, вы можете конфигурировать их.

Как добавить React к приложению

Используя npm. Мы рекомендуем использовать React с пакетным менеджером npm c таким упаковщиком, как Browserify или webpack. Если вы используете npm для управления клиентскими пакетами, вы можете установить React следующим образом:

npm install --save react react-dom

И импортируем его в наш проект:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Этот код преображается в HTML элемент с ID root, поэтому, в HTML файле нужно установить . Когда вы используете React таким образом, вы должны преобразовать код JavaScript, используя Babel, указать es2015 и react, и предварительные установки.

Чтобы использовать React в режиме разработчика, измените следующие значение NODE_ENV на «production».

Внедрение ES6 и JSX

Мы рекомендуем использовать React с Babel чтобы иметь возможность иcпользовать ES6 в вашем JavaScript коде. ES6 это набор современных инструментов JavaScript который упрощает процесс разработки, а JSX это расширение языка JavaScript, который отлично работает с React.

Инструкции по установке Babel показывают, как конфигурировать Babel во множество различных сред разработки. Убедитесь, что вы установили babel-preset-react и babel-preset-es2015 и подключили их в вашем .babelrc, и тогда продолжайте работать.

Использование CDN (Сеть доставки контента)

Если вы не хотите управлять клиентским пакетом через npm, react и react-dom пакеты также позволяют использовать UMD распределения в dist папках, которые размещены в CDN:

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Hello World

Чтобы начать работу с React, просто используйте этот пример кода «Hello World» на CodePen. Вам не нужно ничего устанавливать, вы можете просто открыть его в другой вкладке и выполнять действия, следуя нашим примерам. Если вы предпочитаете использовать локальную среду разработки, обратитесь к странице установка.

Небольшой пример React кода выглядит так:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Он отображает заголовок «Hello World» на странице. Следующие несколько разделов будут постепенно знакомить вас с использованием React. Мы изучим блоки разработки приложений React: их элементы и компоненты. После того, как вы овладеете инструментом React, вы сможете создавать сложные приложения из небольших повторно применяемых частей.

Примечание на JavaScript

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

Также, в некоторых примерах мы используем обозначения ES6. Мы стараемся употреблять их нечасто, поскольку они являются относительно новыми, но мы также хотим, чтобы вы немного познакомились с такими формулировками, как стрелочная функция (arrow functions), классы (classes), шаблонные строки (template literals), и переменные let и const. Вы можете использовать Babel REPL чтобы убедиться, что ES6 код компилируется.

Автор: html_manpro

Источник