React руководство: Начало работы – React

Начало работы – React

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

React — это JavaScript-библиотека для разработки пользовательского интерфейса. Чтобы составить первое впечатление о React, зайдите на главную страницу или во введение.

Пробуем React

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

Онлайн-песочницы

Если вы просто хотите немного поиграть с React, попробуйте онлайн-песочницу. Например, вот простейший шаблон на CodePen, CodeSandbox или Stackblitz.

Если вы предпочитаете работать в своём редакторе, скачайте тестовый HTML-файл, добавьте в него код и запустите на своём компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров.

Добавляем React на сайт

Вы можете добавить React на свой сайт буквально за одну минуту. После этого можно разместить на сайте несколько динамических виджетов и постепенно наращивать использование React в своём проекте.

Создаём React-приложение

Когда вы начинаете проект на React, то простая HTML-страница со script-тегами может быть лучшим вариантом. Её можно сделать за минуту.

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

Изучаем React

Люди приходят к React с разным опытом и стилем обучения. Некоторые предпочитают учиться на ходу, а кому-то нравится сначала овладеть теорией. В любом случае мы надеемся, что этот раздел будет для вас полезен.

React сначала может показаться сложным, но приложив усилие, вы обязательно его освоите. Терпение и труд все перетрут!

Простые примеры

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

React для новичков

Если документация кажется вам сложной и усваивается не так быстро, как хотелось, прочтите блог Тани Раша (Tania Rascia). Таня написала о том, как начала работать с React и доходчиво рассказала об его основных принципах. Попробуйте почитать этот пост, а потом вернуться к документации.

React для дизайнеров

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

Ресурсы по JavaScript

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

Чтобы освежить ваши знания, мы рекомендуем просмотреть обзор языка JavaScript на сайте mozilla.org. Для этого потребуется от 30 минут до часа. Надеемся, что теперь вы будете чувствовать себя более комфортно, изучая React.

Совет

Если всё-таки у вас есть пробелы в знаниях, то сайты MDN и learn.javascript.ru будут отличными источниками информации о JavaScript. Также всегда можно задать вопрос или попросить помощи на форумах нашего сообщества.

Введение

Если вы предпочитаете изучать технологии на практике, воспользуйтесь введением. В нём описан процесс разработки игры в крестики-нолики. Даже если вы не планируете программировать игры, всё равно уделите внимание этому разделу документации. Приёмы, которые вы освоите — фундамент для разработки любых приложений на React. Введение даст вам более глубокое понимание React.

Пошаговое описание React

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

Философия React

Многие вспоминают, как чтение Философии React поставило всё на свои места. Пускай это и самое древнее руководство по React, но оно всё так же актуально.

Рекомендуемые курсы

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

Углублённое изучение React

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

Справочник API

Этот раздел документации описывает нюансы использования React API. Например, в главе React.Component API рассказывается о работе функции setState() и различных методах управления жизненным циклом компонентов.

Глоссарий и FAQ

Глоссарий содержит перечень наиболее употребляемых терминов, которые встречаются в документации. Также есть раздел FAQ. В нём короткие вопросы и ответы на самые животрепещущие темы, такие как использование AJAX, состояние компонентов или структура проекта.

Информация о релизах

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

Также вы можете подписаться на наш аккаунт @reactjs в Twitter. Однако вы не пропустите ничего важного, если будете следить только за блогом.

В блоге мы пишем не о всех релизах React, но всегда есть возможность посмотреть полный список изменений в файле CHANGELOG.md в репозитории React, а также на странице Релизы.

Документация на старые версии React

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

Обратная связь

Если вы обнаружите в документации какие-нибудь неточности, ошибки или любые другие непонятки, пожалуйста, создайте ишью в репозитории документации с указанием способа решения проблемы или просто твитните в Twitter @reactjs. Мы всегда рады слышать вас!

Добавляем React на сайт – React

Используйте React в том объёме, в котором вам хочется.

Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.

Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.

Добавляем React за одну минуту

В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML файл.

Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.

Необязательно: скачать готовый пример (архив 2 Кбайт)

Шаг 1: Добавляем DOM-контейнер в HTML

Для начала, откройте HTML файл страницы, которую хотите отредактировать. Добавьте пустой тег <div> в месте, где вы хотите отобразить что-нибудь с помощью React. Например:

<div></div>

Затем назначьте созданному <div> уникальный атрибут id. Это позволит впоследствии найти тег из JavaScript кода и отобразить React-компоненты внутри него.

Совет

«Контейнер» <div> можно поместить где угодно внутри тега <body>. Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.

Шаг 2: Добавляем script-теги

Теперь добавьте три <script>-тега перед закрывающим тегом </body>:

  

  
  
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  
  <script src="like_button.js"></script>
</body>

Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.

Шаг 3: Создаём React-компонент

Создайте файл с именем like_button.js рядом с вашим HTML файлом.

Возьмите этот стартовый код и вставьте его в созданный ранее файл.

Совет

В данном коде создаётся React-компонент с именем LikeButton. Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.

Добавьте ещё 2 строки в конец файла like_button.js, после стартового кода:

const domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);

Эти две строки кода ищут элемент <div>, который мы добавили на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.

Готово!

Вот и всё! Вы только что добавили свой первый React-компонент на страницу.

Перейдите к следующим разделам, если хотите узнать о других способах добавить React.

Посмотреть финальный код примера

Скачать код примера (архив 2 Кбайт)

Совет: Повторное использование компонентов

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

Посмотреть исходный код примера

Скачать код примера (архив 2 Кбайт)

Примечание

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

Совет: Минификация JavaScript для продакшена

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

Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js:

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.

Необязательно: Используем React с JSX

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

const e = React.createElement;


return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Нравится'
);

Однако, React позволяет использовать специальный синтаксис, называющийся JSX:

return (
  <button onClick={() => this.setState({ liked: true })}>
    Нравится
  </button>
);

Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.

Вы можете попробовать JSX в этом онлайн-конвертере.

Быстрый старт с JSX

Чтобы быстро попробовать JSX, добавьте такой <script>-тег на страницу:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Теперь синтаксис JSX доступен внутри каждого <script>-тега, у которого есть атрибут type="text/babel". Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.

Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее <script>-тег и все атрибуты type="text/babel". Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри <script>-тегов.

Добавляем JSX в проект

JSX можно добавить в существующий проект и без разных сложных инструментов вроде бандлера или сервера для разработки. По сути, добавление JSX напоминает добавление препроцессора CSS. Необходимо лишь убедиться, что на вашем компьютере установлен Node.js.

С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:

1. Шаг 1: Запустите команду npm init -y (если появляются ошибки, попробуйте этот способ)
2. Шаг 2: Запустите команду npm install babel-cli@6 babel-preset-react-app@3

Совет

Мы используем npm только для установки препроцессора JSX. React и код приложения всё ещё остаются в <script>-тегах.

Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.

Запускаем препроцессор JSX

Создайте директорию с названием src и наберите в терминале следующую команду:

npx babel --watch src --out-dir . --presets react-app/prod

Примечание

npx не является опечаткой. Это инструмент запуска пакетов, появившийся в npm версии 5.2+.

Если у вас появляется сообщение об ошибке, похожее на «You have mistakenly installed the babel package», то это означает, что вам нужно пройти предыдущий шаг, а затем повторить запуск команды.

Дожидаться завершения работы команды не нужно — она работает в режиме наблюдения за изменениями в JSX-коде.

Попробуйте создать файл с названием src/like_button.js и вставить в него этот стартовый JSX-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js. При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.

Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.

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

Начало работы с React — Изучение веб-разработки

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

Как гласит официальный слоган, React — это библиотека для создания пользовательских интерфейсов. React не является фреймворком – он даже не рассчитан исключительно для web. Он используется для визуализации и в связке с другими библиотеками. Например, React Native можно использовать для создания мобильных приложений; React 360 можно использовать для создания приложений виртуальной реальности; помимо того есть и другие варианты.

Для создания веб-приложений разработчики используют React в тандеме с ReactDOM. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.

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

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

Хотя React можно использовать для небольших частей интерфейса, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложения с помощью React.

Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьезные требования к инструментарию, но этому можно освоить.

В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью create-react-app, предоставляемого Facebook.

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript’s syntax so that HTML-like code can live alongside it. For example:

const heading = <h2>Mozilla Developer Network</h2>;

This heading constant is known as a JSX expression. React can use it to render that <h2> tag in our app.

Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

const header = (
  <header>
    <h2>Mozilla Developer Network</h2>
  </header>
);

Note: The parentheses in the previous snippet aren’t unique to JSX, and don’t have any effect on your application. They’re a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:

const header = <header>
    <h2>Mozilla Developer Network</h2>
</header>

However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.

Of course, your browser can’t read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:

const header = React.createElement("header", null,
  React.createElement("h2", null, "Mozilla Developer Network")
);

It’s possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don’t have to configure compilation yourself unless you want to.

Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you’re comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.

To read more about JSX, check out the React team’s JSX In Depth article.

There are many ways to use React, but we’re going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.

It’s possible to add React to a website without create-react-app by copying some <script> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.

Requirements

In order to use create-react-app, you need to have Node.js installed. It’s recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).

You may also use the Yarn package manager as an alternative, but we’ll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

If you’re using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.

Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.

Also see the following for more information:

Initializing your app

create-react-app takes one argument: the name you’d like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you cd to the place you’d like your app to live on your hard drive, then run the following in your terminal:

npx create-react-app moz-todo-react

This creates a moz-todo-react directory, and does several things inside it:

• Installs some npm packages essential to the functionality of the app.
• Writes scripts for starting and serving the application.
• Creates a structure of files and directories that define the basic app architecture.
• Initializes the directory as a git repository, if you have git installed on your computer.

Note: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:

npx create-react-app moz-todo-react --use-npm

create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.

When the process is complete, cd into the moz-todo-react directory and run the command npm start. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:

Application structure

create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:

moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

The src directory is where we’ll spend most of our time, as it’s where the source code for our application lives.

The public directory contains files that will be read by your browser while you’re developing the app; the most important of these is index.html. React injects your code into this file so that your browser can run it. There’s some other markup that helps create-react-app function, so take care not to edit it unless you know what you’re doing. You very much should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!

The public directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our Deploying our app tutorial.

The package.json file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don’t need to understand this file at all to complete this tutorial, however, if you’d like to learn more about it, you can read What is the file `package.json`? on NodeJS.org; we also talk about it in our Package management basics tutorial.

In React, a component is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.

Let’s open src/App.js, since our browser is prompting us to edit it. This file contains our first component, App, and a few other lines of code:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.

Import statements

The import statements at the top of the file allow App.js to use code that has been defined elsewhere. Let’s look at these statements more closely.

import React from 'react';
import logo from './logo.svg';
import './App.css';

The first statement imports the React library itself. Because React turns the JSX we write into React.createElement(), all React components must import the React module. If you skip this step, your application will produce an error.

The second statement imports a logo from './logo.svg'. Note the ./ at the beginning of the path, and the .svg extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the logo.svg file lives in our source directory.

We don’t write a path or extension when importing the React module — this is not a local file; instead, it is listed as a dependency in our package.json file. Be careful of this distinction as you work through this lesson!

The third statement imports the CSS related to our App component. Note that there is no variable name and no from directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.

The

App component

After the imports, we have a function named App. Whereas most of the JavaScript community prefers camel-case names like helloWorld, React components use pascal-case variable names, like HelloWorld, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the App function to app, your browser would show you an error.

Let’s look at App more closely.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

The App function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.

Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value". On line 3, the opening <div> tag has a className attribute. This the same as the class attribute in HTML, but because JSX is JavaScript, we can’t use the word class – it’s reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We’ll cover them as we encounter them.

Take a moment to change the <p> tag on line 6 so that it reads «Hello, world!», then save your file. You’ll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the «Learn React» link will be gone.

Your App component should now look like this:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

Export statements

At the very bottom of the App.js file, the statement export default App makes our App component available to other modules.

Let’s open src/index.js, because that’s where the App component is being used. This file is the entry point for our app, and it initially looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));




serviceWorker.unregister();

As with App.js, the file starts by importing all the JS modules and other assets it needs to run. src/index.css holds global styles that are applied to our whole app. We can also see our App component imported here; it is made available for import thanks to the export statement at the bottom of App.js.

Line 7 calls React’s ReactDOM.render() function with two arguments:

• The component we want to render, <App /> in this case.
• The DOM element inside which we want the component to be rendered, in this case the element with an ID of root. If you look inside public/index.html, you’ll see that this is a <div> element just inside the <body>.

All of this tells React that we want to render our React application with the App component as the root, or first component.

Note: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.

Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.

Your final index.js file should look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Next, we’ll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We’ll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).

Variables in JSX

Back in App.js, let’s focus on line 9:

<img src={logo} className="App-logo" alt="logo" />

Here, the <img /> tag’s src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.

Let’s try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:

function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

Change line 8 to use our subject variable instead of the word «world», like this:

function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, {subject}!
        </p>
      </header>
    </div>
  );
}

When you save, your browser should display «Hello, React!» instead of «Hello, world!»

Variables are convenient, but the one we’ve just set doesn’t make great use of React’s features. That’s where props come in.

Component props

A prop is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — prop="value". Let’s open index.js and give our <App/> call its first prop.

Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:

ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));

Back in App.js, let’s revisit the App function itself, which reads like this (with the return statement shortened for brevity):

function App() {
  const subject = "React";
  return (
    
  );
}

Change the signature of the App function so that it accepts props as a parameter. Just like any other parameter, you can put props in a console.log() to read it out to your browser’s console. Go ahead and do that after your subject constant but before the return statement, like so:

function App(props) {
  const subject = "React";
  console.log(props);
  return (
    
  );
}

Save your file and check your browser’s JavaScript console. You should see something like this logged:

Object { subject: "Clarice" }

The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.

Now that subject is one of our props, let’s utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. You can also delete your console.log() if you want.

function App(props) {
  const subject = props.subject;
  return (
    
  );
}

When you save, the the app should now greet you with «Hello, Clarice!». If you return to index.js, edit the value of subject, and save, your text will change.

This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we’ll start building our first proper application — a todo list. Before we do that, however, let’s recap some of the things we’ve learned.

In React:

• Components can import modules they need, and must export themselves at the bottom of their files.
• Component functions are named with PascalCase.
• You can read JSX variables by putting them between curly braces, like {so}.
• Some JSX attributes are different to HTML attributes, so that they don’t conflict with JavaScript reserved words. For example, class in HTML translates to className in JSX. Note that multi-word attributes are camel-cased.
• Props are written just like attributes inside component calls, and are passed into components.

Начало работы – React

Эта страница представляет собой обзор документации по React и связанных с ней ресурсов.

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

Попробовать React

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

Интерактивные онлайн-площадки

Если вам нравится “играться” с React, вы можете использовать онлайн-площадку для кода. Попробуйте шаблон Hello World на CodePen или CodeSandbox.

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

Добавление React на сайт

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Создание нового React-приложения

При начале нового проекта React простая HTML-страница с тегами скрипта всё же может быть лучшим вариантом. Это займет всего минуту!

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

Изучение React

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

Как и любая незнакомая технология, у React есть кривая обучения. Немного практики и терпения — и вы научитесь.

Первые примеры

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

React для начинающих

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

React для дизайнеров

Если у вас опыт дизайнера, то данные ресурсы станут отличной отправной точкой для начала работы.

Ресурсы JavaScript

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

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

Совет

Всякий раз, когда вы запутываетесь чем-то в JavaScript, MDN и javascript.info — отличные сайты для самопроверки. Существуют также форумы поддержки сообщества, где вы можете обратиться за помощью.

Практическое руководство

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

Пошаговое руководство

Если вы предпочитаете изучать концепции шаг за шагом, наше руководство по основным концепциями — лучшее место для начала. Каждая следующая глава в нём основывается на знаниях, представленных в предыдущих главах, поэтому вы ничего не пропустите, когда изучаете его по порядку.

Мышление в React

Многие пользователи приписывают чтению Мышление в React в качестве момента при изучении React, когда у них, наконец, что-то “щёлкнуло”. Это, вероятно, старейшее пошаговое руководство, но оно по-прежнему ещё актуально.

Рекомендуемые курсы

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

Продвинутые концепции

Как только вы усвоите основные концепции и немного поиграете с React, вас может быть заинтересуют более сложные темы. В этом разделе вы познакомитесь с мощными, но менее часто используемыми возможностями React, такими как context и refs.

Справочник API

Этот раздел документации полезен, когда вы хотите узнать больше о конкретном API React. Например, Справочник по API React.Component предоставляет подробную информацию о том, как работает функция setState(), и как различные методы жизненного цикла могут быть полезны.

Глоссарий и часто задаваемые вопросы (FAQ)

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

Находясь в курсе событий

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

Вы также можете следить за аккаунтом в Twitter @reactjs, но вы не пропустите ничего существенного, если только читаете блог.

Не каждый релиз React заслуживает своего собственного сообщения в блоге, поэтому вы можете найти подробный журнал изменений для каждой версии в файле CHANGELOG.md в репозитории React, а также на странице Releases.

Версионная документация

Эта документация всегда отражает последнюю стабильную версию React. Начиная с React 16, вы можете найти более старые версии документации на отдельной странице (на английском — прим. пер.). Обратите внимание, что документация для прошлых версий фиксируется в том виде, в котором она есть во время нового релиза и больше не обновляется.

Что-то пропущено?

Если что-то отсутствует в документации или если вы обнаружили какую-либо запутанную часть, пожалуйста, создайте ишью в репозитории документации с вашими предложениями по улучшению, или отправьте твит в аккаунт @reactjs. Мы обожаем получать от вас обратную связь!

Структурирование проекта на React – полное руководство

Экосистема проекта на React дает пользователям полный контроль над происходящим. Наличие гибкой структуры предоставляет много плюшек. Разбираемся.

• Членам команды не нужно думать о структуре проекта. Вместо этого они могут сосредоточиться на создании продукта.
• Поскольку React имеет огромную экосистему, постоянно нужно думать: redux или mobx? HOC или render prop? react-motion или react-spring? Исключение одной из проблем – согласованная структура.
• Общая структура проектов помогает новым специалистам быстро входить в курс дела. Короткий бриф, и уже можно догадаться, что в каждой папке, и для чего нужны файлы в ней.
• Люди с меньшим опытом также могут создавать масштабируемые проекты.
• Совместное и повторное использование кода.

• Увеличение производительности. Нечеткий поиск файлов в редакторе должен быть проще.
• Естественный процесс перемещения файлов.
• Ненавязчивая и разумная гибкость – у разработчиков должно оставаться немного свободы.
• Структура обязана способствовать масштабируемости и повторному использованию.
• Структурированный код должен быть достаточно прост, с минимальным порогом вхождения.

Имя файла компонента должно быть в CamelCase

Имена компонентов должны именоваться в виде TabSwitcher, а не tabSwitcher, tab-switcher и т. д. Называть другие типы файлов в такой нотации не нужно, поскольку CamelCase сигнализирует нам, что файл является компонентом React.

Избегайте экспорта по умолчанию

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

import { TinyButton } from './shared/Button'

Все компоненты должны находиться в каталоге components

Держите компоненты внутри выделенного каталога компонентов. Храните каждый компонент в отдельном файле. Если вам нужен файл стилей – создайте папку, и храните его там.

Главное преимущество в том, что компоненты не спрятаны где-то глубоко внутри. Поскольку они предназначены для повторного использования, их нужно хранить «на виду».

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

Имена папок и компонентов должны совпадать

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

Чтобы избежать необходимости импортировать такие компоненты:

import { TinyButton } from './TinyButton/TinyButton'

создайте файл index.js в той папке компонентов, которая экспортирует именованный компонент.

// components/TinyButton/index.js
export * from './TinyButton'

Храните компоненты, используемые в других проектах, в общем подкаталоге (необязательно)

Некоторые компоненты являются общими для нескольких проектов. Настоятельно рекомендуется создавать такие компоненты. Нет необходимости плодить копии файлов с небольшими различиями.

С помощью Bit можно легко поделиться компонентами с командой, чтобы другим не пришлось изобретать велосипед. Основная «плюшка» Bit в том, что ему не важно, где находится компонент в вашей файловой системе.

Перенесите маршрутизацию в каталог pages

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

Причина того, что логика маршрута не используется повторно, в том, что компоненты страницы не могут быть reusable, но это довольно часто необходимо. Поэтому лучше, чтобы компоненты страницы находились внутри каталога pages.

Преимущества:

• Возможность быстро посмотреть доступные маршруты.
• Центральное расположение всей логики маршрутизации.
• Хранение компонентов страницы отдельно от других.

Имя компонента маршрутизации должно быть в нижнем регистре

Имя компонента маршрутизации соответствует имени маршрута. Имена маршрутов в url являются строчными, поэтому имеет смысл хранить компоненты в нижнем регистре.

Следующие рекомендации не связаны со структурой проекта на React и могут быть использованы в любом React-проекте.

Используйте функциональные компоненты по умолчанию

Начните с функционального компонента. Держите состояние в родителе. После масштабирования переходите к компоненту класса. Больше информации тут.

Используйте Container и Presentational компоненты

Presentational components – это компоненты, не имеющие внутреннего состояния. Их роль – показать определенные части пользовательского интерфейса. Это реквизиты или данные, предоставляемые через контекстные API.

Container components имеют дело с бизнес-логикой. Они обычно обладают некоторым состоянием и отображают только презентационные компоненты на основе логики.

Таким образом, Container и Presentational компоненты дополняют друг друга. Разделив обязанности, поддержка и отладка проекта на React становится проще.

Держите компоненты на поверхности

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

Bit – отличный инструмент для обмена компонентами между проектами. Давайте посмотрим, как использовать Bit, чтобы поделиться нашими компонентами из общего каталога.

1) Установите бит, а затем залогиньтесь, выполнив эту команду:

$ bit login

2) Проинициализируйте свой проект:

$ bit init

3) Добавьте общие компоненты:

$ bit add src/shared/Button.js --id mycomps/button

4) При необходимости импортируйте среды сборки и тестирования.
5) Пометьте тегом общий компонент:

$ bit tag mycomps/button

6) По этой ссылке создайте scope с именем mycomps.
7) Экспортируйте общий компонент в scope следующим образом:

$ bit export your-bit-username/mycomps

Теперь ваш компонент экспортирован в Bit, и его можно использовать в любом проекте. Сочетание этого рабочего процесса с масштабируемой и модульной структурой проекта на React, может упростить обслуживание (change once, update anywhere) и ускорить процесс разработки.

Оригинал

Руководство по использованию стилизованных компонентов React

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

Обзор стилизованных компонентов

Styled Components — это библиотека для React и React Native для написания и управления CSS. Это решение «CSS-in-JS», то есть вы пишете CSS в файлах Javascript (в частности, в компонентах, которые являются файлами Javascript). Это чрезвычайно популярное решение для управления CSS в React: около 8 миллионов загрузок с npm в месяц и 30 тысяч звезд на Github.

Прежде чем углубляться в тему стилизованных компонентов, рекомендуется ознакомиться с React и понять его. Несколько преимуществ библиотеки стилизованных компонентов:

Это простой CSS. Да, вы пишете CSS в файле JS, но синтаксис CSS не изменился.

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Весь неиспользуемый CSS и стили автоматически удаляются

Вы вообще не пишете никаких имен классов. Имена классов генерируются автоматически, поэтому нет необходимости управлять методологией именования классов CSS, такой как БЭМ. (Это станет понятнее, когда вы прочтете статью)

Установка стилизованных компонентов

Чтобы начать работу со стилизованными компонентами, вам сначала нужно установить их в свой проект:

npm install styled-components

И в каждый файл, в котором вы используете стилизованные компоненты, вам нужно добавить этот импорт:

import styled from ‘styled-components’;

И это все! Вы готовы начать работу со стилизованными компонентами.

Создание первого стилизованного компонента

Откройте существующий проект React, над которым вы работаете (или быстро создайте новый проект с помощью create-react-app), и откройте один из существующих компонентов. Здесь вы можете добавить свой первый стилизованный компонент. Теперь, когда вы импортировали styled, вот как можно начать:

// App.js
import React from ‘react’;
import styled from ‘styled-components’;
// Button component that’ll render an <a> tag with some styles
const Button = styled.a`
background-colour: teal;
color: white;
padding: 1rem 2rem;
`
const App = () => {
return (
<Button>I am a button</Button>
)
}
export default App;

Давайте разберем этот код:

Как и при написании функционального компонента React, объявите имя компонента с помощью const Button

styled это то, что мы импортировали выше, и это предоставляет нам функционал стилизованных компонентов

Заметили a после styled? Это представляет собой HTML — элемент ссылки: <a>. При объявлении стилизованного компонента вы можете использовать здесь любой HTML-элемент (например div, h2, section и т. д.)

Есть смысл?

<Button> возвращаемый внутри компонента App, выглядит как обычный компонент React. Потому что это и есть компонент React!

В нашем предыдущем примере мы создали стилизованный компонент внутри существующего компонента. Но вы также можете создать стилизованный компонент в собственном файле. Например, создайте новый файл компонента с именем Button.js и добавьте стилизованный компонент:

// Button.js
import styled from ‘styled-components’;
const Button = styled.a`
background-colour: teal;
color: white;
padding: 1rem 2rem;
`
export default Button;

Button теперь работает как любой другой компонент React. Например, теперь мы можем импортировать этот компонент в файлы других компонентов:

// App.js
import React from ‘react’;
import styled from ‘styled-components’;
// import the styled component:
import Button from ‘./Button’;
const App = () => {
return (
<Container>
<Button>I am a button</Button>
</Container>
)
}
export default App;

Вот и все! Поздравляю, вы только что создали свой первый стилизованный компонент!

Использование свойства для настройки стилизованных компонентов

Представьте, что у вас есть компонент <Button />, и вам нужно стилизовать разные варианты этой кнопки (первичная, вторичная, предупреждение и т. д.).

У стилизованных компонентов есть элегантное решение для этого — вы используете свойства, чтобы сделать стили компонентов динамическими.

Давайте рассмотрим пример, чтобы понять, что я имею в виду. Здесь мы отображаем два компонента Button, один со свойством primary:

// App.js
import React from ‘react’;
import styled from ‘styled-components’;
import Button from ‘./Button’;
const App = () => {
return (
<>
<Button>I am a button</Button>
<Button primary>I am a primary button</Button>
</>
)
}
export default App;

А теперь внутри компонента <Button /> мы можем добавить динамические стили:

// Button.js
import styled from ‘styled-components’;
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
border: 2px solid white;
background: ${props => props.primary ? ‘white’ : ‘palevioletred’ }
color: ${props => props.primary ? ‘palevioletred’ : ‘white’ }
`
export default Button;

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Проще говоря, по сути background: ${props => props.primary ? ‘white’ : ‘palevioletred’ } означает: если свойство primary истинно, то должен быть фон white, иначе должен быть фон palevioletred.

Подобная обработка свойства работает в некоторых случаях использования, но может стать проблемой, если у вас есть несколько свойств (например, primary, secondary, danger и т. д.), а также несколько строк CSS.

Часто имеет смысл импортировать { css } из styled-components так:

// Button.js
import styled, { css } from ‘styled-components’;
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
export default Button;

Это позволяет разделить динамические стили для разных свойств. Например, добавление стилей для свойства danger будет выглядеть так:

// Button.js
import styled, { css } from ‘styled-components’;
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
${props => props.primary && css`
background: white;
color: palevioletred;
`}

${props => props.danger && css`
background: red;
color: white;
`}
`
export default Button;

Отлично! Мы неплохо продвигаемся. Как насчет того, чтобы сделать <Button /> немного более адаптивным, а?

Использование медиа-запросов, чтобы сделать стилизованные компоненты адаптивными

К счастью, сделать стилизованные компоненты адаптивными очень просто. Добавьте медиа-запросы в литерал шаблона, например:

// Button.js
import styled from ‘styled-components’;
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 9rem;
background: transparent;
color: white;
border: 2px solid white;
@media (min-width: 768px) {
padding: 1rem 2rem;
width: 11rem;
}

@media (min-width: 1024px) {
padding: 1.5rem 2.5rem;
width: 13rem;
}
`
export default Button;

Обработка состояний наведения и других псевдо-селекторов с помощью стилизованных компонентов

Как и при добавлении медиа-запросов к стилизованным компонентам, добавить псевдо-селекторы довольно просто. Например, добавление состояния наведения к компоненту <Button /> будет выглядеть так:

// Button.js
import styled from ‘styled-components’;
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 9rem;
background: transparent;
color: white;
border: 2px solid white;
:hover {
border-color: green;
}
`
export default Button;

Создание глобальных стилей

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

Например, вы можете захотеть:

Установить семейство шрифтов для всей типографики

Установить цвет фона на каждой странице

Отменить некоторые стили браузера по умолчанию

В Styled Components есть решение для глобальных стилей с использованием функции createGlobalStyle. Сначала перейдите к компоненту, который находится наверху дерева React.

Например, если вы работаете в проекте приложения create-react-app, это будет файл App.js. Здесь вам нужно будет импортировать createGlobalStyle в свой проект и установить некоторые стили для компонента GlobalStyle (вы можете назвать этот компонент как хотите):

// App.js
import React from ‘react’;
import styled, { createGlobalStyle } from ‘styled-components’;
import { Container, Nav, Content } from ‘../components’;
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background: teal;
font-family: Open-Sans, Helvetica, Sans-Serif;
}
`;
const App = () => {
return (
<Container>
<Nav />
<Content />
</Container>
)
}
export default App;

При этом стили пока не будут применяться к проекту. Теперь мы должны использовать компонент GlobalStyle, чтобы применить глобальные стили для приложения. Вы делаете это, помещая компонент GlobalStyle в верхнюю часть дерева React:

// App.js
import React from ‘react’;
import styled, { createGlobalStyle } from ‘styled-components’;
import { Container, Nav, Content } from ‘../components’;
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background: teal;
font-family: Open-Sans, Helvetica, Sans-Serif;
}
`;
const App = () => {
return (
<>
<GlobalStyle />
<Container>
<Nav />
<Content />
</Container>
</>
)
}
export default App;

Заметили использование короткого синтаксиса фрагментов? Это необходимо, поскольку вы размещаете компонент <GlobalStyle /> как родственный элемент наверху дерева. И это все! Глобальный стиль теперь полностью настроен с помощью стилизованных компонентов.

Заключение

Хорошая работа, если вы добрались до конца. Мы многое рассмотрели! В частности:

Что такое стилизованные компоненты и почему вам следует подумать об их использовании

Как установить стилизованные компоненты

Создание первого стилизованного компонента

Динамичные стилизованные компоненты с помощью свойства

Использование медиа-запросов, чтобы сделать стилизованные компоненты адаптивными

Как обрабатывать псевдо-селекторы с помощью стилизованных компонентов

Глобальные стили

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

Автор: Tom Ray

Источник: //scalablecss.com

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

React JS. Практический Курс 2020 (вкл. Хуки, Классы, Redux)

Основная часть курса включает 108 уроков общей продолжительностью 16 часов.

И это без учета бонусов, в которых содержится ВСЯ необходимая теоретическая база для овладения React.js с полного нуля (включая основы JavaScript)!

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

Фундаментальная теория

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

Море практики

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

Актуальная технология

По итогам курса вы создадите Serverless Single Page Application на material design с Firebase – один из главных трендов.

Примеры из реальной жизни

Вы получаете ценный личный опыт с практическими примерами из реальной жизни высокооплачиваемого Frontend-разработчика.

После прохождения курса вы сможете:

• Разрабатывать реальные приложения на стеке React

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

• Разрабатывать мобильные приложения

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

• Участвовать в стартапах

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

• Выполнять весь комплекс Frontend-разработки

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

Итоговый результат:

В качестве наглядного примера SPA-приложения мы выбрали приложение для создания и прохождения тестов. Именно оно и разрабатывается в курсе

Приложение состоит из двух частей: общей и администраторской.

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

В общей части приложения отображаются созданные тесты, в которых конечный пользователь сможет выбрать и пройти любой выбранный тест, ответив на вопросы.

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

Результат является наглядным примером применения ВСЕХ актуальных технологий создания реактивных полностью адаптивных SPA и их взаимодействия. На основе этих составляющих можно создать приложение практически любого функционала.

Курс вам поможет, если вы:

• Начинающий Frontend-разработчик

  Вы нуждаетесь в пошаговом фундаментальном обучении с полного нуля и поддержке опытного наставника. Хотите сразу изучить и начать использовать современные технологии.

• Опытный Frontend-разработчик

  Для вас важно быть в тренде и пользоваться только актуальными и востребованными технологиями веб-разработки для достижения максимальных заработков.

• Фрилансер-практик

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

• Хотите устроиться в веб-студию

  Сейчас в сфере веб-разработки четко прослеживается тренд: все большую популярность набирают одностраничные приложения (англ. single page application, SPA). Причем этот тренд в ближайшие 3-5 лет будет только усиливаться. И если в вашем багаже знаний будет инструмент, с помощью которого такие приложения можно создавать, например, React, то вы будете выглядеть гораздо привлекательнее тех, кто владеет знаниями обычной верстки на HTML, CSS, JavaScript.

• Боитесь быстрого устаревания знаний

  JavaScript становится лидирующим языком Frontend-разработки. Сегодня едва не каждый день появляются новые JS-библиотеки и фреймворки. И изучив подобную библиотеку или фреймворк сегодня, уже завтра можно обнаружить, что они уже не востребованы и никому не нужны. React применяется уже более 5 лет и является самой популярной JS-библиотекой с поддержкой Facebook. Все это дает уверенность в том, что React будет актуален еще многие годы.

• Владеете другими JS-фреймворками

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

React — обязательный инструмент для современного разработчика.

React — это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательского интерфейса. Она была создана компанией Facebook и представлена разработчикам в 2013 году.

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

Еще больше он подходит для создания SPA-приложений (single page application) — приложений, использующих один HTML-шаблон для всех страниц приложения.

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

Еще одной особенностью является использование JSX. JSX представляет собой комбинацию кода JavaScript и XML, и простой, интуитивно понятный способ для определения кода визуального интерфейса. Конечно, при работе с React не обязательно использовать JSX. При разработке можно использовать обычный JavaScript, но: JSX проще в написании; легче читается и упрощает обслуживание; запускается быстрее, чем такой же код на JavaScript.

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

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

Начало работы — React

Эта страница представляет собой обзор документации React и связанных ресурсов.

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

Попробуйте React

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

Игровые площадки онлайн

Если вы хотите поиграть с React, вы можете использовать онлайн-площадку для кода. Попробуйте шаблон Hello World на CodePen, CodeSandbox или Stackblitz.

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

Добавить реакцию на веб-сайт

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

Создание нового приложения React

При запуске проекта React простая HTML-страница с тегами сценария может быть лучшим вариантом. Настройка займет всего минуту!

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

Изучите React

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

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

Первые примеры

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

React для начинающих

Если вы чувствуете, что документация React идет быстрее, чем вы привыкли, ознакомьтесь с этим обзором React от Тани Расции. Он подробно знакомит с наиболее важными концепциями React и удобен для новичков. Как только вы закончите, попробуйте документацию еще раз!

React для дизайнеров

Если вы начинаете заниматься дизайном, эти ресурсы — отличное место для начала.

Ресурсы JavaScript

Документация React предполагает некоторое знакомство с программированием на языке JavaScript. Необязательно быть экспертом, но одновременно выучить React и JavaScript сложнее.

Мы рекомендуем просмотреть этот обзор JavaScript, чтобы проверить свой уровень знаний. Это займет у вас от 30 минут до часа, но вы будете чувствовать себя более уверенно, изучая React.

Подсказка

Всякий раз, когда вас что-то путает в JavaScript, MDN или javascript.info — отличные сайты для проверки. Есть также форумы поддержки сообщества, где вы можете попросить о помощи.

Практическое руководство

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

Пошаговое руководство

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

Мыслить в реакциях

Многие пользователи React считают, что чтение «Thinking in React» является моментом, когда React наконец «щелкнул» для них. Вероятно, это самое старое пошаговое руководство по React, но оно не менее актуально.

Рекомендуемые курсы

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

Расширенные концепции

Когда вы освоитесь с основными концепциями и немного поиграете с React, вас могут заинтересовать более сложные темы. В этом разделе вы познакомитесь с мощными, но менее часто используемыми функциями React, такими как context и refs.

Ссылка API

Этот раздел документации полезен, когда вы хотите узнать больше о конкретном React API. Например, справочник по API React.Component может предоставить вам подробную информацию о том, как работает setState () , и для чего полезны различные методы жизненного цикла.

Глоссарий и часто задаваемые вопросы

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

Оставаться в курсе

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

Вы также можете подписаться на аккаунт @reactjs в Twitter, но вы не пропустите ничего важного, если будете читать только блог.

Не каждый выпуск React заслуживает отдельного сообщения в блоге, но вы можете найти подробный журнал изменений для каждого выпуска в файле CHANGELOG.md в репозитории React, а также на странице Releases.

Версия документации

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

Что-то не хватает?

Если что-то отсутствует в документации или если вы обнаружили, что какая-то часть сбивает вас с толку, сообщите о проблеме в репозиторий документации с вашими предложениями по улучшению или напишите в Твиттере в учетной записи @reactjs.Мы рады слышать тебя.

Создайте новое приложение React — React

Используйте интегрированный набор инструментов для максимального удобства пользователей и разработчиков.

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

• Масштабирование до множества файлов и компонентов.
• Использование сторонних библиотек от npm.
• Раннее обнаружение типичных ошибок.
• Живое редактирование CSS и JS в разработке.
• Оптимизация выпуска продукции.

Цепочки инструментов, рекомендуемые на этой странице , не требуют настройки для начала работы .

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

Первые два тега загружают React. Третий загрузит код вашего компонента.

Шаг 3: Создайте компонент React

Создайте файл с именем like_button.js рядом со своей HTML-страницей.

Откройте этот стартовый код и вставьте его в созданный вами файл.

Подсказка

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

После начального кода добавьте две строки в конец like_button.js :

 

const domContainer = document.querySelector ('# like_button_container'); ReactDOM.render (e (LikeButton), domContainer);  

Эти две строки кода находят

  const e = React.createElement;


вернуть e (
  'кнопка',
  {onClick: () => this.setState ({понравилось: true})},
  'Нравиться'
);  

 
возвращаться (
   это.setState ({понравилось: true})}>
    Нравиться
  
);