Підручник ReactJS для початківців: навчайтеся на покроковому прикладі

Що таке ReactJS?

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

Особливості ReactJS

JSX: JSX є розширенням javascript. Хоча використання JSX у React не є обов’язковим, це одна з хороших функцій і проста у використанні.

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

Віртуальний DOM: React створює віртуальний dom, тобто кеш структури даних у пам’яті. Лише остаточні зміни DOM пізніше оновлюються в DOM браузерів.

Javascript Вирази: Вирази JS можна використовувати у файлах jsx за допомогою фігурних дужок, наприклад {}.

Переваги ReactJS

Ось важливі плюси/переваги використання ReactJS:

ReactJS використовує віртуальний dom, який використовує кеш структури даних у пам’яті, і лише останні зміни оновлюються в dom браузера. Це робить додаток швидшим.
Ви можете створювати компоненти на свій вибір, використовуючи функцію компонента react. Компоненти можна повторно використовувати, а також корисні для підтримки коду.
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. Ви можете легко почати використовувати reactjs за допомогою файлів javascript CDN, як показано нижче.

Перейдіть на офіційний сайт reactjs, щоб отримати посилання на 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>

заміщати версія з останньою версією react для react-development.js і react-dom.developement.js. Ви можете розмістити файли у себе, щоб почати працювати з reactj.

У випадку, якщо ви плануєте використовувати файли CDN, обов’язково збережіть атрибут крос-походження, щоб уникнути проблем між доменами. Код Reactjs не можна виконати безпосередньо у браузері, і перед виконанням у веб-переглядачі його потрібно перевести в javascript за допомогою Babel.

Ось сценарій 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. У виробництві вам доведеться встановити React за допомогою пакета npm.

Використання пакетів NPM

Переконайтеся, що у вас встановлено nodejs. Якщо не встановлено, перегляньте цей підручник для nodejs (https://www.guru99.com/node-js-tutorial.html) встановлення.

Після встановлення nodejs створіть папку реагувати/.

Щоб почати налаштування проекту, виконайте команду npm ініціал.

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

reactproj\
package.json

Тепер ми встановимо потрібні пакети.

Ось список пакунків для reactjs:

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

Відкрийте командний рядок і виконайте наведені вище команди в папці reactproj/.

Створіть папку src / куди весь код js надходить у цю папку. Весь код проекту reactjs буде доступний у папці src/. Створіть файл index.js і додайте import react і react-dom, як показано нижче.

index.js

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

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

Ми повернули базовий код для reactjs. Ми пояснимо подробиці цього в наступному розділі. Ми хочемо відобразити Привіт від Guru99 Tutorials і те ж саме надається елементу 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>

Пакет react-scripts подбає про компіляцію коду та запуск сервера для відображення файлу html, тобто index.html. Вам потрібно додати команду в package.json, яка подбає про використання скриптів react для компіляції коду та запуску сервера, як показано нижче:

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

Після встановлення всіх пакетів і додавання наведеної вище команди остаточний файл package.json виглядає так:

Package.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"
  }
}

Щоб почати тестування reactjs, виконайте команду

npm run start

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

Він відкриє браузер із URL-адресою http://localhost:3000/ як показано нижче:

public/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, щоб почати роботу з першою програмою React.

Крок 1) Імпортуйте пакети React.
1. Щоб почати роботу з ReactJS, нам потрібно спочатку імпортувати пакунки react, як описано нижче.

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 додасть тег до елемента з кореневим ідентифікатором. Ось файл 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 run start:

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')
);

Тепер ми змінимо наведений вище код, щоб додати вирази. Вирази використовуються у фігурних дужках {} і розгортаються під час виконання. Вирази в React такі ж, як вирази 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. Ми хочемо, щоб h1tag змінна, яка буде використовуватися всередині 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';

Тепер ми можемо використовувати тег h1 у 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, тобто і призначено Hello_comp змінна, і те саме експортується за допомогою експорту.

Давайте тепер використаємо цей компонент у файлі 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, подібний до props, який має дані, які будуть використовуватися з відображенням reactjs. Дані стану є приватним об’єктом і використовуються в компонентах усередині класу.

Приклад Держави

Ось робочий приклад використання стану всередині класу.

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')
);

Ось що ми отримуємо, коли тестуємо його в браузері:

Що таке Props у ReactJS?

Props - це властивості, які будуть використовуватися всередині компонента. Вони діють як глобальні об’єкти або змінні, які можна використовувати всередині Компонента.

Компонент Props to Function

Ось приклад передачі пропсів у функціональний компонент.

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 крок за кроком

Життєвий цикл компонента

Життєвий цикл компонента поділяється на етапи ініціалізації, монтування, оновлення та демонтажу.

Ось детальне пояснення кожного компонента.

Компонент у reactjs має такі етапи:

Ініціалізація: це перший етап життєвого циклу компонента.

Тут він матиме властивості за замовчуванням і стан на початковому рівні.

Монтаж: на цьому етапі компонент відображається всередині dom. Ми застосовуємо наступні методи в стані встановлення.

componentDidMount(): це також викликається, коли компонент щойно додається до dom.

render(): у вас є цей метод для всіх створених компонентів. Він повертає вузол Html.

Оновити: у цьому стані dom взаємодіє з користувачем і оновлюється. Наприклад, ви вводите щось у текстове поле, тому властивості стану оновлюються.

У стані оновлення доступні такі методи:

shouldComponentUpdate() : викликається, коли компонент оновлюється.

componentDidUpdate() : після оновлення компонента.

Демонтування: цей стан виникає, коли компонент не потрібен або видалений.

У відключеному стані доступні такі методи:

Component 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().

У цій главі ми побачимо, як працювати з формами в reactjs.

Ось робочий приклад:

form.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 надає спеціальний метод під назвою setState, що допомагає підтримувати стан щоразу, коли відбуваються зміни.

Ми використали події 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

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

Ось робочий приклад того, як використовувати події в reactjs.

події.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;

Ми використали події ми змінюємось та onClick у текстовому полі та кнопці. Коли користувач вводить у текстове поле ми змінюємось викликається подія, а поле імені всередині стану об’єкта стану оновлюється, як показано нижче:

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')
);

Ось результат у браузері:

Коли користувач вводить ім'я:

Коли користувач натискає кнопку Натисніть тут:

Робота з Inline CSS у ReactJS

Розглянемо робочий приклад, щоб зрозуміти, як працює вбудований CSS у reactjs.

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;

Я додав колір: стиль «червоний» до тегу 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, який має дані, які будуть використовуватися з відображенням reactjs. Дані стану є приватним об’єктом і використовуються в компонентах усередині класу.
Props - це властивості, які будуть використовуватися всередині компонента.
Життєвий цикл компонента поділяється на етапи ініціалізації, монтування, оновлення та демонтажу.
У reactjs html вводять такі елементи, як , і <select /> має власний стан і потребує оновлення, коли користувач взаємодіє за допомогою методу setState().
Робота з подіями в reactjs така ж, як і в javascript. Ви можете використовувати всі обробники подій, які використовуються в JavaScript. Метод setState() використовується для оновлення стану, коли користувач взаємодіє з будь-яким елементом Html.
ReactJS дозволяє вам працювати із зовнішнім CSS, а також вбудованим CSS за допомогою виразу javascript.

Також перевірте: - 70 найпопулярніших запитань і відповідей на інтерв’ю React (оновлено)

Вам може сподобатися:

5 НАЙКРАЩИХ курсів React з…

Що таке ReactJS?

Особливості ReactJS

Переваги ReactJS

Недоліки ReactJS

Використання ReactJS з CDN

Для розробників

Для вироб

СТАТТІ ПО ТЕМІ

Використання пакетів NPM

Як створити свій перший проект React

Що таке JSX?

Навіщо нам JSX у React?

Вирази в JSX

Що таке компоненти в ReactJS?

Компоненти як функції

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

Що таке стан у ReactJS?

Приклад Держави

Що таке Props у ReactJS?

Компонент Props to Function

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

Життєвий цикл компонента

Робочий приклад

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

Робота з подіями в ReactJS

Робота з Inline CSS у ReactJS

Робота із зовнішнім CSS в ReactJS

Підсумки