Что такое react: ReactJS для глупых людей / Хабр

Содержание

Аутсорсинг разработки на React 💻

Что такое React.js

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

На текущий момент принято выделять три главных игрока — React, Vue и Angular, о первом мы подробно расскажем в этом материале. React — это бесплатная JavaScript-библиотека, которую разработала компания Facebook. Исходный код библиотеки опубликовали в 2013 году, и с тех пор популярность технологии неуклонно растет. Сейчас её используют такие крупные компании, как Instagram, Netflix, Yahoo, Dropbox и многие другие. По данным BuiltWith примерно 2,5 миллиона веб-сайтов используют React.

Основные отличия ReactJS

С технической точки зрения React, Vue и Angular имеют компонентную архитектуру и предоставляют методы жизненного цикла компонентов. Их можно подключить к любому существующему веб-приложению, даже если это не одностраничное приложение (SPA). На этом главные сходства заканчиваются.

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

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

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

Для каких проектов подходит React.js

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

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

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

Аутсорсинг разработки на React.js

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

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

Наши специалисты по React.js

Среди разработчиков наблюдается тенденция к выбору в пользу React. По данным State of JS у этой библиотеки самый высокий уровень удовлетворенности и больше 70% разработчиков планирует продолжать использовать ее в работе. Поскольку сейчас большинство крупных проектов создается с использованием этой js-библиотеки мы также применяем её в разработке.

Почему мы

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

Если вашей аудитории нужно мобильное приложение, то Facebook также представил платформу React Native для создания кроссплатформенных приложений для iOS и Android. Уровень производительности скорость, функциональность и внешний вид будет таким же как и у веб-приложения на React. Аутсорсинг разработки React Native поможет достичь бизнес целей и увеличить охват аудитории.

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

Получите консультацию

React — всё по этой теме для программистов

Что нужно знать React-разработчику в 2021 году

Инструменты и ключевые навыки, которыми нужно владеть React-разработчику в 2021 году, чтобы быть востребованным специалистом.

Как стать React-разработчиком в 2021: дорожная карта

Хотите знать, как стать React-разработчиком в 2021? Держите дорожную карту, которая собрала must-have темы и инструменты.

Создание приложений для Windows на React Native

На React Native разрабатываются нативные приложения под Android и iOS. Благодаря одному репозиторию на нём можно писать и под Windows.

Flutter vs React-Native: детальное сравнение

Сравнение Flutter и React-Native от разработчика, который провёл несколько месяцев с первой технологией и имеет много опыта с последней.

Интегрируем React приложение в Microsoft Office

Как можно расширить возможности MS Office с помошью кастомного расширения на JavaScript.

Оптимизация графиков Recharts

Статья, которая будет интересна тем, кто использует React и Recharts (или другую библиотеку на основе SVG) для построения графиков.

Типичные ошибки джунов, использующих React

Разбор некоторых из ошибок (и возможных решений), которые джуны совершают на раннем этапе своего профессионального роста.

Как разработать своё первое приложение на React Native

Разбираемся, что же такое React Native, почему он сейчас важен и популярен, а также создаём небольшой проект для демонстрации основ.

Создаём веб-приложение с бэкендом на Django и фронтендом на React

Создаём REST API на Django, добавляем React в проект и соединяем Django и React.

10 фишек из JavaScript, которые помогут писать более качественный код на React

React — это почти чистый JS. Чем лучше вы понимаете JS, тем лучше вы в React. Разбираем концепции, которые помогут кодить круче и на том, и на другом.

Cравнение фреймворков для кроссплатформенной мобильной разработки: React Native, Flutter, Ionic, Xamarin и PhoneGap

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

React Context за 5 минут: что это и как использовать

Что такое React Context и как с ним работать? Быстрый и понятный разбор на примере.

Создаём drag-and-drop элементы на React

В этой статье рассмотрим создание drag-and-drop элементов на React с помощью библиотеки react-beautiful-dnd от Atlassian.

Пишем приложение со списком дел при помощи React Hooks

React Hooks — это функции, которые позволяют определять категорию состояния и жизненный цикл (state, lifecycle) React-компонента без использования ES6-классов. Некоторые преимущества React Hooks: изолированная логика упрощает последующие тесты; при распределении…

Рефакторинг через классы: вычищаем свой JavaScript-код

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

Способы передачи данных между компонентами в React

React имеет различные способы передачи данных между своими компонентами:Render props / props; Context; React-Redux / Redux.

React: практики, которые помогут стать продвинутым разработчиком

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

React, Angular и Vue: что изучать в 2019 году?

Фронтенд — одно из наиболее динамично развивающихся направлений современной разработки. Неудивительно, что он оброс множеством инструментов, библиотек и фреймворков, призванных помочь в работе. Но возникает новая проблема: Что выбрать для…

React.js для продолжающих

Итак, вы разобрались с основами React. Что дальше? А вот что — 5 концепций, изучение поднимет ваш скилл на новый уровень.

Пример серверного рендеринга: прокачиваем email-рассылку при помощи React

Рассказывает Альберто Рэстифо, JS-разработчик Пару недель назад менеджер нашего проекта сообщил, что в ближайшие несколько спринтов мы будем заниматься электронными письмами. Автоматически генерируемые email’ы надо было сделать отзывчивыми, что привело бы к усложнению вёрстки.

Пишем полноценное приложение на React с нуля за час

В этой статье вы познакомитесь с React — JavaScript-библиотекой для создания пользовательских интерфейсов. Вы напишете приложение прогноза погоды с нуля.

Соцсеть в виртуальной реальности, управление компьютером силой мысли и множество новинок для разработчиков — всё, что Facebook показала на конференции F8

18–19 апреля прошла ежегодная конференция Facebook под названием F8. В рамках этого события компания показала множество различных новинок.

9 полезных советов для тех, кто начинает знакомство с React.js

Рассказывает Кэм Джексон  Я использую React.js уже 6 месяцев. Да, звучит, как короткий срок, но для постоянно изменяющегося мира JS-фреймворков это очень долго! Я уже давал советы новичкам, и поэтому решил, что…

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

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

Что нужно знать:

HTML, CSS, и JavaScript, быть знакомым с терминалом/командной строкой.

React использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью 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

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

Концептуально компоненты похожи на функции JavaScript. Они принимают произвольные входные данные (называемые «props» или свойствами) и возвращают React-элементы, описывающие, что должно появиться на экране.

Функциональные и классовые компоненты

Самый простой способ определить компонент — написать JavaScript-функцию:

function Welcome(props) {
  return <h2>Привет, {props.name}</h2>;
}

Данная функция — корректный компонент React, потому что он принимает один аргумент-объект «props» (который обозначает свойства) с данными и возвращает элемент React. Такие компоненты мы называем «функциональными», потому что они являются буквально функциями JavaScript.

Вы также можете использовать класс из ES6 для определения компонента:

class Welcome extends React.Component {
  render() {
    return <h2>Привет, {this.props.name}</h2>;
  }
}

Два вышеуказанных компонента эквивалентны с точки зрения React.

У классов есть дополнительные возможности, которые мы обсудим в следующих разделах. До этого момента мы будем использовать функциональные компоненты из-за их краткости.

Отрисовка компонента

Раньше мы сталкивались только с элементами React, представляющие DOM-теги:

Однако элементы также могут быть пользовательскими компонентами:

const element = <Welcome name="Сара" />;

Когда React видит элемент, представляющий пользовательский компонент, он передаёт JSX-атрибуты этому компоненту в виде единственного объекта. Мы называем этот объект «props».

Например, этот код отображает «Привет, Сара» на странице:

function Welcome(props) {
  return <h2>Привет, {props.name}</h2>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Попробовать на CodePen

Давайте посмотрим, что происходит в этом примере:

  1. Мы вызываем ReactDOM.render() с элементом <Welcome name="Сара" />.
  2. React вызывает компонент Welcome с объектом {name: 'Sara'} как props.
  3. Наш компонент Welcome возвращает элемент <h2>Hello, Sara</h2> в качестве результата.
  4. React DOM эффективно обновляет DOM, чтобы соответствовать <h2>Hello, Sara</h2>.

Примечание: Всегда именуйте компоненты с заглавной буквы.

React обрабатывает компоненты, начинающиеся со строчных букв, как DOM-теги. Например, <div /> представляет HTML-тег div, но <Welcome /> представляет компонент и требует, чтобы Welcome был в области видимости.

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

Композиция компонентов

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

Например, мы можем создать компонент App, который многократно отрисовывает Welcome:

function Welcome(props) {
  return <h2>Привет, {props.name}</h2>;
}

function App() {
  return (
    <div>
      <Welcome name="Сара" />
      <Welcome name="Кахаль" />
      <Welcome name="Эдит" />
    </div>
  );
}

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

Попробовать на CodePen

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

Извлечение компонентов

Не бойтесь разделять компоненты на более мелкие компоненты.

Например, рассмотрим этот компонент Comment:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Попробовать на CodePen

Он принимает author (объект), text (строка) и date (дата) в качестве свойств и описывает комментарий на сайте социальных сетей.

Этот компонент может быть сложно изменить из-за вложенности, а также трудно повторно использовать отдельные его части. Давайте извлечём из него несколько компонентов.

Сначала мы извлечём Avatar:

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

Компонент Avatar не должен знать, что он отрисовывается внутри Comment. Вот почему мы присвоили свойству объекта props более общее имя: user, а не author.

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

Теперь мы можем чуть-чуть упростить Comment:

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Затем мы извлечём компонент UserInfo, который отобразит Avatar рядом с именем пользователя:

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

Это позволяет нам упростить Comment ещё больше:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

Попробовать на CodePen

Извлечение компонентов сначала может показаться монотонной работой, но наличие палитры повторно используемых компонентов окупается в больших приложениях. Хорошее правило на этот счёт можно сформировать так — если часть пользовательского интерфейса используется несколько раз (Button,Panel, Avatar) или достаточно сложна сама по себе (App, FeedStory,Comment), то это хороший кандидат на извлечение компонента, чтобы он стал повторно используемым компонентом.

Свойства объекта props доступны только для чтения

Независимо от того, объявляете ли компонент как функцию или класс, он не должен изменять свои свойства. Рассмотрим эту функцию sum:

function sum(a, b) {
  return a + b;
}

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

Напротив, функция ниже — не чистая, потому что она изменяет свои входные данные:

function withdraw(account, amount) {
  account.total -= amount;
}

React довольно гибкий, но имеет одно строгое правило:

Все React-компоненты должны вести себя как чистые функции в плане своих свойств.

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

Что такое ReactJS

Назад

React (иногда React.js или ReactJS) — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.

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

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

Особенности

Однонаправленная передача данных

Свойства передаются от родительских компонентов к дочерним. Компоненты получают свойства как множество неизменяемых (англ.  immutable) значений, поэтому компонент не может напрямую изменять свойства, но может вызывать изменения через callback функции. Такой механизм называют «свойства вниз, события наверх».

Виртуальный DOM

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

JSX

JavaScript XML (JSX) — это расширение синтаксиса JavaScript, которое позволяет использовать похожий на HTML синтаксис для описания структуры интерфейса. Как правило, компоненты написаны с использованием JSX, но также есть возможность использования обычного JavaScript[12]. JSX напоминает другой язык, созданный в компании Фейсбук для расширения PHP, XHP .

Методы жизненного цикла

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

  • shouldComponentUpdate— позволяет предотвратить перерисовку компонента с помощью возврата false, если перерисовка не необходима.
  • componentDidMount— вызывается после первой отрисовки компонента. Он часто используется для запуска получения данных с удаленного источника через API.
  • render— является важнейшим методом жизненного цикла. Каждый компонент должен иметь этот метод. Обычно этот метод вызывается при изменении данных компонента для перерисовки данных в интерфейсе.

Не только отрисовка HTML в браузере

React используется не только для отрисовки HTML в браузере. Например, Facebook имеет динамические графики, которые отрисовываются в теги <canvas>. Netflix и PayPal используют изоморфные загрузки для отрисовки идентичного HTML на сервере и клиенте.

 






У вас нет прав для комментирования.

React Developer

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

Для ускорения работы можете взяться за освоения CSS препроцессора — SASS, например. Когда научитесь создавать страницы на HTML и CSS быстро и без особых проблем, начинайте учить язык программирования JavaScript и параллельно практиковаться в онлайн-тренажерах. Мы предлагаем интерактивный тренажер от ITVDN. Он позволит вам отточить навыки создания кода на HTML, CSS и JavaScript.   

Знание языка JavaScript на базовом уровне даст вам возможность перейти к освоению библиотеки jQuery. Однако, владение самим JS-ом следует довести до высокого уровня, ведь это главный инструмент React разработчика. Затем изучите библиотеку React, а также такие веб-технологии, как DOM, AJAX, JSON и другие. После этого можно и за системы сборки проектов взяться (Gulp/Grunt либо Webpack). 

Если хотите разрабатывать мобильные приложения под платформы iOS и Android, изучите React Native.

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

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

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

Как проверить навыки React разработчика

С ростом спроса на React — он год за годом возглавляет список ежегодных опросов Stack Overflow по наиболее востребованным фреймворкам, следовательно, существует огромный спрос на навыки разработчиков React. ИТ рекрутеры часто оказываются в затруднительном положении, когда не получают резюме с большим опытом и соответствующими навыками. Самая большая проблема, с которой они действительно сталкиваются, заключается в том, что они не знают, какие именно навыки нужно искать.

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

1. Что такое React?
React (также называемый React.js или ReactJS) — это библиотека JavaScript с открытым исходным кодом, используемая для создания интерактивных пользовательских интерфейсов (UI). Что касается веб-сайтов и веб-приложений, пользовательские интерфейсы представляют собой набор экранных меню, панелей поиска, кнопок и всего остального, с чем кто-то взаимодействует для использования веб-сайта или приложения. Он был создан Facebook 2013 и используется в качестве основы для отдельной веб-страницы или мобильных приложений (с React Native).

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

Важное различие между библиотеками, такими как React, и фреймворками, такими как Ember.js и Angular, заключается в том, что React занимается только рендерингом пользовательского интерфейса и оставляет множество вещей для каждого проекта, которые нужно собрать. React считается самоуверенным. React зарекомендовал себя как одна из самых доминирующих библиотек, используемых разработчиками. Согласно опросу State of Developer Ecosystem Survey за 2020 год, React является наиболее часто используемой платформой, и 63% респондентов утверждают, что используют ее, что на 10% больше, чем в прошлом году. Более того, React с большим отрывом выходит на первое место при рассмотрении необработанных данных и явного массового использования загрузок .

1.1. Для чего используется React и какие проблемы он решает?
До React разработчикам оставалось создавать пользовательские интерфейсы вручную с помощью «vanilla JavaScript» (разработчики говорят о необработанном языке JavaScript без каких-либо поддерживающих фреймворков) или с помощью предшественников React, менее ориентированных на пользовательский интерфейс, таких как jQuery. Этот процесс привел к длительному времени разработки и большему количеству нарушений и ошибок. Превосходство React быстро решило подобные проблемы. На React созданы сотни тысяч веб-сайтов. Он чрезвычайно популярен благодаря своей скорости работы и способности адаптироваться к проектам разного масштаба. Некоторые примеры популярных сайтов, использующих React, — это Facebook, Instagram, Netflix, Reddit, Airbnb и Uber.

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

1.2. Похож ли он на какие-либо другие языки или фреймворки?
Дизайн и функциональность React не очень похож на другие JavaScript-фреймворки.

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

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

1.3. Каковы его основные преимущества или особенности?
Явным преимуществом использования React является то, что он использует стиль функционального программирования. Функциональное программирование — это процесс создания программного обеспечения путем составления чистых функций; избегая общего состояния, изменяемых данных и побочных эффектов. Функциональное программирование является декларативным, а не императивным, и в результате React использует очень мало «шаблонного» кода. Фактически это означает, что вы можете многого добиться с помощью небольшого количества кода. Изучение процесса может занять некоторое время, однако в конечном итоге это сокращает время разработки и снижает риск ошибок кодирования.

React имеет две ключевые функции, которые делают его привлекательным для разработчиков JavaScript: JSX и Virtual DOM.

JSX (сокращение от JavaScript eXtension) — это специальное расширение синтаксиса React, которое эффективно позволяет веб-разработчикам смешивать синтаксис HTML с синтаксисом JavaScript. Обычно нативный JavaScript не поддерживает эту функцию, поэтому JSX значительно сокращает объем необходимого кода. И поскольку поддержка браузера React распространяется на все современные веб-браузеры, JSX совместим с любой доступной браузерной платформой.

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

2. Что важно знать ИТ рекрутеру о React?
ИТ рекрутеру важно помнить, что React — это библиотека / фреймворк представления, которая не определяет, как мы обрабатываем состояние (данные) в наших приложениях. Чтобы противостоять этому, в 2015 году была выпущена популярная библиотека для управления состоянием под названием Redux, которая использовалась до 2019 года. В настоящее время Redux утратил популярность, и React Hooks стал основным инструментом для управления состоянием приложения. Сегодня люди не очень часто пишут новые приложения с помощью Redux. Но многие существующие проекты, продукты и компании полагаются на Redux, и им придется активно поддерживать его в течение многих лет.

2.1. Как часто меняется стек технологий?
Это сложно сказать, потому что мы не можем предсказать будущее. Приблизительно каждые 2-3 года происходят большие изменения, такие как замена миксинов на компоненты более высокого порядка или переход от компонентов класса к функциональным компонентам на основе хуков.

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

Что касается инструментов, есть также множество плагинов и библиотек, доступных для использования с React. Поскольку фреймворк был синтезирован Facebook, поддерживающая экосистема действительно мощная. Есть много JS-библиотек, у которых есть соответствующие привязки React. Для React по-прежнему активно поддерживается широкий спектр инструментов, пользующихся успехом у пользователей (важно выбрать инструмент, который не кажется заброшенным или обновленным).

Существует множество ресурсов, которые можно объединить или изучить React на другом уровне, и лучшие из них можно найти на таких сайтах, как Hongkiat .

2.3. С какими инструментами и методами должен быть знаком React разработчик?
Один из наиболее эффективных способов освоить React — это использовать его инструменты для создания веб-приложений для реальных проектов. Так что вполне вероятно, что у разработчика есть в этом большой опыт. Знание React Hooks, React Context API и Redux жизненно важно для разработчика React.

  • Для создания визуальных элементов разработчик React должен хорошо разбираться в HTML, CSS, SASS / LESS / Stylus. Кроме того, SVG будет бонусом.
  • Хорошее знание JavaScript является фундаментальным. Также неплохо иметь типографский скрипт.
  • Они должны иметь практические знания этих библиотек: jQuery, MomentJS, Underscore и Lodash.
  • Опытный разработчик React знает, как использовать эти инструменты JavaScript: npm, Yarn, платформу Node.js (в целом) и как минимум один из инструментов для автоматизации создания приложения: Webpack, Parcel или Rollup (Grunt, Gulp и Раньше Browserify был популярен, а сейчас им мало что)
  • Для тестирования они должны знать TDD, BDD, Unit Tests и уметь уверенно использовать такие инструменты тестирования, как Jest или Enzyme. Жасмин, Карма, Мокко и Селен также будут полезны.
  • Приятно иметь хороший опыт управления облачными платформами, такими как SaaS, Amazon AWS, Google Cloud или Microsoft Azure.
  • Ищите кого-нибудь с навыками работы с этими платформами приложений: инструменты управления проектами: Jira и серверы: NGINX, Apache, а также инструменты онлайн-сотрудничества Slack, Miro, Figma и облачные документы, такие как Google или Microsoft и т. д.

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

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

3. Как проверить навыки разработчика React на этапе подбора?
Технические или жесткие навыки — это профессиональные навыки , которые необходимы для выполнения работы. Эти навыки приобретаются и развиваются посредством обучения, семинаров, тренингов и сертификатов.

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

  • Отличные коммуникативные навыки
  • Командная работа
  • Творческий подход
  • Умение справляться с критикой

3.1. Что нужно учитывать при просмотре резюме?
Безусловно, первое, что нужно искать в резюме, — это коммерческий опыт разработки front-end проектов. Всегда отдавайте предпочтение опыту, а не длинному списку различных инструментов. Зачем?

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

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

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

3.2. Какие термины глоссария важно знать в React (включая фреймворки, библиотеки и языковые версии)?
Вот ключевые слова, которые стоит понять:

Архитектура

  • Компоненты класса
  • Функции (все) Компоненты
  • Реагировать на хуки

Управление

  • React Context API
  • Redux
  • MobX

Стиль

  • Стилизованные компоненты
  • Emotion
  • CSS в JS
  • Модули CSS

Статический набор текста или проверка типов
Экосистема
Bundler
Разработчики React также используют React Native, предназначенный для создания собственных мобильных приложений. React в сочетании с React Native позволяет разработчикам использовать один и тот же код как для браузера, так и для мобильных устройств, что является большим преимуществом. Тем не менее, для каждой платформы по-прежнему существует важный код для конкретной платформы, который нельзя дублировать.

3.3. Какие версии полностью разные? Какие версии похожи друг на друга?
Количество версий не так важно, поскольку люди не заучивают их наизусть, однако в эволюции React действительно было несколько «эпох».

Имейте в виду, что Python v2 и v3 не совместимы друг с другом. Что более важно, так это архитектуры, которые люди скомпилировали. Новые версии, естественно, были добавлены, но React v16.8.3 не вызывает нареканий у многих разработчиков.
Архитектуры, с которыми люди могут быть знакомы (в хронологическом порядке), включают:

Класс React на основе компонентов

  • Mixins — очень старый подход. В настоящее время это, по сути, наследие, и его следует избегать. Однако есть несколько старых проектов, где он все еще используется.
  • HOC (компоненты высшего порядка) — идея этого подхода состоит в том, что HOC добавляет одно поведение к компоненту (добавляет одну функциональность). Он еще есть во многих проектах, но считается наследием.
  • Render Props — некоторые нестандартные компоненты, у которых нет пользовательского интерфейса, имеют только логику / поведение. И они принимают эту «опору рендеринга», чтобы определить, что такое представление. Итак, принудительно отделяем логику от UI. В некоторых проектах он может быть, но считается наследием.

Функция React на основе компонентов

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

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

3.4. Какие еще строки в резюме могут показать навыки разработчика React?
Разработчикам React также важно иметь глубокие знания в области агностических навыков, в том числе:

  • Язык: JavaScript, ES6
  • Асинхронный JavaScript (обещания, события, async await и rxjs)
  • HTTP — протокол, используемый в настоящее время миллиардами устройств, который обеспечивает связь между клиентами и серверами.
  • Typescript и / или Flow (приложения для React со статической типизацией)
  • Библиотеки пользовательского интерфейса, такие как Material UI
  • В общем, архитектура и паттерны дизайна.

3.5. Какие сертификаты доступны и соблюдаются? Полезны ли они для определения навыков?
Во фронтенде нет уважаемых сертификатов, к которым стоит стремиться. Если сертификаты и есть, то они малоизвестны. Это полностью противоположно тому, чем раньше была Java (с множеством доступных сертификатов).

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

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

4.1. Вопросы, которые вы должны задать об опыте разработчика React . Зачем вам задавать каждый из этих вопросов?
1 Вы обращаете внимание на автоматическое тестирование?
Разработчики, у которых нет привычки писать модульные / e2e-тесты, могут быть оптимистичны в отношении качества своего кода, но на самом деле процесс тестирования жизненно важен.

2 Поддерживали ли вы доступность (a11y) в своих недавних проектах?
Важно создавать доступные веб-сайты, особенно для государственных и финансовых учреждений, чтобы люди с ограниченными возможностями могли максимально эффективно использовать приложения.

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

4 Как бы вы оптимизировали свою кодовую базу React?
Ответы на этот вопрос говорят об опыте. Хороший ответ должен включать в себя различные методы, такие как: memo, useMemo, PureComponent, удаление ненужных вычислений и разделение компонентов на более мелкие части (чтобы при каждом изменении повторно отображалось меньше разметки).

4.2. Вопросы, которые вы должны задать о знаниях и мнениях разработчиков React . Зачем вам задавать каждый из этих вопросов?

  • Почему сообщество отвергло Redux (или, по крайней мере, заявило, что это не путь вперед для React)?
  • Укажите плюсы и минусы как Redux, так и React Context API. Где бы вы использовали одно вместо другого?
  • Какие преимущества у React Hooks?
  • Укажите несколько техник функционального программирования, которые часто используются в приложениях React.

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

Плохой ответ на вопрос « Почему был отклонен Redux ?» было бы « Потому что React Hooks лучше ». Более осознанный ответ был бы, хотя Redux предоставляет множество преимуществ, таких как предсказуемое управление состоянием, явность, путешествия во времени и горячая замена модулей, в Redux добавлено много повторяющегося кода, и доступность стала проблемой для многих его пользователей.

Некоторые другие вопросы, касающиеся знаний и мнений, включают:
1 Почему React представил Virtual DOM?
Ответ не на то, что это такое, а на то, почему это там, доказывает, что разработчик понимает внутренний дизайн и архитектуру, лежащие в основе самого React. Короткий ответ — из-за производительности, гибкости и простоты изменения структуры HTML.

2 Какие проблемы решают модули CSS?
Важно понимать проблемы, стоящие за управлением CSS в приложениях React. Некоторые стили просачиваются наружу, а некоторые стили извне проникают в ваше место. Модули CSS имитируют локальные стили.

3 Почему не рекомендуются ссылки (сокращение от ссылок)?
Это важно, поскольку доказывает понимание философии React. Короче говоря, типичный подход к программированию необходим. React следует декларативному подходу. Refs — это уход в императивный мир, существующий вне философии React. Его следует использовать только в крайнем случае.

4.3. Поведенческие вопросы, которые следует задать разработчику React. Зачем вам задавать каждый из этих вопросов?
1 Какая самая сложная задача React вам приходилась? Как ты с этим справился?
Ответ на этот вопрос покажет незнакомые задачи, которые стояли перед разработчиком. Это может относиться к обучению новым навыкам, совместной работе или сотрудничеству с бизнесом.

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

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

Intro to React — React

Это руководство не предполагает наличия каких-либо знаний React.

Перед тем, как мы начнем обучение

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

Подсказка

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

Учебное пособие разделено на несколько разделов:

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

Что мы строим?

В этом уроке мы покажем, как создать интерактивную игру в крестики-нолики с React.

Вы можете увидеть, что мы будем строить здесь: Final Result . Если код вам не понятен или вы не знакомы с его синтаксисом, не волнуйтесь! Цель этого руководства — помочь вам понять React и его синтаксис.

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

Вы можете закрыть игру в крестики-нолики, когда ознакомитесь с ней. В этом руководстве мы начнем с более простого шаблона. Наш следующий шаг — настроить вас так, чтобы вы могли начать сборку игры.

Предварительные требования

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

Если вам нужно изучить JavaScript, мы рекомендуем прочитать это руководство. Обратите внимание, что мы также используем некоторые функции из ES6 — последней версии JavaScript. В этом руководстве мы используем стрелочные функции, классы, операторы let и const . Вы можете использовать Babel REPL, чтобы проверить, в какой код ES6 компилируется.

Установка для учебника

Есть два способа выполнить это руководство: вы можете написать код в браузере или настроить локальную среду разработки на своем компьютере.

Вариант установки 1. Запись кода в браузере

Это самый быстрый способ начать работу!

Сначала откройте этот Стартовый код в новой вкладке. На новой вкладке должно отображаться пустое поле для игры в крестики-нолики и код React. В этом руководстве мы будем редактировать код React.

Теперь вы можете пропустить второй вариант настройки и перейти в раздел «Обзор», чтобы получить обзор React.

Вариант установки 2: Локальная среда разработки

Это совершенно необязательно и не требуется для этого урока!

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

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

  1. Убедитесь, что у вас установлена ​​последняя версия Node.js.
  2. Следуйте инструкциям по установке Create React App, чтобы создать новый проект.
  npx приложение create-реагировать мое приложение  
  1. Удалить все файлы в папке src / нового проекта

Примечание:

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

  cd my-app
cd src


rm -f *


del *


cd . .  
  1. Добавьте файл с именем index.css в папку src / с этим кодом CSS.
  2. Добавьте файл с именем index.js в папку src / с этим кодом JS.
  3. Добавьте эти три строки в начало файла index.js в папке src / :
  импорт React из react;
импортировать ReactDOM из react-dom;
импорт './index.css ';  

Теперь, если вы запустите npm start в папке проекта и откроете http: // localhost: 3000 в браузере, вы должны увидеть пустое поле крестики-нолики.

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

Помогите, я застрял!

Если вы застряли, обратитесь к ресурсам поддержки сообщества. В частности, Reactiflux Chat — отличный способ быстро получить помощь. Если вы не получили ответа или по-прежнему не можете решить проблему, сообщите о проблеме, и мы вам поможем.

Обзор

Теперь, когда вы настроили, давайте рассмотрим React!

Что такое React?

React — это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов. Он позволяет составлять сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».

React имеет несколько различных типов компонентов, но мы начнем с подклассов React.Component :

  class ShoppingList расширяет React.Компонент {
  оказывать() {
    возвращаться (
      

Список покупок для {this.props.name}

  • Instagram
  • WhatsApp
  • Oculus
); } }

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

Здесь ShoppingList — это компонент класса React или компонент типа React. Компонент принимает параметры, называемые props (сокращение от «свойства»), и возвращает иерархию представлений для отображения с помощью метода render .

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

преобразуется во время сборки в React.createElement ('div') . Пример выше эквивалентен:

  return React.createElement ('div', {className: 'shopping-list'},
  React.createElement ('h2',),
  React.createElement ('ul',)
);  

См. Полную развернутую версию.

Если вам интересно, createElement () более подробно описан в справочнике по API, но мы не будем использовать его в этом руководстве.Вместо этого мы продолжим использовать JSX.

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

Компонент ShoppingList выше отображает только встроенные компоненты DOM, такие как

и

  • . Но вы также можете создавать и отображать собственные компоненты React.Например, теперь мы можем обратиться ко всему списку покупок, написав . Каждый компонент React инкапсулирован и может работать независимо; это позволяет создавать сложные пользовательские интерфейсы из простых компонентов.

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

    Если вы собираетесь работать с учебником в своем браузере, откройте этот код в новой вкладке: Стартовый код . Если вы собираетесь работать над учебником локально, вместо откройте src / index.js в папке вашего проекта (вы уже касались этого файла во время установки).

    Этот Стартовый код — основа того, что мы создаем. Мы предусмотрели стили CSS, поэтому вам нужно сосредоточиться только на изучении React и программировании игры в крестики-нолики.

    Изучив код, вы заметите, что у нас есть три компонента React:

    Компонент Square отображает один ); } }

    Раньше:

    После: вы должны увидеть число в каждом квадрате визуализированного вывода.

    Посмотреть полный код здесь

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

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

    Давайте заполним квадратный компонент буквой «X», когда мы щелкнем по нему.
    Сначала измените тег кнопки, возвращаемый функцией render () компонента Square, на этот:

      класс Square расширяет React.Компонент {
      оказывать() {
        возвращаться (
          
        );
      }
    }  

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

    Примечание

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

      класс Square расширяет React.Компонент {
     оказывать() {
       возвращаться (
         
       );
     }
    }  

    Обратите внимание, как с onClick = {() => alert ('click')} мы передаем функцию как опору onClick . React вызовет эту функцию только после щелчка. Забыть () => и написать onClick = {alert ('click')} является распространенной ошибкой и будет вызывать предупреждение каждый раз при повторной визуализации компонента.

    В качестве следующего шага мы хотим, чтобы компонент Square «запомнил», что по нему щелкнули, и заполнил его знаком «X». Чтобы «запомнить» вещи, компоненты используют состояние .

    Компоненты React могут иметь состояние, задав this.state в их конструкторах. this.state следует рассматривать как частный для компонента React, в котором он определен. Давайте сохраним текущее значение Square в this.state и изменим его при нажатии на Square.

    Сначала мы добавим в класс конструктор для инициализации состояния:

      class Square extends React.Component {
      конструктор (реквизит) {супер (реквизит); this.state = {значение: null,}; }
      оказывать() {
        возвращаться (
          
        );
      }
    }  

    Примечание

    В классах JavaScript необходимо всегда вызывать super при определении конструктора подкласса.Все классы компонентов React, которые имеют конструктор , должны начинаться с вызова super (props) .

    Теперь мы изменим метод Square render , чтобы отображать значение текущего состояния при нажатии:

    • Замените this.props.value на this.state.value внутри тега
    • Замените обработчик событий onClick = {...} на onClick = {() => this.setState ({value: 'X'})} .
    • Поместите свойства className и onClick в отдельные строки для лучшей читаемости.

    После этих изменений тег ); } }

    Вызывая this.setState из обработчика onClick в методе рендеринга Square , мы говорим React повторно отображать этот Square всякий раз, когда нажимается его ); } }

    При щелчке по квадрату вызывается функция onClick , предоставляемая Board. Вот обзор того, как это достигается:

    1. Опора onClick во встроенном компоненте DOM
    2. При нажатии кнопки React вызовет обработчик события onClick , который определен в методе render () Square.
    3. Этот обработчик событий вызывает this.props.onClick () . Свойство Square onClick было указано Правлением.
    4. Поскольку Board передал onClick = {() => this.handleClick (i)} в Square, Square вызывает this.handleClick (i) при нажатии.
    5. Мы еще не определили метод handleClick () , поэтому наш код дает сбой.Если сейчас щелкнуть квадрат, вы должны увидеть красный экран с ошибкой вроде «this.handleClick не является функцией».

    Примечание

    Атрибут onClick элемента DOM

    Когда мы пытаемся щелкнуть квадрат, мы должны получить сообщение об ошибке, потому что мы еще не определили handleClick . Теперь мы добавим handleClick к классу Board:

    .

      class Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          квадраты: Массив (9).заполнить (ноль),
        };
      }
    
      handleClick (я) {константные квадраты = this.state.squares.slice (); квадраты [я] = 'X'; this.setState ({квадраты: квадраты}); }
      renderSquare (i) {
        возвращаться (
          <Квадрат
            значение = {this.state.squares [i]}
            onClick = {() => this.handleClick (i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок: X';
    
        возвращаться (
          
    {status}
    {это.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)}
    {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); } }

    Посмотреть полный код здесь

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

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

    Обратите внимание, как в handleClick мы вызываем .slice () , чтобы создать копию массива squares для изменения вместо изменения существующего массива. Мы объясним, почему мы создаем копию массива квадратов в следующем разделе.

    Почему важна неизменность

    В предыдущем примере кода мы предложили вам использовать метод .slice () для создания копии массива squares для изменения вместо изменения существующего массива.Теперь мы обсудим неизменность и то, почему ее важно изучать.

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

    Изменение данных с мутацией
      var player = {оценка: 1, имя: 'Джефф'};
    player.score = 2;
      
    Изменение данных без мутации
      var player = {оценка: 1, имя: 'Джефф'};
    
    var newPlayer = Объект.назначить ({}, игрок, {оценка: 2});
    
    
    
      

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

    Сложные функции становятся простыми

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

    Обнаружение изменений

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

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

    Определение момента повторного рендеринга в React

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

    Вы можете узнать больше о shouldComponentUpdate () и о том, как построить чистых компонентов , прочитав Оптимизация производительности.

    Функциональные компоненты

    Теперь мы изменим Square на функциональный компонент .

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

    Замените класс Square этой функцией:

      квадрат функции (реквизит) {
      возвращаться (
        
      );
    }  

    Мы изменили this.props на props оба раза, когда он появляется.

    Посмотреть полный код здесь

    Примечание

    Когда мы изменили Square как функциональный компонент, мы также изменили onClick = {() => this.props.onClick ()} на более короткий onClick = {props.onClick} (обратите внимание на отсутствие круглых скобок на с обеих сторон ).

    По очереди

    Теперь нам нужно исправить очевидный дефект в нашей игре в крестики-нолики: буквы «О» не могут быть отмечены на доске.

    По умолчанию мы установим первый ход как «X». Мы можем установить это значение по умолчанию, изменив начальное состояние в нашем конструкторе Board:

      class Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          квадраты: Array (9) .fill (null),
          xIsNext: true,};
      }  

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

    .

      handleClick (i) {
        const squares = this.state.squares.slice ();
        квадраты [i] = this.state.xIsNext? 'X': 'О'; this.setState ({
          квадраты: квадраты,
          xIsNext:! this.state.xIsNext,});
      }  

    С этим изменением «X» и «O» могут меняться по очереди. Попробуй это!

    Давайте также изменим текст «статуса» в панели render , чтобы он отображал, у какого игрока следующий ход:

      render () {
        const status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
        возвращаться (
            

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

      class Board расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          квадраты: Array (9) .fill (null),
          xIsNext: true,};
      }
    
      handleClick (i) {
        const squares = this.state.squares.slice (); квадраты [i] = this.state.xIsNext? 'X': 'О'; this.setState ({квадраты: квадраты, xIsNext:! this.state.xIsNext,}); }
    
      renderSquare (i) {
        возвращаться (
          <Квадрат
            значение = {this.state.squares [i]}
            onClick = {() => this.handleClick (i)}
          />
        );
      }
    
      оказывать() {
        const status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
        возвращаться (
          
    {status}
    {this.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)}
    {это.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); } }

    Посмотреть полный код здесь

    Объявление победителя

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

      функция calculateWinner (квадраты) {
      const lines = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
      ];
      for (let i = 0; i  

    Учитывая массив из 9 квадратов, эта функция проверяет победителя и возвращает 'X' , 'O' или null в зависимости от ситуации.

    Мы вызовем calculateWinner (squares) в функции Board render , чтобы проверить, выиграл ли игрок. Если игрок выиграл, мы можем отобразить такой текст, как «Победитель: X» или «Победитель: O». Мы заменим объявление status в функции Board render на этот код:

      render () {
        констант победитель = calculateWinner (this.state.squares); пусть статус; if (победитель) {status = 'Победитель:' + победитель; } else {status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); }
        возвращаться (
            

    Теперь мы можем изменить функцию Board handleClick , чтобы она возвращалась раньше, игнорируя щелчок, если кто-то выиграл игру или если квадрат уже заполнен:

      handleClick (i) {
        const squares = this.state.squares.slice ();
        если (вычислитьПобедитель (квадраты) || квадраты [я]) {возврат; } квадраты [i] = this.state.xIsNext? 'X': 'О';
        this.setState ({
          квадраты: квадраты,
          xIsNext:! this.state.xIsNext,
        });
      }  

    Посмотреть полный код здесь

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

    Добавление путешествия во времени

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

    Сохранение истории перемещений

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

    Однако мы использовали slice () для создания новой копии массива squares после каждого хода и считали ее неизменной. Это позволит нам хранить все предыдущие версии массива квадратов и перемещаться между уже произошедшими поворотами.

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

      история = [
      
      {
        квадраты: [
          ноль, ноль, ноль,
          ноль, ноль, ноль,
          ноль, ноль, ноль,
        ]
      },
      
      {
        квадраты: [
          ноль, ноль, ноль,
          ноль, 'X', ноль,
          ноль, ноль, ноль,
        ]
      },
      
      {
        квадраты: [
          ноль, ноль, ноль,
          ноль, 'X', ноль,
          ноль, ноль, 'O',
        ]
      },
      
    ]  

    Теперь нам нужно решить, какой компонент должен владеть состоянием истории .

    Состояние подъема, снова

    Нам нужно, чтобы компонент Game верхнего уровня отображал список прошлых ходов. Для этого ему потребуется доступ к истории , поэтому мы поместим состояние истории в компонент Game верхнего уровня.

    Размещение состояния history в компоненте Game позволяет нам удалить состояние squares из его дочернего компонента Board. Точно так же, как мы «подняли состояние» из компонента Square в компонент Board, мы теперь поднимаем его из Board в компонент Game верхнего уровня.Это дает игровому компоненту полный контроль над данными Board и позволяет ему проинструктировать Board о рендеринге предыдущих ходов из истории .

    Сначала мы установим начальное состояние для компонента Game в его конструкторе:

      class Game расширяет React.Component {
      конструктор (реквизит) {супер (реквизит); this.state = {история: [{квадраты: массив (9) .fill (null),}], xIsNext: true,}; }
      оказывать() {
        возвращаться (
          
    <Доска />
    {}
      {}
    ); } }

    Затем у нас будет компонент Board, который получит квадратов и props onClick из компонента Game.Поскольку теперь у нас есть обработчик одного клика в Board для многих Squares, нам нужно передать местоположение каждого Square в обработчик onClick , чтобы указать, какой Square был нажат. Вот необходимые шаги для преобразования компонента Board:

    • Удалите конструктор в Board.
    • Замените this.state.squares [i] на this.props.squares [i] в панели renderSquare .
    • Замените this.handleClick (i) на this.props.onClick (i) в файле Board renderSquare .

    Компонент Board теперь выглядит так:

      class Board расширяет React.Component {
      handleClick (i) {
        const squares = this.state.squares.slice ();
        if (calculateWinner (squares) || squares [i]) {
          возвращаться;
        }
        квадраты [i] = this.state.xIsNext? 'X': 'О';
        this.setState ({
          квадраты: квадраты,
          xIsNext:! this.state.xIsNext,
        });
      }
    
      renderSquare (i) {
        возвращаться (
          <Квадрат
            value = {this.props.squares [i]} onClick = {() => this.props.onClick (i)} />
        );
      }
    
      оказывать() {
        констант победитель = calculateWinner (this.state.squares);
        пусть статус;
        если (победитель) {
          status = 'Победитель:' + победитель;
        } еще {
          status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
        }
    
        возвращаться (
          
    {status}
    {this.renderSquare (0)} {this.renderSquare (1)} {это.renderSquare (2)}
    {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {this.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); } }

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

      render () {
        const history = this.state.history; const current = history [history.length - 1]; const победитель = calculateWinner (current.squares); пусть статус; if (победитель) {status = 'Победитель:' + победитель; } else {status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); }
        возвращаться (
          
    this.handleClick (i)} />
    {status}
      {}
    ); }

    Поскольку компонент Game теперь отображает статус игры, мы можем удалить соответствующий код из метода render Board.После рефакторинга функция платы render выглядит так:

      render () {return (
    {this.renderSquare (0)} {this.renderSquare (1)} {this.renderSquare (2)}
    {this.renderSquare (3)} {this.renderSquare (4)} {this.renderSquare (5)}
    {это.renderSquare (6)} {this.renderSquare (7)} {this.renderSquare (8)}
    ); }

    Наконец, нам нужно переместить метод handleClick из компонента Board в компонент Game. Нам также необходимо изменить handleClick , потому что состояние компонента Game имеет другую структуру. В рамках метода handleClick игры мы объединяем новые записи истории с историей .

      handleClick (i) {
        const history = this.state.history; const current = history [history.length - 1]; const squares = current.squares.slice (); if (calculateWinner (squares) || squares [i]) {
          возвращаться;
        }
        квадраты [i] = this.state.xIsNext? 'X': 'О';
        this.setState ({
          history: history.concat ([{квадраты: квадраты,}]), xIsNext:! this.state.xIsNext,
        });
      }  

    Примечание

    В отличие от метода array push () , с которым вы, возможно, более знакомы, метод concat () не изменяет исходный массив, поэтому мы предпочитаем его.

    На данный момент компоненту Board нужны только методы renderSquare и render . Состояние игры и метод handleClick должны быть в компоненте Game.

    Посмотреть полный код здесь

    Отображение прошлых ходов

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

    Ранее мы узнали, что элементы React - это первоклассные объекты JavaScript; мы можем передавать их в наших приложениях.Чтобы отобразить несколько элементов в React, мы можем использовать массив элементов React.

    В JavaScript массивы имеют метод map () , который обычно используется для сопоставления данных с другими данными, например:

      постоянные числа = [1, 2, 3];
    const doubled = numbers.map (x => x * 2);  

    Используя метод map , мы можем сопоставить нашу историю ходов с элементами React, представляющими кнопки на экране, и отобразить список кнопок для «перехода» к прошлым ходам.

    Давайте сопоставим с историей в методе рендеринга игры :

      render () {
        const history = this.state.history;
        const current = history [history.length - 1];
        const победитель = calculateWinner (current.squares);
    
        const move = history.map ((step, move) => {const desc = move? 'Перейти к перемещению #' + move: 'Перейти к началу игры'; return (
  • );}); пусть статус; если (победитель) { status = 'Победитель:' + победитель; } еще { status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O'); } возвращаться (
    <Доска квадраты = {current.squares} onClick = {(i) => this.handleClick (i)} />
    {статус}
      {движется}
    ); }

    Посмотреть полный код здесь

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

  • , который содержит кнопку
  • ); });

    Посмотреть полный код здесь

    При нажатии любой из кнопок элемента списка возникает ошибка, поскольку метод jumpTo не определен.Перед тем как реализовать jumpTo , мы добавим stepNumber в состояние компонента Game, чтобы указать, какой шаг мы просматриваем в данный момент.

    Сначала добавьте stepNumber: 0 к начальному состоянию в конструкторе Game :

      class Game расширяет React.Component {
      конструктор (реквизит) {
        супер (реквизит);
        this.state = {
          история: [{
            квадраты: Array (9) .fill (null),
          }],
          stepNumber: 0, xIsNext: истина,
        };
      }  

    Затем мы определим метод jumpTo в Game, чтобы обновить этот stepNumber .Мы также устанавливаем для xIsNext значение true, если число, которое мы меняем stepNumber на четное:

      handleClick (i) {
        
      }
    
      jumpTo (шаг) {this.setState ({stepNumber: step, xIsNext: (step% 2) === 0,}); }
      оказывать() {
        
      }  

    Теперь мы внесем несколько изменений в метод игры handleClick , который срабатывает при нажатии на квадрат.

    Добавленное нами состояние stepNumber отражает ход, отображаемый для пользователя сейчас.После того, как мы сделаем новый ход, нам нужно обновить stepNumber , добавив stepNumber: history.length как часть аргумента this.setState . Это гарантирует, что мы не застрянем, показывая один и тот же ход после того, как был сделан новый.

    Мы также заменим чтение this.state.history на this.state.history.slice (0, this.state.stepNumber + 1) . Это гарантирует, что если мы «вернемся в прошлое», а затем сделаем новый шаг с этого момента, мы выбросим всю «будущую» историю, которая теперь стала бы неверной.

      handleClick (i) {
        const history = this.state.history.slice (0, this.state.stepNumber + 1); const current = history [history.length - 1];
        const squares = current.squares.slice ();
        if (calculateWinner (squares) || squares [i]) {
          возвращаться;
        }
        квадраты [i] = this.state.xIsNext? 'X': 'О';
        this.setState ({
          history: history.concat ([{
            квадраты: квадраты
          }]),
          stepNumber: history.length, xIsNext:! this.state.xIsNext,
        });
      }  

    Наконец, мы изменим метод render компонента Game, заменив всегда визуализацию последнего хода на визуализацию текущего выбранного хода в соответствии с stepNumber :

      render () {
        const history = this.state.history;
        const current = история [this.state.stepNumber]; const победитель = calculateWinner (current.squares);
    
          

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

    Посмотреть полный код здесь

    Заключение

    Поздравляем! Вы создали игру в крестики-нолики, в которой:

    • Позволяет играть в крестики-нолики,
    • Указывает, когда игрок выиграл игру,
    • Сохраняет историю игры по мере ее прохождения,
    • Позволяет игрокам просматривать историю игры и предыдущие версии игрового поля.

    Отличная работа! Мы надеемся, что теперь вы чувствуете, что имеете хорошее представление о том, как работает React.

    Посмотрите окончательный результат здесь: Final Result .

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

    1. Отображение местоположения каждого хода в формате (столбец, строка) в списке истории ходов.
    2. Выделенный в данный момент элемент в списке перемещений выделен жирным шрифтом.
    3. Rewrite Board, чтобы использовать две петли для создания квадратов вместо их жесткого кодирования.
    4. Добавьте переключатель, который позволяет вам сортировать ходы в возрастающем или убывающем порядке.
    5. Когда кто-то выигрывает, выделите три квадрата, которые привели к победе.
    6. Если никто не выиграл, отобразить сообщение о ничьей.

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

    Начало работы - 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 аккаунт. Мы любим слушать вас!

    Hello World - React

    Самый маленький пример React выглядит так:

      ReactDOM.render (
      

    Привет, мир!

    , document.getElementById ('корень') );

    Отображается заголовок «Привет, мир!» на странице.

    Попробовать на CodePen

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

    Как читать это руководство

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

    Подсказка

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

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

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

    Предположения уровня знаний

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

    Примечание

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

    Приступим!

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

    Fullstack React: что такое React?

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

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

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

    Приступим. Мы начнем с самого начала, так как это очень хорошее место для начала.

    Что такое React?

    React - это библиотека JavaScript для создания пользовательских интерфейсов. Это уровень представления для веб-приложений.

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

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

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

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

    Хорошо, а как нам его использовать?

    React - это фреймворк JavaScript. Использовать фреймворк так же просто, как включить файл JavaScript в наш HTML и использовать экспорт React в JavaScript нашего приложения.

    Например, Hello world пример веб-сайта React может быть таким простым, как:

      
    
      
       Привет, мир 
      
      
      
      
    
    
      

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

    Как это работает?

    В отличие от многих своих предшественников, React работает не непосредственно с объектной моделью документа (DOM) браузера, а с виртуальной DOM . То есть, вместо того, чтобы манипулировать документом в браузере после изменений в наших данных (что может быть довольно медленным), он разрешает изменения в DOM, созданном и выполняемом полностью в памяти. После обновления виртуальной DOM React интеллектуально определяет, какие изменения внести в DOM реального браузера.

    React Virtual DOM существует полностью в памяти и является представлением DOM веб-браузера. Из-за этого, когда мы пишем компонент React, мы не пишем напрямую в DOM, а пишем виртуальный компонент, который React превратит в DOM.

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

    Визуальное введение для начинающих

    React - это библиотека JavaScript для создания пользовательских интерфейсов.

    Это официальное определение React. Но что, если вы не знакомы с JavaScript? Что делать, если вы не разработчик? Сможете ли вы понять (и изучить) React?

    Мой ответ твердое ДА. Вот почему я написал эту статью: что такое React? Что такое React.js (или ReactJS)? Для чего используется React? Почему React так популярен? Какие проблемы решает?

    Эта статья представляет собой введение в React для начинающих. Это первый пост, который вы хотите прочитать, прежде чем изучать особенности React.Я объясню основные идеи React простым английским языком (и дудлами 🌴). Нет опыта работы с JavaScript? Без проблем! Если у вас есть базовые знания HTML (например, формат HTML-тега), вы сможете получить удовольствие от этой статьи.

    Это вид с высоты птичьего полета, но я также снабжу вас биноклем. Вы не только увидите большую картину того, что делает React особенным, но и увеличите масштаб, чтобы получить практический опыт написания реального компонента React.И да, знание JS не требуется!

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

    Готовы отправиться в путешествие?

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

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

    Давайте начнем с того, что вы, возможно, слышали много раз, - DOM.

    Что такое DOM?

    Когда вы вводите адрес своего любимого веб-сайта в браузер, ваш компьютер начинает диалог с другим удаленным компьютером, обычно называемым сервером . Обычно ваш компьютер запрашивает некоторую информацию, и сервер отвечает:

    Ваш компьютер: Эй, что хорошего в этом случайном сайте learnreact.design?

    Сервер: Подождите, позвольте мне кое-что для вас захватить. Бип.Буп.

    Основная часть ответа сервера обычно состоит из трех элементов: HTML, CSS и JavaScript.

    HTML перечисляет содержимое веб-страницы и описывает ее структуру. Сколько там заголовков и абзацев? Какие изображения должен видеть пользователь? Содержатся ли эта кнопка и текстовое поле в одном и том же поле?

    Используя эту информацию, браузер создает нечто, называемое ... DOM!

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

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

    В реальной жизни DOM означает объектную модель документа. Это действительно модель - модель документа (также известная как веб-страница). Он принимает позу. Браузер рисует портрет. Портреты - это то, что мы видим на веб-странице: текстовые поля, абзацы, изображения и так далее.Работа разработчика похожа на работу директора, который говорит Домо, что надеть и в какой позе ударить. Это определяет, как в итоге будут выглядеть эти портреты.

    Чтобы проверить, как выглядит DOM, если вы используете настольный браузер, щелкните правой кнопкой мыши на этой самой странице и выберите «Проверить». Можете ли вы понять, что находится на вкладке «Элементы»?

    DOM API

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

    Помните, чтобы изменить содержимое веб-страницы, нам нужно обновить DOM. Художник не может писать новые портреты, пока Домо не перейдет в новую позу.

    Как заставить Домо перейти в новую позу?

    Мы просто поговорим с ним. Он слушает. Интересно, что у ушей Домо есть имя: DOM API .

    Для управления DOM разработчик должен написать код на JavaScript, который взаимодействует с DOM API и, в свою очередь, обновляет содержимое веб-страницы.

    Возрастающая сложность

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

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

    Код, необходимый для создания веб-приложений, становится все более объемным и сложным. Часто это требует сотрудничества многих членов команды.

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

    Позвольте представить вам супергероя, React:

    С React разработчики больше не общаются напрямую с Домо. React действует как агент между разработчиком и Domo. Он сглаживает общение и упрощает процесс создания портрета.

    React также называют ReactJS или React.js, но официальное название - React.

    React состоит из кода JavaScript. Он построен таким образом, что нам больше не нужно напрямую работать с DOM API в большинстве случаев. Вместо этого мы пишем более простой код, в то время как React обрабатывает диалог с DOM под капотом.

    React обладает несколькими сверхспособностями для решения постоянно растущей сложности веб-разработки:

    • Компоненты
    • Декларативный пользовательский интерфейс
    • Реактивные обновления DOM

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

    Продолжайте читать!

    Компоненты

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

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

    В настоящее время инструменты дизайна, такие как Framer и Figma, тоже имеют компоненты (и символы в Sketch). Они очень похожи на компоненты React, за исключением того, что последние более гибкие и мощные. Фактически, источником вдохновения для создания компонентов в инструментах проектирования стали компоненты в разработке программного обеспечения. После создания компонента мы можем создать несколько его экземпляров. Мы можем использовать его для создания других компонентов. Если мы изменим компонент, все, что включает этот компонент, будет обновлено автоматически.

    Компоненты в React обладают двумя важными свойствами:

    1. Компоненты компонуемы . Они созданы для повторного использования. Мы можем создать новый компонент с другими компонентами.
    2. Компоненты независимы друг от друга . Если мы изменим код в одном месте, другие части не сломаются.

    Если это звучит для вас абстрактно, не волнуйтесь! Вскоре я покажу вам несколько примеров и подробно объясню эти свойства.

    Декларативный UI

    Императивный vs.декларативный

    При непосредственной работе с DOM API нам нужно указать, какой элемент нужно изменить в нужное время и в правильном порядке. Это эквивалентно описанию Домо, как шаг за шагом ставить голову, руки и ноги для каждого портрета.

    Черт возьми, это звучит утомительно и чревато ошибками! Почему мы не можем просто сказать Домо , какой мы хотим вместо , как позировать? Фактически, именно так можно создать пользовательский интерфейс в React. Разработчик рисует краткий набросок того, что ему нужно.React объясняет Домо, как нужно позировать.

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

    С технической точки зрения, если код определяет, как мы хотим, чтобы это было сделано, это императив ; если он определяет , что мы хотим, это декларативное . Традиционный способ прямой работы с DOM API является обязательным, а способ React - декларативным.

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

    Virtual DOM

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

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

    Эти эскизы называются Virtual DOM . Виртуальным DOM гораздо быстрее манипулировать, чем DOM. Разработчики большую часть времени работают с Virtual DOM вместо того, чтобы напрямую управлять DOM. React берет на себя грязную работу по управлению медленным DOM.

    Реактивные обновления DOM

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

    Шляпа - это данные, которые определяют динамическое содержимое пользовательского интерфейса. Нам просто нужно связать элементы пользовательского интерфейса с соответствующими данными. При изменении данных React автоматически обновляет для нас связанные элементы DOM. Похоже, что модель DOM «реагирует» на любые изменения базовых данных. Нет необходимости отслеживать данные.Не нужно беспокоиться о том, когда обновлять DOM. Он просто обновляется автоматически (с помощью React).

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

    Теперь давайте рассмотрим то, что мы узнали до сих пор, и поработаем несколько реальных компонентов React. Чтобы вам было легче понять, я упустил некоторые детали в коде (в частности, JavaScript). Цель состоит в том, чтобы дать возможность проявиться основным идеям, не увязнув в синтаксисе JS.Если вам удобно читать код JavaScript, не стесняйтесь проверять настоящий исходный код.

    Хорошо. Допустим, мы хотим помочь Домо создать интернет-магазин шляп 🧢.

    Компоненты можно компоновать

    Пользовательский интерфейс можно разбить на несколько частей:

    • Заголовок: верхний колонтитул
    • Основное: основная область содержимого
    • Нижний колонтитул: нижний колонтитул снизу

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

     
    
    <Заголовок /> <Главная /> <Нижний колонтитул />

    Это похоже на HTML, верно? За исключением тегов, которые начинаются с заглавных букв:

    , и
    .Это не стандартные теги HTML. Это настраиваемые теги.

    Что это за пользовательские теги на самом деле? Как мы можем сообщить React, что заголовок состоит из тега заголовка, группы элементов списка и строки поиска?

    Пишем компонент Header!

     
    <заголовок>
      
    

    Теперь в этом компоненте заголовка он включает два настраиваемых тега: и .Что там?

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

    А теперь вот вам упражнение (откройте эту страницу в браузере настольного компьютера, чтобы получить лучший опыт):

    ✍️ Допустим, мы хотим добавить SearchBar в нижний колонтитул. Чтобы ты делал? Измените код ниже:

    Подсказки:

    • Обязательно поместите теги внутрь
    • Прокрутите вверх, чтобы проверить код Заголовок
    • Попробуйте добавить другие теги

    Вы получили два поиска бары? Вы поняли!

    Компоненты созданы для повторного использования

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

    ✍️ Измените текст на кнопке в коде SearchBar ниже:



    Что вы видели? SearchBar как в верхнем, так и в нижнем колонтитуле обновляется.Верно? Это работает очень похоже на компоненты в инструментах дизайна, таких как Framer и Figma.

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

    Компоненты независимы

    Помните? Компоненты React также независимых . Это означает, что если мы изменим один компонент, другие компоненты (которые не включают его) по-прежнему будут вести себя так же, как и раньше.

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

    Декларативная и реактивная

    Теперь давайте перейдем к двум другим суперспособностям React: декларативному UI и реактивным обновлениям DOM .

    А шапку для Домо уже выбирали? Если нет, просто щелкните одну из шляп в таблице.Шляпа на голове Домо поменяется, да?

    В этом пользовательском интерфейсе щелчок по элементу в таблице обновляет данные «выбранная шляпа». Поскольку мы связали DomoWithHat с «выбранной шляпой», шляпа на Domo автоматически изменится. Помнить? Реактивные обновления DOM .

    Вот код компонента DomoWithHat .

     
    
    <Домо />

    В приведенном выше коде нам просто нужно определить, что мы хотим (Домо и шляпа в div), и «подключить» данные (« type = {hat} »).Когда элемент данных шляпа изменяется (пользователь выбирает шляпу), пользовательский интерфейс обновляется автоматически. Нам не нужно беспокоиться о том, когда и как обновлять DOM. Нам даже не нужно отслеживать данные. Нам нужно просто нарисовать быстрый набросок, то есть приведенный выше код. Вот и две другие сверхспособности React: Declarative UI , плюс Reactive DOM Updates .

    Колпачок

    $ 50

    Покрывало для головы, как правило, с фигурной макушкой и полями.

    В корзину

    Поздравляем! Вы закончили первый важный урок React! Речь идет о большой картине: зачем нам вообще нужен React? Вот три основных идеи, которые делают React мощным: компоненты, декларативный пользовательский интерфейс и реактивные обновления DOM.

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

    Вот список терминов, затронутых в сообщении:

    • DOM (объектная модель документа)
    • DOM API
    • React компоненты
    • Компоненты являются компонуемыми и независимыми
    • Императивные vs.декларативное программирование
    • Виртуальный DOM
    • Реактивные обновления DOM

    Надеюсь, эта статья окажется для вас полезной!

    Одна из моих целей на 2021 год - написать больше сообщений, полезных , интерактивных и развлекательных . Хотите получать предварительные просмотры будущих публикаций? Зарегистрируйтесь ниже. Никакого спама, откажитесь от подписки в любое время.

    Вам также может понравиться

    Что такое React Native? Как это связано с React? Термины React объяснены простым английским языком и рисунками.

    Что такое Redux: руководство дизайнера

    Обновлено:

    design-react

    Что такое Redux? Зачем вам это нужно (как дизайнеру)? Что умеет Redux? Я отвечу на эти вопросы простым английским языком и в виде каракулей и помогу вам понять общую картину, даже если вы не являетесь разработчиком.

    Что такое React? - Twilio

    React (или иногда ReactJS) - это библиотека JavaScript для создания пользовательских интерфейсов. Иногда его также называют каркасом .

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

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

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

    Компоненты и поток данных

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

    1. Props - значения, которые передаются в компонент извне
    2. Состояние - необязательно и привязано к одному экземпляру компонента.Компонент может передавать состояние другим компонентам через props
    3. .

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

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

    Как выглядит компонент?

    Компонент можно описать как функцию:

     function Добро пожаловать (реквизит) {
      return 

    Привет, {props.name}

    ; }

    Его также можно определить как класс JavaScript:

     class Welcome расширяет React.Компонент {
      оказывать() {
        return 

    Привет, {this.props.name}

    ; } }

    Redux

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

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

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

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

    Если у вас уже есть Node.js и npm 5.2+, вы можете запустить эти команды в своем терминале, чтобы создать базовое приложение React:

    Вы просматриваете устаревшую версию этого SDK.

    Пример ответа JSON API

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

    Twilio Flex построен с использованием как React, так и Redux. Компонентно-ориентированная модель позволяет вам создавать собственные компоненты для Flex, повторно использовать существующие или подключаться к глобальному состоянию Flex с помощью Redux путем создания подключаемых модулей Twilio Flex с использованием create-flex-plugin .

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

    ReactJS и React Native: обзор, плюсы и минусы

    Время чтения: 15 минут

    ReactJS и React Native - это новые технологии для веб- и мобильной разработки, представленные Facebook.Проект был запущен Джорданом Уолком, инженером-программистом Facebook, в 2011 году. Чтобы упростить процесс разработки и сделать его более удобным для пользователей, он решил создать библиотеку, которая позволила бы создавать веб-интерфейс с помощью JavaScript.

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

    Что такое React?

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

    Если вы хотите сразу перейти к разработке с помощью React, вы можете посетить следующие ссылки:

    Как начать работу с React

    Загрузите и прочтите документацию по React с версией

    Посетите репозиторий React на Github, чтобы внести свой вклад в его разработку или углубиться в технические детали

    Посетите сообщество Stack Overflow React, чтобы найти ответы на самые популярные или очень конкретные вопросы

    Попробуйте практические руководства по React

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

    Попробуйте шаблоны на CodePen, CodeSandbox, Glitch или Stackblitz для онлайн-разработки кода.

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

    Взгляните на React Hooks, инструмент управления состоянием компонентов

    Краткая история библиотеки

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

    Для этого Facebook пришлось оптимизировать сам процесс разработки, и Джордан Уолк решил сделать это с помощью JavaScript.Он предложил поместить XHP, синтаксис разметки Facebook, в систему координат JS. Идея казалась невозможной, но в 2011 году его команда выпустила библиотеку ReactJS на основе симбиоза JavaScript и XHP. Затем Facebook понял, что ReactJS работает быстрее, чем любая другая подобная реализация. В 2013 году Facebook выпустил React как инструмент JavaScript с открытым исходным кодом.

    Два года спустя та же группа инженеров выпустила React Native, гибридную среду разработки мобильных приложений для iOS и Android.Инструмент был основан на тех же принципах, что и ReactJS, и вскоре был принят сообществом инженеров и компаниями, которые придерживаются стратегии «сначала мобильные».

    Как работает React Native? React Native сочетает в себе разработку собственных приложений с разработкой пользовательского интерфейса на JavaScript. Хотя вычислительно тяжелые функции могут быть реализованы с помощью собственных модулей для iOS и Android, остальная часть кода может быть написана с помощью JavaScript и совместно использоваться на разных платформах. В отличие от кроссплатформенных инструментов PhoneGap и Cordova, React Native не использует WebView, мобильный движок, который обертывает код.Вместо этого он предоставляет доступ к родным мобильным контроллерам, что позволяет добиться нативного внешнего вида приложений.

    Итак, давайте подробнее рассмотрим плюсы и минусы React как основного продукта. Затем мы исследуем, чем React Native отличается, и какие преимущества и недостатки он унаследовал от ReactJS.

    Плюсы ReactJS

    Виртуальная модель DOM в React упрощает взаимодействие с пользователем и ускоряет работу разработчика

    DOM (объектная модель документа) - это логическая структура документов в форматах HTML, XHTML или XML.Если описать это в терминах непрофессионала, это соглашение о просмотре входных и выходных данных, имеющее древовидную форму. Веб-браузеры используют механизмы компоновки для преобразования или анализа синтаксиса представления HTML в объектную модель документа, которую мы можем видеть в браузерах.

    Дерево объектов HTML DOM
    Источник: W3Schools

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

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

    Реальные и виртуальные DOM

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

    Подход позволил разработчикам быстрее работать с UI-объектами и использовать горячую перезагрузку (применение изменений в режиме реального времени).Это не только повысило производительность, но и ускорило программирование.

    Разрешение на повторное использование компонентов React значительно экономит время

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

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

    Управлять обновлениями легко для разработчиков, потому что все компоненты React изолированы, и изменение в одном из них не влияет на другие. Это позволяет повторно использовать компоненты, которые не вызывают изменений сами по себе, чтобы сделать программирование более точным, эргономичным и удобным для разработчиков. Ознакомьтесь с этим руководством Алекса Григоряна из WalmartLabs о том, как добиться эффективного повторного использования кода с помощью ReactJS.

    Однонаправленный поток данных в ReactJS обеспечивает стабильный код

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

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

    Вместо использования явной привязки данных ReactJS использует один поток данных - нисходящий. В такой структуре дочерние элементы не могут влиять на родительские данные. Чтобы изменить объект, все, что нужно сделать разработчику, - это изменить его состояние и применить обновления. Соответственно, будут обновлены только разрешенные компоненты.

    Библиотека Facebook с открытым исходным кодом: постоянно развивается и открыта для сообщества

    React был одним из первых связанных с JavaScript проектов, выпущенных Facebook с открытым исходным кодом.Это означает, что ReactJS использует все преимущества бесплатного доступа - множество полезных приложений и дополнительные инструменты от сторонних разработчиков. Пит Хант из Facebook говорит, что по крайней мере две основные функции - пакетирование и отсечение - были созданы разработчиками, которые заметили проект на GitHub. Теперь ReactJS занимает 5-е место в рейтинге Trending на GitHub с более чем 152 000 звезд. И с библиотекой работают более 1400 участников с открытым исходным кодом.

    Redux: удобный государственный контейнер

    Прежде чем писать гневный комментарий о том, что Redux не зависит от фреймворка и вы можете с радостью использовать его с Angular или Vue и что он не является эксклюзивным для React вообще, обратите внимание, что мы это знаем.Однако здесь стоит упомянуть Redux просто потому, что этот инструмент считается обязательным для изучения инструментом каждого разработчика React, применяемым в 50-60% приложений React. Да, вы можете использовать Redux с Angular, но вероятность того, что разработчик React знает Redux, намного выше, чем знание Angular. И вы найдете больше поддержки сообщества для решения кривой обучения React-Redux. Итак, почему это хорошо?

    Redux упрощает хранение и управление состояниями компонентов в больших приложениях с множеством динамических элементов, где это становится все труднее.Redux хранит состояние приложения в одном объекте и позволяет каждому компоненту получать доступ к состоянию приложения, не обращаясь к дочерним компонентам или используя обратные вызовы. Например, если у вас есть два компонента, которые имеют одно и то же состояние (например, подробные и общие представления на изображении ниже) и стоят отдельно в дереве, без Redux, данные должны передаваться через несколько промежуточных компонентов со всеми проблемами, которые связаны с Это.

    Главный и подробный интерфейсы используют одни и те же данные, но переход к ближайшему предку этих двух компонентов может находиться на более высоком уровне в дереве

    Пример от Марка Эриксона и Софии Шумейкер на fullstackreact.ком

    Redux предоставляет объект централизованного хранилища данных, позволяющий этим компонентам напрямую обращаться к нему.

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

    React Hooks: улучшенное управление состоянием

    До начала февраля 2019 года у разработчиков React было только два способа указать состояние: определить локальное состояние в компоненте или использовать фреймворки управления состоянием, такие как MobX или Redux, чтобы установить его как глобальное состояние.

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

    Набор инструментов Wide React и Redux

    И React, и Redux поставляются с приличным набором связанных инструментов, которые облегчают жизнь разработчика. Например, расширение React Developer Tools для Chrome и аналогичное расширение для Firefox позволяют исследовать иерархии компонентов в виртуальной DOM и редактировать состояния и свойства. Кроме того, вы можете проверить React Sight, который визуализирует деревья состояний и опор; Повторно выберите DevTools, который помогает с отладкой и визуализацией Reselect, библиотеки селекторов для Redux.Redux DevTools Profiler Monitor позволяет профилировать действия в… Chrome DevTools. И есть еще много чего попробовать.

    Минусы React

    Темпы развития

    Этот недостаток точно описан разработчиками Майклом Джексоном и Райаном Флоренс в Modern Web: «Если вы не заметили, что мы едем здесь на машине с двумя спущенными шинами, капот просто взлетел перед лобовым стеклом, и мы понятия не имею, что больше происходит! » Окружающая среда постоянно меняется, и разработчики должны регулярно изучать новые способы работы.Все развивается, и некоторым разработчикам неудобно идти в ногу с такими темпами. В то же время следует признать, что основной API React стал более стабильным и редко изменяемым. Изменения теперь в основном касаются обновлений библиотеки и добавления новых функций улучшения.

    Плохая документация

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

    «HTML в моем JavaScript!» - JSX как барьер

    ReactJS использует JSX. Это расширение синтаксиса, которое позволяет смешивать HTML и JavaScript. У JSX есть свои преимущества (например, защита кода от инъекций), но некоторые члены сообщества разработчиков считают JSX серьезным недостатком, поскольку он выглядит как старый спагетти-код.Разработчики и дизайнеры жалуются на сложность JSX и, как следствие, на сложность обучения.

    Дополнительные проблемы с поисковой оптимизацией

    Были опасения, что Google и другие поисковые системы не могут индексировать или плохо индексировать динамические веб-страницы с рендерингом на стороне клиента. Эти опасения не получили полного подтверждения, и вокруг есть разоблачающие материалы. Сам Google еще в 2014 году подтвердил, что их сканеры способны читать динамический контент. Итак, мы не собираемся говорить, что ваше приложение ReactJS не будет проиндексировано Google.В конце концов, наступил 2020 год.

    Тем не менее, вам все равно нужно провести некоторое тестирование, чтобы убедиться, что ваше приложение подружится с Google, поскольку некоторые пользователи сообщали о проблемах. Специалисты по SEO рекомендуют запускать ваши приложения React с помощью одного из инструментов Google Search Console, чтобы лучше узнать, как их воспринимают сканеры.

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

    Что такое React Native?

    Через два года после выпуска ReactJS 2015 года Facebook создал React Native. В то время как библиотека ReactJS разработана для создания веб-интерфейсов, React Native - это гибридная среда разработки приложений для iOS и Android, которая позволяет повторно использовать до 95 процентов кода, оставляя остальное для разработки интерфейсов для конкретных платформ.

    React и React Native: в чем разница? Все технические различия между ними обусловлены целями платформы.

    • В то время как ReactJS использует виртуальную модель DOM для рендеринга кода браузера, React Native использует собственные API в качестве моста для рендеринга компонентов на мобильных устройствах. Например, для компонентов Android он использует API Java и вызывает API Objective-C для рендеринга в iOS.
    • React Native не использует HTML. Итак, если вы раньше работали с ReactJS, вам придется познакомиться с синтаксисом React Native. Например, он использует вместо

      и вместо

      .
    • Поскольку React Native не использует CSS, стандартные функции CSS, такие как анимация, выполняются с помощью специальных API React Native.

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

    Как начать работу с React Native

    Как настроить среду разработки

    Последняя версия React Native 0.62

    Посетите репозиторий React Native Github

    Плюсы React Native

    На данный момент среда React Native - одна из самых быстрых и эффективных сред для разработки мобильных приложений. Он аналогичен ReactJS, и вот что вам следует знать о мобильных устройствах:

    React Native использует JavaScript - быстрый и популярный язык программирования

    Повторим еще раз - JavaScript остается одним из самых быстрых и широко используемых языков программирования.Как мы обсуждали в нашей статье о плюсах и минусах полнофункциональной разработки на JavaScript, согласно ежегодному опросу Stack Overflow, 67,7% разработчиков используют JavaScript. Зрелость JS-сообщества позволяет специалистам быстро изучать язык и постоянно совершенствоваться в работе с ним. Таким образом, вы, как правило, сможете быстро найти разработчика React Native для своего проекта.

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

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

    Нативные элементы управления и собственные модули в React Native повышают производительность

    React Native визуализирует некоторые компоненты кода с помощью собственных API-интерфейсов, в отличие от других кросс-платформенных фреймворков, таких как PhoneGap, которые визуализируют код через WebView, мобильный движок. Хотя подход WebView значительно снижает производительность, React Native взаимодействует с целевыми компонентами для iOS или Android и напрямую и независимо отрисовывает код в собственные API.При этом React использует отдельный поток от пользовательского интерфейса, что также увеличивает оценку производительности.

    Рендеринг WebView против рендеринга React Native

    Собственные модули выполняют еще одну важную роль. В настоящее время React предоставляет набор встроенных модулей, написанных на Objective-C и Java "из коробки". Эти модули нельзя повторно использовать на двух платформах, но они нацелены на более высокую производительность при выполнении сложных вычислительных операций, таких как редактирование изображений или воспроизведение видео.По сути, ваша команда может применить существующие модули или, если у них есть опыт работы с Java и Objective-C, написать собственные модули самостоятельно. По мере роста сообщества React некоторые вещи уже доступны. Остальную часть кодовой базы можно использовать повторно. Например, Facebook Ads Manager использует 87 процентов кода для Android и iOS.

    Кроме того, React Native предоставляет простые инструменты для отладки и обмена сообщениями об ошибках. Например, как и в случае с веб-программированием, специалисты могут использовать инструменты разработчика Chrome или Safari, с которыми они обычно знакомы.

    Встроенная отладка

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

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

    React Native содержит все функции ReactJS, направленные на улучшение пользовательского интерфейса

    React Native использует ReactJS в качестве библиотеки JavaScript, поэтому имеет все свои преимущества. Чтобы создать приложение React Native для разных платформ, разработчикам не нужно знать язык собственной платформы. Они должны владеть только JavaScript и знакомы с синтаксисом React.Но, как уже упоминалось, они также могут легко добавлять в код собственные компоненты.

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

    Минусы React Native

    Документация

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

    Опыт работы с собственными модулями

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

    Однако до некоторой степени это может свести на нет смысл кроссплатформенной разработки, поскольку вам все еще нужны некоторые инженеры-носители (Objective-C, Java или оба) в запасе.Так что, возможно, вам не понадобится React Native для создания следующего мобильного Photoshop. Но, если вы не нацеливаетесь на задачи, требующие применения грубой силы, опыта JS будет достаточно.

    Сторонние компоненты

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

    Отстающие обновления SDK

    React Native часто тормозит, когда iOS или Android обновляют свои SDK. Команда React Native должна интегрировать библиотеку кода с новым программным обеспечением. И, несмотря на то, что они работают довольно быстро, они не могут обновлять все части API сразу. Вот почему полная синхронизация между React Native и новыми SDK часто занимает слишком много времени.

    Чтобы узнать больше о сравнении фреймворка с другими кроссплатформенными инструментами, ознакомьтесь с нашей специальной статьей: Xamarin vs React Native vs Ionic.

    Нестабильность, проблемы совместимости и ошибки

    В этом разделе стоит выделить жирным шрифтом большое количество проблем, о которых разработчики сообщают после работы с React Native, и иногда прямо спрашивают: «Может ли кто-нибудь сказать мне, возможна ли серьезная разработка приложений на React Native?» Мы бы не пошли так далеко (проверьте некоторые известные приложения RN ниже). Но вот лишь краткий список проблем, с которыми сталкиваются инженеры при работе с React Native:

    • Сбои при горячей перезарядке
    • Несовместимость между библиотеками сообщества и различными версиями React Native
    • Проблемы с эмулятором
    • Проблемы с реакцией-навигацией
    • Необходимость частой переустановки пакетов
    • Различные другие ошибки

    Также следует отметить, что создание пользовательских модулей с помощью React Native может быть сложной задачей, поскольку разработчики часто могут иметь три кодовых базы (React Native, Android и iOS) для компонента вместо одной.

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

    ReactJS и приложения React Native

    компаний, которые уже внедрили ReactJS или React Native, сделали это по разным причинам. Вот самые заметные последователи, помимо самого Facebook.

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

    Netflix . Netflix, принявший ReactJS в 2015 году, теперь использует его вместе со слоем рендеринга Gibbon. Тогда Netflix выбрал React из-за своей односторонней модели потока данных и декларативного подхода к программированию.

    Airbnb . Компания решила перейти на ReactJS из-за возможности повторного использования его компонентов, очень простого рефакторинга кода и итераций.Теперь он используется во внутренних структурах мобильного приложения и веб-страницы компании.

    Uber Eats . Основная идея создания платформы заключалась в объединении трех типов участников: ресторанов, водителей и клиентов. Самой сложной задачей, с которой столкнулись разработчики, была интерпретация фактической панели инструментов ресторана с Интернета на мобильные устройства, как для Android, так и для iOS. Переход на React Native был единственным выходом. Хотя на React Native построена только часть мобильного приложения Uber Eats, разработчики достигли ожидаемых результатов.Емкость фреймворка помогла им расширить и расширить службу.

    SoundCloud Pulse. Когда команде SoundCloud пришла в голову идея создать мобильное приложение для артистов для управления своими учетными записями и авторскими правами, сервис для обмена музыкой существовал уже 10 лет. И самая большая проблема заключалась в том, чтобы вписаться в ограниченные ресурсы и команду разработчиков из трех человек. React Native отлично работал здесь по двум причинам. Во-первых, совместное использование кодовой базы значительно ускорило процесс разработки.Во-вторых, в то же время удобство использования RN наряду с автоматической перезагрузкой живого кода пригодилось разработчикам.

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

    Блумберг . Интернет-журнал выбрал React Native при разработке своего мобильного приложения.В их сообщении в блоге Tech at Bloomberg говорится, что это «первый инструмент, который действительно оправдывает ожидания кроссплатформенной разработки нативных приложений».

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

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

    Этот пост - часть нашей серии «Хорошее и плохое». Подробнее о плюсах и минусах самых популярных технологий читайте в других статьях серии:

    Плюсы и минусы Java-разработки

    Плюсы и минусы мобильной разработки Xamarin

    Плюсы и минусы разработки полного стека на JavaScript

    Хорошее и плохое в Node.js Разработка веб-приложений

    Плюсы и минусы быстрого языка программирования

    Плюсы и минусы программирования .NET Framework

    Хорошее и плохое средство автоматизации тестирования селена

    Плюсы и минусы разработки приложений для Android

    .

    Leave a Comment

    Ваш адрес email не будет опубликован. Обязательные поля помечены *