Руководство по React JS

Зачем и как его использовать.

Что такое ReactJS?

ReactJS был очень популярен в области веб-разработки. Так что же такое ReactJS ?.

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

Это также можно сделать с помощью простого JavaScript и HTML (при необходимости CSS). Когда страница загружена, вы можете управлять деревом DOM с помощью функций JavaScript и изменять содержимое страницы, делать ее интерактивной без необходимости запрашивать новую HTML-страницу. Так зачем нам React JS?

Почему React JS?

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

React предпочтительнее использовать по следующим причинам:

SPA : React помогает создать одностраничное приложение. С ReactJS вы можете контролировать / манипулировать / изменять содержимое всей страницы с минимальным кодом.

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

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

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

Настройка среды React действительно. Все в ReactJS - это JavaScript.

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

npx create-react-app <your-app-name>

cd <your-app-name>
npm start

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

Структура вашего проекта должна выглядеть так: index.jsфайл выполняется первым при запуске npm start. Этот файл управляет элементом id root в index.html. Он вызывает метод рендеринга и заменяет его содержимым, возвращаемым App.js.

ReactDom.render - это метод, который вызывается для визуализации элемента React или элемента DOM (первый параметр) в качестве дочернего элемента целевого элемента (второй параметр).

App.jsвозвращает компонент . Компонент - это специальная функция, которая возвращает элемент React. Возвращенный HTML называется JSX (JavaScript XML). JSX - это синтаксический сахар React.createElement(component, props, …children)(пока давайте просто скажем, что React.createElement похож на document.createElement и document.appendChild). Вы можете внести изменения в содержимое страницы, изменив файл App.js в src.

Попробуйте внести изменения в этот HTML-код, заменив его приведенным ниже кодом, и сохраните файл, чтобы увидеть изменения на странице.
<div> <h1> This is my first App.</h1> </div>

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

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

Теперь давайте просто создадим index.jsи будем манипулировать содержимым HTML index.html.

Это создаст элемент h1 с некоторым текстом через React.createElement. React. CreateElement принимает следующие агрументы соответственно:

• Первый аргумент - это тег элемента, переданный в виде строки
• Второй аргумент - это подпорка к этому элементу. Реквизит - это просто атрибуты элемента. Вы можете передать объект атрибутов ( className, style или любой настраиваемый атрибут ) или передать значение null, если данные для передачи не требуются.
• Последний аргумент - это либо дочерние элементы, либо текст.

JSX - это не что иное, как специальный синтаксис в React (синтаксический сахар для React.createElement), который помогает разработчику писать поддерживаемый и читаемый код, поэтому нет необходимости знать JSX заранее, чтобы изучить концепции ReactJS, но это соглашение для использования.

Итак, мы закончили создание нашего первого базового приложения с JSX и без него.

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