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

Что такое React и кто его разработал?

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

Он создан и поддерживается Facebook.

Это библиотека JavaScript или платформа?

React — это библиотека JavaScript, в отличие от Angular, который является фреймворком. Для получения более подробной информации перейдите по этой ссылке Library vs Framework.

Зачем реагировать?

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

Какие компании используют React?

Крупные гиганты, такие как Facebook, настольная версия WhatsApp, Reddit, Twitter, Pinterest, Instagram, Netflix и т. д.

Предпосылки

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

Node JS: это серверная среда с открытым исходным кодом, которая позволяет запускать JavaScript на сервере. Он поставляется с NPM (диспетчером пакетов Node), который используется для установки таких пакетов, как create-react-app, который по сути представляет собой стандартное приложение React. Чтобы установить это, перейдите на https://nodejs.org/en/.

Текстовый редактор. Нам нужен текстовый редактор для написания кода. Мы можем использовать Visual Studio Code, Sublime, Atom и т. д. Но я предлагаю VS Code, который имеет пару расширений, которые действительно облегчают нашу жизнь.

Наконец создание приложения React

Когда вы установили предварительные условия, то есть Node ›= 8.10 и NPM ›= 5.6 (что вы можете проверить, выполнив эти команды одну за другой

node -v
npm -v

В вашей PowerShell или командной строке в Windows и в терминале в Linux и Apple), затем перейдите в нужную папку, и для создания приложения React требуется ниже 3 команд

npx create-react-app my-app
cd my-app
npm start

В строке 1 npx — это команда NPM, create-react-app — это пакет, который создает стандартное приложение, а my-app — это ваш имя папки.

В строке 2 мы используем эту команду для перехода во вновь созданную папку.

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

Вуаля! ваш вывод сейчас на вашем экране.

Примечание. Иногда в среде Windows команда npx выдает ошибку. Одна из причин, по которой это происходит, заключается в том, что у пользователя будет пробел в имени пользователя ПК, например John Doe. Итак, чтобы исправить это, перейдите по этой ссылке GitHub.

Если вы дочитали до этого места и успешно загрузили приложение React, файл App.js имеет синтаксис JSX, так что же такое JSX?

JSX означает Расширение JavaScript. JSX не является обязательным для React, но является предпочтительным.

Если вы откроете App.js в своей структуре папок, вы увидите приведенный ниже код.

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

Если мы не хотим использовать JSX, мы можем написать что-то вроде этого:

return React.createElement(‘div’,{ className: ‘App’ },
React.createElement(‘h1’, null, ‘Hello from React’));

Это версия JSX,

return (
<div className=’App’>
<h1> Hello from React’</h1>
</div>
)