|
| 1 | +# react-howto |
| 2 | + |
| 3 | +Если вы новичок в React (или frontend-разработке в принципе), экосистема может показаться запутанной. В этом несколько причин. |
| 4 | + |
| 5 | +* Исторически React был разработан для экспертов и ранних последователей |
| 6 | +* Facebook открывает исходный код только тех продуктов, которые используются социальной сетью, т. е. изначально не нацеленные на проекты-меньше-чем-Facebook |
| 7 | +* Огромное количество гайдов по React совершенно разной сложности |
| 8 | + |
| 9 | +В этом документе я буду считать, что вы уже знакомы с HTML, CSS и JavaScript. |
| 10 | + |
| 11 | +## Зачем меня слушать? |
| 12 | + |
| 13 | +Существует тонна советов по React; зачем меня слушать? |
| 14 | + |
| 15 | +Я работал в команде в Facebook, которая разработала и открыла React в open-source. Теперь я работаю не в Facebook, а в небольшом стартапе, поэтому могу говорить с точки зрения своей текущей позиции, а не Facebook'а. |
| 16 | + |
| 17 | +## Как подойти к экосистеме React |
| 18 | + |
| 19 | +Все программное обеспечение строиться на определенном стеке технологий, и вам нужно понимать этот стек, чтобы создать приложение. Основная причина того, почему экосистема React'а кажется непреодолимой, это потому что она постоянно объясняется в неправильном порядке. |
| 20 | + |
| 21 | +Вы должны учиться в этом порядке, **ничего не пропуская и не изучая две вещи параллельно**: |
| 22 | + |
| 23 | +* [React](#user-content-Изучение-самого-react) |
| 24 | +* [`npm`](#user-content-Изучение-npm) |
| 25 | +* [JavaScript “bundlers” (сборщики)](#user-content-Изучение-javascript-сборщиков) |
| 26 | +* [ES6](#user-content-Изучение-es6) |
| 27 | +* [Routing](#user-content-Изучение-роутинга) |
| 28 | +* [Flux](#user-content-Изучение-flux) |
| 29 | + |
| 30 | +**Вам не нужно это все, чтобы быть продуктивным с React.** Приступайте к следующему шагу, если у вас есть проблема, которую он решает. |
| 31 | + |
| 32 | +Также, в React-сообществе есть несколько тем, которые являются "супер-современными практиками" ("bleeding edge"). Эти темы интересны, но разбираться в них сложно и они менее популярны, чем темы выше и **не нужны для разработки большей части приложений**. |
| 33 | +* [Инлайновые стили](#user-content-Изучение-инлайновых-стилей) |
| 34 | +* [Рендер на стороне сервера](#user-content-Изучение-рендера-на-стороне-сервера) |
| 35 | +* [Immutable.js](#user-content-Изучение-immutablejs) |
| 36 | +* [Relay, Falcor, и т. д.](#user-content-Изучение-relay-falcor-и-т-п) |
| 37 | + |
| 38 | +## Изучение самого React |
| 39 | + |
| 40 | +Существует заблуждение, что чтобы начать работу с React, нужен огромный инструментарий. Но это не так. В официальной документации вы найдете [copy-paste HTML шаблон](https://facebook.github.io/react/docs/getting-started.html#quick-start-without-npm), который достаточно сохранить в `.html` файле и сразу же начать работать. **Для этого шага не нужен никакой инструментарий, и не стоит приниматься за него, пока вы не будете чувствовать себя комфортно с основами React.** |
| 41 | + |
| 42 | +Я также считаю, что самый простой способ выучить React, это [официальный туториал](https://facebook.github.io/react/docs/tutorial.html). |
| 43 | + |
| 44 | +## Изучение `npm` |
| 45 | + |
| 46 | +`npm` это менеджер пакетов Node.js и самый популярный способ для front-end разработчиков и дизайнеров делиться JavaScript кодом. Он включает модульную систему `CommonJS` и позволяет устанавливать инструменты командной строки, написанные JavaScript. Прочитайте [эту статью](http://0fps.net/2013/01/22/commonjs-why-and-how/), чтобы понять, почему и как используется `CommonJS`, или [CommonJS Spec Wiki](http://wiki.commonjs.org/wiki/Introduction) для большей информации о `CommonJS` API. |
| 47 | + |
| 48 | +Большая часть компонентов, библиотек и инструментария в экосистеме React доступны как `CommonJS` модули и устанавливаются с помощью `npm`. |
| 49 | + |
| 50 | +## Изучение JavaScript сборщиков |
| 51 | + |
| 52 | +По определенному количеству технических причин, использование `CommonJS` модулей (то есть всего в `npm`) невозможно нативно в браузере. Вам понадобится JavaScript “bundler” для сборки этих модулей в `.js` файлы, которые затем можно будет включить в страницу тегом `<script>`. |
| 53 | + |
| 54 | +Примерами JavaScript сборщиков являются `webpack` и `browserify`. Они оба являются хорошим выбором, но я предпочитаю `webpack`, так как он имеет определенный набор фич, упрощающих разработку крупных приложений. Так как документация может показаться запутанной, у меня есть [шаблон для быстрого старта](https://github.com/petehunt/react-webpack-template), и я написал [how-to гайд по webpack](https://github.com/petehunt/webpack-howto) для более сложных кейсов. |
| 55 | + |
| 56 | +Стоит запомнить: `CommonJS` использует функцию `require()` для импорта модулей, из-за чего некоторые пользователи начинают думать, что это нечто связанное с библиотекой `require.js`. По определенному количеству технических причин, я советую избегать `require.js`. Этот выбор не популярен в среде React. |
| 57 | + |
| 58 | +## Изучение ES6 |
| 59 | + |
| 60 | +Кроме JSX (который вы изучили в туториале React), вы могли заметить несколько забавных синтаксических конструкций в примерах. Это называется ES6, самая последняя версия JavaScript, с которой вы еще можете быть не знакомы. Из-за новизны, ES6 еще не полностью доступен в браузерах, но ваш сборщик может транслировать его в поддерживаемый JavaScript после определенной настройки. |
| 61 | + |
| 62 | +**Вам не обязательно знать ES6 для разработки на React**, вы можете выучить его попутно. |
| 63 | + |
| 64 | +Вы также могли слышать разговоры о том, что ES6-классы являются предпочитаемым способом создания компонентов React. Это не так. Большинство людей (включая Facebook) используют `React.createClass()`. |
| 65 | + |
| 66 | +## Изучение роутинга |
| 67 | + |
| 68 | +“Одностраничные приложения” (Single-page applications или SPA) - современная мода. Это веб-странички которые загружаются один раз, и, когда пользователь кликает по ссылке или кнопке, JavaScript, работающий на странице, обновляет адресную строку и контент, не перезагружая страницу целиком. Управление адресной строкой осуществляется **router** (роутером). |
| 69 | + |
| 70 | +Самый популярный роутер в экосистеме React [react-router](https://github.com/rackt/react-router). Если вы разрабатываете одностраничное приложение, используете его, если только у вас нет хорошей причины не делать этого. |
| 71 | + |
| 72 | +**Не используйте роутер, если вы не создаете single-page application**. Большинство проектов все равно начинают с маленьких компонентов внутри имеющегося большого приложения. |
| 73 | + |
| 74 | +## Изучение Flux |
| 75 | + |
| 76 | +You’ve probably heard of Flux. There’s a *ton* of misinformation about Flux out there. |
| 77 | + |
| 78 | +A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. **This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.** |
| 79 | + |
| 80 | +React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive `props` that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux. |
| 81 | + |
| 82 | +**You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.** |
| 83 | + |
| 84 | +If you have decided to use Flux, the most popular and well-documented Flux library is [Redux](http://redux.js.org/). There are *a lot* of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one. |
| 85 | + |
| 86 | +## Изучение инлайновых стилей |
| 87 | + |
| 88 | +Пре-React, большинство людей использовали CSS-препроцессоры типа SASS для переиспользования стилей. React делает написание переиспользуемых компонентов простым, также упрощая и написание стилей. Многие из сообщества (включая меня) экспериментируют над тем, чтобы совсем избавиться от CSS. |
| 89 | + |
| 90 | +В силу ряда причин, это относительно безумная идея. Она усложняет написание media queries, и, возможно, есть определенные ограничния по производительности. **Если вы только что начали работать с React, пишите css-стили так как вы привыкли.** |
| 91 | + |
| 92 | +Как только вы почувствуете то, как React работает, обратите внимание на альтернативные техники. Одна из популярных, это [BEM](https://en.bem.info/). Я бы порекомендовал избавляться от CSS-препроцессора, так как React предоставляет более гибкий путь переиспользования стилей (через переиспользование компонентов) и ваш JavaScript-сборщик может генерировать гораздо более эффективные таблицы стилей для вас ([доклад на эту тему на OSCON](https://www.youtube.com/watch?v=VkTCL6Nqm6Y)). Вместе с тем, React, как и любая другая JavaScript библиотека, сможет работать также хорошо с любым CSS-препроцессором. |
| 93 | + |
| 94 | +## Изучение рендера на стороне сервера |
| 95 | + |
| 96 | +Серверный рендеринг часто называется "универсальным" или "изоморфным" JS. Это означает что вы можете взять ваши React-компоненты и отрендерить их в статический HTML на сервере. Это ускоряет первоначальную загрузку страницы, так как пользователю не нужно ждать, пока скачается весь JS, чтобы увидеть UI, а React, в свою очередь, может переиспользовать HTML, сгенерированный на сервере, не рендеря ничего на клиенте повторно. |
| 97 | + |
| 98 | +Серверный рендеринг вам понадобится, если вы посчитаете, что первичный рендер страницы слишком медленный, или чтобы улучшить ранжирование в поисковиках. Да, Google индексирует контент, рендеренный на клиенте, но по состоянию на январь 2016 каждое измерение показывало, что это негативно влияет на ранжирование, потенциально из-за производительности рендера. |
| 99 | + |
| 100 | +Также серверный рендеринг требует большого количества инструментария для "правильной" реализации. Так как поддержка React-компонентов написанных без мысли о серверном рендеринге, в целом прозрачна, рекомендуется сначала писать приложение, а потом задумываться о нем. Вам не прийдется переписывать все ваши компоненты в случае решения о переходе. |
| 101 | + |
| 102 | +## Изучение Immutable.js |
| 103 | + |
| 104 | +[Immutable.js](https://facebook.github.io/immutable-js/) предоставляет набор структур данных, которые помогают решать определенные проблемы с производительностью в React-приложениях. Это отличная библиотека, и, скорее всего, вы будете часто использовать ее с ростом вашего приложения, но она абсолютно не является требованием, пока вы не столкнетесь с проблемами производительности. |
| 105 | + |
| 106 | +## Изучение Relay, Falcor и т. п. |
| 107 | + |
| 108 | +Эти технологию помогают уменьшить количество AJAX-запросов. Они все еще являются относительно экспериментальными, так что если у вас нет проблем со слишком большим количеством AJAX запросов, вам не нужны Relay или Falcor. |
0 commit comments