01. Что такое React JS?
React - популярный фреймворк JavaScript, используемый для разработки пользовательского интерфейса. Разработчики программного обеспечения неохотно называют это «фреймворком», потому что он дает разработчикам свободу, скорость работы, точный код и специальные функции, которые другие фреймворки не могут предоставить. React - очень гибкая, декларативная и эффективная библиотека JavaScript. Это интерфейсная библиотека на основе компонентов, которую можно использовать для создания клиентских уровней всего одного приложения.
История React JS:
«Джордан Уолке», инженер Facebook, хочет добавить новое измерение в разработку современного пользовательского интерфейса с помощью React JS. Когда он приступил к созданию приложения на стороне клиента, он увидел, что DOM (объектная модель документа) по какой-то причине замедляется. Эта проблема приходит ему на заметку, когда он добавляет файлы HTML и XML в API приложения (интерфейс прикладного программирования). Он подготовил React JS, укрепив основу логической структуры.
Он впервые представил React JS в 2012 году. Ранее в приложении он добился огромного успеха, используя React JS вместо HTML5. И официально в 2013 году власти Facebook сделали его открытым.
02. Компонент React.
Компонент React - это строительный блок реакции. Обычно мы видим много компонентов в приложении React. Компонент на самом деле ничто, но мы можем сравнить его с частями машины. Подобно тому, как множество мелких частей объединяются на одной машине, чтобы сформировать целую машину, также в приложении React множество таких компонентов объединяются, чтобы сформировать целое приложение.
В React.js есть два типа компонентов. .
1. Компонент класса
2. И функциональный компонент
Пример компонентов класса:
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return <p>React Component</p>
}
}
export default MyComponent;Это пример функционального компонента:
import React from 'react';
const FunctionComponent = () => (
<div>
<MyComponent />
<p>A Function Component</p>
</div>
)
export default FunctionComponent;03. Как работают перехватчики React?
Хуки позволяют использовать другие функции состояния и React без использования классов. Также может выполняться работа с методом жизненного цикла. Это означает, что все виды функциональности могут быть реализованы без использования компонентов на основе классов. Преимущество этого состоит в том, что логика, связанная с состоянием, может использоваться многими компонентами. Это означает, что если более чем один компонент имеет одинаковую логику состояния, ее можно повторно использовать, реализовав ее один раз с помощью настраиваемой ловушки, не повторяя ее в каждом компоненте. Более того, большие и сложные компоненты просты, потому что различные функции одного и того же компонента могут быть написаны отдельно с помощью хуков. Вы можете узнать больше о крючках здесь.
В REACT.JS много крючков.
Посмотрите простой пример с useState Hook:
04. UseState в React Js.
Используя ловушку useState, теперь вы можете вызвать useState () свой функциональный элемент.
useState () возвращает два массива вещей:
01. первое значение, представляет текущее состояние.
02. и Используйте его для обновления значений.
Посмотрите пример:
import React, { useState } from 'react';
//create your forceUpdate hook
function useForceUpdate(){
const [value, setValue] = useState(0); // integer state
return () => setValue(value => value + 1); // update the state to force render
}
function MyComponent() {
// call your hook here
const forceUpdate = useForceUpdate();
return (
<div>
{/*Clicking on the button will.. force to re-render like force update.. does */}
<button onClick={forceUpdate}>
Click to re-render
</button>
</div>
);
}05. React.js useEffect.
Я использовал useState Hook, чтобы объявить состояние этого функционального компонента. Я также объявил 3 кнопки, определяющие 3 разных типа содержимого, и событие onClick для них - это три кнопки, я вызвал функцию setContentType, чтобы изменить состояние «содержимого». Это обновит DOM, который компонент будет повторно визуализировать. В основном Effect Hook, useEffect, добавляет возможность реагировать на побочные эффекты приложения из функциональных компонентов.
06. А как насчет JSX?
Знание синтаксиса JSX очень важно для работы с React.js.
const element = <h1>Welcome to Auntor World!</h1>;
посмотрите пример, который называется JSX. Этот синтаксис похож на HTML, но это не строка HTML или JavaScript. Это синтаксическое расширение JavaScript.
07. Назначение JSX.
const element = React.createElement(
"h1",
null,
"Welcome to Auntor World!"
);
Насколько сложным выглядит код обычного HTML-кода без JSX. Если хотите, вы также можете использовать этот сложный код в своем приложении React. Но зачем использовать такой сложный код, чтобы иметь такой хорошо организованный синтаксис? Например, я использовал простой код. Но когда вы проектируете в реальной жизни, подумайте, что будет, если вы напишете такой код? А если вы используете JSX, вы также можете писать в коде различные выражения и логику.
08. Встраивание выражений JSX.
В следующем примере давайте объявим переменную с именем name. Затем используйте его в JSX с фигурной скобкой:
import React from "react";
const Hello = () => {
const name = "Auntor";
return (
<div>
<h1>Hello,, {name}</h1>
</div>
);
};
export default Hello;
В JSX вы можете написать любое допустимое выражение JavaScript внутри фигурной скобки. Например
import React from "react"
const Total = () => {
return (
<h1>Total {10 + 7}</h1>
)
}
export default Total;
В этом примере я встроил функцию JavaScript в элемент h1 formatName (user).
import React from "react"
const FormatName = () => {
const user = {
firstName: 'AJ',
lastName: 'Auntor'
};
const formatName = (user) => `${user.firstName} ${user.lastName}`;
return (
<h1>
Good Morning, {formatName(user)}!
</h1>
)
}
export default FormatName;
09. Зачем нужен Context API в react.js?
Обычно в приложении React данные передаются от родителя к потомку с помощью props, но такое использование требует громоздкости для типов props. Контекстный API - это простой способ обмениваться значениями компонентов или передавать данные, подобные этим, между компонентами от родительского к дочернему, а также от дочернего к родительскому без использования пропсов.
10. Реагировать на рендеринг элемента.
import React from 'react';
import ReactDOM from 'react-dom';В этом примере вы увидите две библиотеки React. Один - это прямая реакция, а другой - реакция. Раньше React был в основном библиотекой. Но позже была создана библиотека, разделив функции собственно реакции, которая по сути является реакцией. И еще один, у которого есть react-dom, - это то, что он будет использоваться для работы с нашим dom. В отличие от элементов DOM браузера, элементы React представляют собой простые объекты, и их нужно создавать. React DOM требует обновления React DOM для соответствия элементам React ...
