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

Но прежде чем мы перейдем непосредственно к настройке, что такое React?

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

React предоставляет идеальный способ вытащить представление из MVC (контроллер представления модели) и разместить модели и контроллеры в серверной части вашего заявление.

Реагируйте на популярность

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

  • Facebook
  • Instagram
  • Airbnb
  • Удеми
  • Reddit
  • Pinterest

Некоторые альтернативы React

Некоторые из альтернатив, которые вы можете использовать для внешнего интерфейса, - это Backbone.js, Ember.js, Angular.js и многие другие.

Почему бы вам выбрать React

  • React - очень легкая библиотека, которая работает только со слоем представления. Это также упрощает изучение и быстрое понимание React.
  • React также предоставляет структуру на основе компонентов, и поэтому можно создать компонент и повторно использовать его во всем веб-приложении.
  • У React есть богатое сообщество разработчиков по всему миру, и поэтому можно легко найти помощь в Интернете.
  • React использует среду Node.js, и, поскольку Node поставляется со своим менеджером пакетов, разработчики React могут извлекать другие пакеты узлов и использовать их в своем приложении, не изобретая заново колесо.
  • React совместим с Redux, очень мощной архитектурой потока для управления состоянием.
  • В React также есть отличные инструменты для разработчиков. Инструменты разработчика React, которые можно установить как расширение Chrome, очень хороши для проверки компонентов React и отладки. Если кто-то использует Redux, они также могут установить инструменты разработчика Redux.
  • React имеет высокую производительность по сравнению с другими интерфейсными библиотеками Javascript. Это связано с виртуальной DOM React. Любые изменения представления сначала отражаются в виртуальной DOM, затем эффективный алгоритм сравнения сравнивает предыдущее и текущее состояния виртуальной DOM и вычисляет лучший способ (минимальное количество необходимых обновлений) для применения этих изменений.

Предпосылки для React

Чтобы начать копаться в React, вам нужно быть знакомым с HTML и CSS. Вам также необходимо иметь базовые знания Javascript.

Хорошо, теперь, когда мы в некоторой степени знакомы с тем, что такое React, приступим.

Установка узла

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

Установка приложения create-react-app

Node.js поставляется с диспетчером пакетов узлов (npm). И поскольку мы только что установили узел, у нас также установлено npm.

Теперь с помощью npm мы можем установить create-react-app

Откройте свой терминал или командную строку, затем запустите эту команду

npm install create-react-app

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

Установив приложение create-react-app, мы можем создать наш первый проект React. Я назову свой проект rollex-connect. Перейдите туда, где вы хотите создать свой проект реакции, затем выполните следующую команду

create-react-app rollex-connect

Теперь перейдите в папку проекта, в моем случае это rollex-connect, поэтому я бы просто runcd rollex-connect.

Теперь запустите свое приложение для реагирования, запустив:

npm start

Проект автоматически запустится на вашем сервере localhost на порту 3000 и автоматически запустит ваш браузер по умолчанию с веб-страницей, которая выглядит так.

Давайте хоть что-нибудь отредактируем в нашем только что созданном проекте. Откройте свой проект в любом редакторе. (Я использую VSCode). Перейдите к файлу App.js в папке src.

Замените код в <header className=”App-header”> на этот

<p>
 Welcome to Rollex Connect
</p>

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

Вот и все, ваше самое первое приложение для реагирования. Легкий лимонный сок, правда 😃 😅

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