Аутсорсинг разработки на 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 работает .

Как гласит официальный слоган, 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-реагировать мое приложение  

3. Удалить все файлы в папке src / нового проекта

Примечание:

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

  cd my-app
cd src


rm -f *


del *


cd . .  

4. Добавьте файл с именем index.css в папку src / с этим кодом CSS.
5. Добавьте файл с именем index.js в папку src / с этим кодом JS.
6. Добавьте эти три строки в начало файла 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», который упрощает написание этих структур. Синтаксис

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

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

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

  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)}
        
      
    );
  }
}  

  var player = {оценка: 1, имя: 'Джефф'};
player.score = 2;
  

  var player = {оценка: 1, имя: 'Джефф'};

var newPlayer = Объект.назначить ({}, игрок, {оценка: 2});



  

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

  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,});
  }  

  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  

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

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

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

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

        

          <Доска />
        
        

          
 {} 
          
 {} 
        
      
    );
  }
}  

  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 () {
    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} 
 
 {} 
        
      
    );
  }  

  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 (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,
    });
  }  

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

  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 (
  this.jumpTo (перемещение)}> {desc}  
);});
    пусть статус;
    если (победитель) {
      status = 'Победитель:' + победитель;
    } еще {
      status = 'Следующий игрок:' + (this.state.xIsNext? 'X': 'O');
    }

    возвращаться (
      

        

          <Доска
            квадраты = {current.squares}
            onClick = {(i) => this.handleClick (i)}
          />
        
        

          
 {статус} 
          
 {движется} 
 
      
    );
  }  

  
 Alexa: осталось 7 задач 
 Бен: осталось 5 задач 
  

  
 Бен: осталось 9 задач 
 Клаудия: осталось 8 задач 
 Alexa: осталось 5 задач 
  

  
 {user.name}: {user.taskCount} осталось задач 
  

  const move = history.map ((step, move) => {
      const desc = переместить?
        'Go to move #' + движение:
        'Перейти к началу игры';
      возвращаться (
        
 

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

  handleClick (i) {
    
  }

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

  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 () {
    const history = this.state.history;
    const current = история [this.state.stepNumber]; const победитель = calculateWinner (current.squares);

      

  ReactDOM.render (
  
 Привет, мир! 
,
  document.getElementById ('корень')
);  

 

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

  

 <нижний колонтитул>
  
 © 2021 Магазин шляп Домо 
 
 

 

  
   Поиск 
 
 

 

  
  <Домо />

  

 function Добро пожаловать (реквизит) {
  return 
 Привет, {props.name} 
;
}
 

 class Welcome расширяет React.Компонент {
  оказывать() {
    return 
 Привет, {this.props.name} 
;
  }
}
 

 Пример ответа 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 
.