- PVSM.RU - https://www.pvsm.ru -

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

image

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

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

Установка

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

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

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

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

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

Он снабжает вас необходимой средой для разработки приложений, это означает, что вы будете иметь доступ к новейшим функциям 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 [3] или webpack [4]. Если вы используете 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 [5] показывают, как конфигурировать 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 [6]. Вам не нужно ничего устанавливать, вы можете просто открыть его в другой вкладке и выполнять действия, следуя нашим примерам. Если вы предпочитаете использовать локальную среду разработки, обратитесь к странице установка.

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

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

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

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

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

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

Автор: html_manpro

Источник [14]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/210748

Ссылки в тексте:

[1] примера кода «Hello World»: http://codepen.io/gaearon/pen/rrpgNB?editors=0010

[2] Create React App: https://github.com/facebookincubator/create-react-app

[3] Browserify: http://browserify.org/

[4] webpack: https://webpack.github.io/

[5] Инструкции по установке Babel: https://babeljs.io/docs/setup/

[6] этот пример кода «Hello World» на CodePen: http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

[7] освежить знания JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

[8] arrow functions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

[9] classes: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

[10] template literals: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

[11] let: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

[12] const: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

[13] Babel REPL: http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%252Creact&experimental=false&loose=false&spec=false&code=const%2520element%2520%253D%2520%253Ch1%253EHello%252C%2520world!%253C%252Fh1%253E%253B%250Aconst%2520container%2520%253D%2520document.getElementById('root')%253B%250AReactDOM.rend

[14] Источник: https://habrahabr.ru/post/315466/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox