Учебное пособие по ReactJS для начинающих: учитесь на пошаговом примере

Что такое ReactJS?

ReactJS это интерфейс с открытым исходным кодом JavaБиблиотека скриптов для создания пользовательских интерфейсов. ReactJS поддерживается Facebook и сообществом отдельных разработчиков и компаний. Он широко используется в качестве основы при создании одностраничных веб-сайтов и мобильных приложений. Он очень прост в использовании и позволяет пользователям создавать повторно используемые компоненты пользовательского интерфейса.

Особенности ReactJS

JSX: JSX — это расширение JavaScript. Хотя использование JSX в React не является обязательным, это одна из хороших и простых в использовании функций.

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

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

Javascript Выражения: Выражения JS можно использовать в файлах jsx с помощью фигурных скобок, например {}.

Преимущества ReactJS

Вот важные плюсы/преимущества использования ReactJS:

ReactJS использует виртуальный dom, который использует кеш структуры данных в памяти, и только окончательные изменения обновляются в dom браузера. Это делает приложение быстрее.
Вы можете создавать компоненты по вашему выбору, используя функцию компонента реагирования. Компоненты можно использовать повторно, а также они полезны при сопровождении кода.
Reactjs — это библиотека javascript с открытым исходным кодом, поэтому с ней легко начать.
ReactJS за короткое время стал очень популярным и поддерживается Facebook и Instagram. Его используют многие известные компании, такие как Apple, Netflix, и т.д.
Facebook поддерживает библиотеку ReactJS, поэтому она поддерживается в хорошем состоянии и постоянно обновляется.
ReactJS можно использовать для разработки насыщенного пользовательского интерфейса как для настольных, так и для мобильных приложений.
Легко отлаживать и тестировать, поскольку большая часть кода выполняется в Javascript а не на Html.

Недостатки ReactJS

Вот минусы/недостатки использования ReactJS:

Большая часть кода написана на JSX, т. е. HTML и CSS являются частью javascript. Это может сбивать с толку, поскольку большинство других фреймворков предпочитают хранить Html отдельно от кода javascript.
Размер файла ReactJS большой.

Использование ReactJS из CDN

Чтобы начать работать с React, нам нужно сначала установить Reactjs. Вы можете легко начать использовать responsejs, используя файлы JavaScript CDN, как показано ниже.

Перейдите на официальный сайт реакции, чтобы получить ссылки CDN, т.е. https://reactjs.org/docs/cdn-links.html и вы получите необходимые файлы для объяснения следующего изображения.

Для разработчиков

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

Для производства

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Замените версия с последней версией реакции для act-development.js и act-dom.developement.js. Вы можете разместить файлы на своей стороне, чтобы начать работать с Reactjs.

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

Вот скрипт BabelJS, который можно использовать:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Вот рабочий пример ReactJS с использованием файлов cdn и сценария Babeljs.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Вывод:

Мы углубимся в детали кода в следующей главе, давайте посмотрим, как мы работаем с файлами CDN. Говорят, что прямое использование сценария Babel не является хорошей практикой, и новички пока могут использовать его только для изучения ReactJS. В рабочей среде вам придется установить реакцию, используя пакет npm.

Использование пакетов NPM

Убедитесь, что у вас установлен nodejs. Если он не установлен, просмотрите это руководство для nodejs (https://www.guru99.com/node-js-tutorial.html) монтаж.

После установки nodejs создайте папку реакцияпроект/.

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

Вот как будет выглядеть структура папок:

reactproj\
package.json

Теперь установим те пакеты, которые нам нужны.

Вот список пакетов для реакции:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Откройте командную строку и выполните указанные выше команды внутри папки responseproj/.

Создать папку SRC / где весь js-код будет находиться в этой папке. Весь код проекта ReactJS будет доступен в папке src/. Создайте файл index.js и добавьте реакцию импорта и реакцию-дом, как показано ниже.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Мы вернули базовый код для реакции. Подробности этого мы объясним в следующей главе. Мы хотим отобразить Привет, из учебников Guru99. и то же самое передается элементу dom с идентификатором «root». Он берется из файла index.html, который является стартовым файлом, как показано ниже.

Создайте папку public/ и добавьте в нее index.html, как показано ниже.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Пакет реагирующих сценариев позаботится о компиляции кода и запуске сервера для отображения html-файла, то есть index.html. Вам необходимо добавить команду в package.json, которая позаботится об использовании сценариев реагирования для компиляции кода и запуска сервера, как показано ниже:

 "scripts": {
    "start": "react-scripts start" 
  }

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

Пакет.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Чтобы начать тестирование реакции, выполните команду

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

Откроется браузер с URL-адресом http://localhost:3000/ как показано ниже:

общедоступный / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Мы собираемся использовать тот же процесс для выполнения файлов javascript и в следующих главах. Добавьте все ваши файлы js и .jsx в папку src/. Структура файла будет следующей:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Как создать свою первую настройку проекта React

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

Шаг 1) Импортируйте пакеты реагирования.
1. Чтобы начать работу с ReactJS, нам нужно сначала импортировать пакеты реагирования следующим образом.

import React from 'react';	
import ReactDOM from 'react-dom';

2. Сохраните файл как index.js в папке src/.

Шаг 2) Напишите простой код.
В этом уроке мы напишем простой код React JS, в котором будем отображать сообщение «Привет, от Guru99 Tutorials!»

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render добавит тег к элементу с идентификатором root. Вот html-файл, который у нас есть:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Шаг 3) Скомпилируйте код.

Далее в этом уроке по React.js нам нужно скомпилировать код, чтобы получить выходные данные в браузере.

Вот структура папок:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Мы добавили команды для компиляции окончательного файла в package.json следующим образом:

"scripts": {
    "start": "react-scripts start"
  },

Чтобы скомпилировать окончательный файл, выполните следующую команду:

npm run start

Когда вы запустите вышеуказанную команду, она скомпилирует файлы и уведомит вас, если возникнет какая-либо ошибка. Если все выглядит хорошо, она откроет браузер и запустит файл index.html по адресу http://localhost:3000/index.html

Команда: запуск запуска npm:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Шаг 4) Проверьте вывод.
URL http://localhost:3000 откроется в браузере после компиляции кода, как показано ниже:

Что такое JSX?

JSX — это расширение javascript. Это шаблонный скрипт, в котором вы сможете использовать HTML и Javascript одновременно.

Вот простой пример кода JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Зачем нам нужен JSX в React?

Для пользовательского интерфейса нам нужен Html, и каждый элемент в dom будет иметь события, которые нужно обрабатывать, изменения состояния и т. д.

В случае с React это позволяет нам использовать Html и javascript в одном файле и эффективно заботиться об изменениях состояния в dom.

Выражения в JSX

Вот простой пример использования выражений в JSX.

В предыдущих примерах ReactJS мы писали что-то вроде:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Давайте теперь проверим то же самое в браузере.

Вы можете видеть, что выражение {display} не заменяется. React не знает, что делать, если выражение используется внутри файла .js.

Давайте теперь добавим изменения и создадим файл .jsx, как показано ниже:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Мы добавили необходимый код и будем использовать файл text.jsx в index.js. Нам нужно, чтобы h1тег переменная, которая будет использоваться внутри script.js, поэтому она экспортируется, как показано выше в test.jsx.

Вот измененный код в index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Чтобы использовать test.jsx в index.js, нам нужно сначала импортировать его, как показано ниже:

import h1tag from './test.jsx';

Теперь мы можем использовать тег h1tag в ReactDOM.render, как показано ниже:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Вот результат, когда мы проверяем то же самое в браузере:

Что такое компоненты в ReactJS?

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

Компоненты как функции

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

Мы создали функцию под названием Привет который вернул тег h1, как показано выше. Имя функции действует как элемент, как показано ниже:

const Hello_comp = <Hello />;
export default Hello_comp;

Компонент Привет используется как тег Html, т.е. и назначен Привет_комп переменная, и она экспортируется с помощью экспорта.

Давайте теперь используем этот компонент в файле index.js, как показано ниже:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Вот вывод в браузере:

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

Вот пример ReactJS, в котором в качестве компонента используется класс.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Мы можем использовать компонент Hello в файле index.js следующим образом:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Компонент Hello используется как тег Html, т.е. .

Вот результат того же самого.

Что такое состояние в ReactJS?

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

Пример состояния

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

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

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

Вот что мы получаем, когда тестируем это в браузере:

Что такое реквизиты в ReactJS?

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

Реквизит функционального компонента

Вот пример передачи реквизита функциональному компоненту.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Как показано выше, мы добавили MSG приписывать Компонент. То же самое можно получить как реквизит внутри функции Hello, которая представляет собой объект, который будет иметь MSG детали атрибута, и то же самое используется в качестве выражения.

Компонент используется в index.js следующим образом:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Вот вывод в браузере:

Реквизит для компонента класса

Чтобы получить доступ к реквизитам в классе, мы можем сделать это следующим образом:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

Команда MSG Атрибут передается компоненту в index.js следующим образом:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Это вывод в браузере:

Также проверьте: - Учебное пособие по AngularJS для начинающих: изучайте AngularJS шаг за шагом

Жизненный цикл компонента

Жизненный цикл компонента разделен на этапы инициализации, монтирования, обновления и демонтирования.

Вот подробное объяснение каждого компонента.

Компонент в реагировании состоит из следующих этапов:

Инициализация: это первый этап жизненного цикла компонента.

Здесь он будет иметь реквизиты по умолчанию и состояние на начальном уровне.

Исполнение: на этом этапе компонент визуализируется внутри dom. В состоянии монтажа мы имеем доступ к следующим методам.

компонентDidMount(): он также вызывается, когда компонент только что добавляется в dom.

render(): у вас есть этот метод для всех созданных компонентов. Он возвращает узел Html.

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

Ниже приведены методы, доступные в состоянии обновления:

mustComponentUpdate(): вызывается при обновлении компонента.

компонентDidUpdate(): после обновления компонента.

Размонтирование: это состояние появляется, когда Компонент не требуется или не удаляется.

Ниже приведены методы, доступные в состоянии размонтирования:

Компонент willUnmount(): вызывается, когда компонент удаляется или уничтожается.

Рабочий пример

Вот рабочий пример, который показывает методы, вызываемые в каждом состоянии.

Пример: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

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

Когда вы проверяете вывод в браузере

В консоли браузера вы получаете:

Когда пользователь вводит в текстовое поле:

В консоли отображаются следующие сообщения:

Работа с формами

В элементах ввода Reactjs Html, таких как , и <select /> имеют собственное состояние и должны обновляться при взаимодействии пользователя с использованием метода setState().

В этой главе мы увидим, как работать с формами в реакции.

Вот рабочий пример:

форма.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

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

Мы использовали события onChange и onClick в текстовом поле и кнопке отправки. Когда пользователь входит в текстовое поле, вызывается событие onChange, и поле имени внутри состояния объекта состояния обновляется, как показано ниже:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

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

Вывод в браузере следующий:

Шаг 1) Введите свое имя в текстовое поле:

Нажмите на кнопку отправить

Работа с событиями в ReactJS

Работа с событиями в responsejs такая же, как и в javascript. Вы можете использовать все обработчики событий, используемые в JavaScript. Метод setState() используется для обновления состояния, когда пользователь взаимодействует с любым элементом Html.

Вот рабочий пример использования событий в реакции.

события.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

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

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

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

Вот вывод в браузере:

Когда пользователь вводит имя:

Когда пользователь нажимает кнопку «Нажмите здесь»:

Работа со встроенным CSS в ReactJS

Рассмотрим рабочий пример, чтобы понять работу встроенного CSS в реакции.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Я добавил стиль «color: red» в тег h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Вывод в браузере следующий:

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

Работа с внешним CSS в ReactJS

Давайте создадим внешний CSS, для этого создадим папку css/ и добавим в нее style.css.

style.css

.h1tag {
color:red;
}

Добавьте style.css в файл index.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Теперь давайте добавим класс в тег h1 в файле .jsx.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Атрибут className содержит сведения о классе. Теперь давайте протестируем в браузере.

Вот что вы видите, просматривая тег h1 в браузере:

Вы можете видеть, что class="h1tag" успешно добавлен к тегу h1.

Резюме

ReactJS — это интерфейс с открытым исходным кодом. JavaБиблиотека скриптов для создания пользовательского интерфейса. Поддерживается Facebook и используется многими компаниями сегодня для разработки пользовательского интерфейса.
Основные функции ReactJS включают JSX, компоненты (функциональные компоненты и компоненты на основе классов), жизненный цикл компонента, реквизиты и поддержку состояния компонента, работающего с выражениями JavaScript.
Настройка проекта ReactJS объясняется с использованием файлов CDN, а также использования пакетов npm для сборки проекта.
JSX — это расширение JavaScript. Это шаблонный скрипт, в котором вы сможете совместно использовать Html и javascript.
Компоненты подобны чистым функциям JavaScript, которые помогают упростить код, разделив логику на независимый код, допускающий повторное использование.
Состояние — это объект JavaScript, похожий на реквизит, который содержит данные, которые будут использоваться при рендеринге реакции. Данные о состоянии являются частным объектом и используются внутри компонентов внутри класса.
Props — это свойства, которые будут использоваться внутри компонента.
Жизненный цикл компонента разделен на этапы инициализации, монтирования, обновления и демонтирования.
В элементах ввода HTML-реагирования, таких как , и <select /> имеют собственное состояние и должны обновляться при взаимодействии пользователя с использованием метода setState().
Работа с событиями в responsejs такая же, как и в javascript. Вы можете использовать все обработчики событий, используемые в JavaScript. Метод setState() используется для обновления состояния, когда пользователь взаимодействует с любым элементом Html.
ReactJS позволяет вам работать как с внешними CSS, так и со встроенными CSS, используя выражения JavaScript.

Также проверьте: - 70 лучших вопросов и ответов на собеседовании по React (обновлено)

Что такое ReactJS?

Особенности ReactJS

Преимущества ReactJS

Недостатки ReactJS

Использование ReactJS из CDN

Для разработчиков

Для производства

СТАТЬИ ПО ТЕМЕ

Использование пакетов NPM

Как создать свою первую настройку проекта React

Что такое JSX?

Зачем нам нужен JSX в React?

Выражения в JSX

Что такое компоненты в ReactJS?

Компоненты как функции

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

Что такое состояние в ReactJS?

Пример состояния

Что такое реквизиты в ReactJS?

Реквизит функционального компонента

Реквизит для компонента класса

Жизненный цикл компонента

Рабочий пример

Работа с формами

Работа с событиями в ReactJS

Работа со встроенным CSS в ReactJS

Работа с внешним CSS в ReactJS

Резюме

Подпишитесь на рассылку