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

Что такое ReactJS?

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

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

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

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

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

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

Преимущества 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 и вы получите необходимые файлы для объяснения следующих действий.wing изображения.

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

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

<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>

Вывод:

Для вывода продукта

Мы попадем в деtails кода в следующей главе, давайте посмотрим, как мы работаем с файлами 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')
);

Мы вернули базовый код для реакции. Мы объясним деtails об этом в следующей главе. Мы хотим отобразить Привет, из учебников 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>

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

Мы собираемся использовать тот же процесс для выполнения файлов 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"
  },

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

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 откроется в браузере после компиляции кода, как показано ниже:

Результат первого проекта React

Что такое 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')
);

Теперь мы изменим приведенный выше код, добавив выражения. Выражения используются внутри фигурных brackets {}, и они расширяются во время выполнения. Выражения в реакции такие же, как выражения в 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')
); 

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

Выражения в выводе JSX

Вы можете видеть, что выражение {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

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

Вот пример 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

Что такое реквизиты в 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 атрибут деtails, и то же самое используется в качестве выражения.

Компонент используется в 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 шаг за шагом

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

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

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

Компонент в реакции js имеет следующееwing этапы:

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

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

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

  • компонентDidMount(): он также вызывается, когда компонент только что добавляется в dom.
  • render(): у вас есть этот метод для всех созданных компонентов. Он возвращает узел Html.

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

Фоллоwing доступны ли методы в состоянии обновления:

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

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

Фоллоwing доступны ли методы в состоянии размонтирования:

Компонент 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')
); 

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

Результат

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

Вывод консоли браузера

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

Вывод пользовательских значений

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

Консольный вывод

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

В элементах ввода 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 по тексту.box и кнопку отправки. Когда пользователь вводит текстbox вызывается событие 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) Введите свое имя в текстbox:

Работа с выводом форм

  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;

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

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

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

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

Работа с внешним 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 присваивается класс de.tails. Теперь давайте протестируем в браузере.

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

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

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

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

Итоги

  • ReactJS — это интерфейсная библиотека JavaScript с открытым исходным кодом для создания пользовательского интерфейса. Он поддерживается 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 (обновлено)