React — это библиотека JavaScript для создания пользовательских интерфейсов. React был разработан Facebook и специально оптимизирован для больших и сложных приложений.
React использует «компонентный» подход. Компонент представляет собой определенную часть пользовательского интерфейса. Например, кнопка может быть полем формы, а пункт меню может быть компонентом.
Компоненты могут вызываться другими компонентами, такими как другие компоненты и функции JavaScript. Компоненты могут иметь специальные функции, специально предназначенные для реагирования на такие события, как взаимодействие с пользователем или обновление данных.
Приложения React представляют собой комбинацию JavaScript, HTML и CSS. React повышает производительность, отслеживая состояния компонентов и обновляя только те компоненты, которые изменяются. React также можно использовать для разработки мобильных приложений, которые также можно использовать на других платформах, таких как React Native.
Некоторые из ключевых особенностей React:
JSX: Компоненты React определяются с помощью JSX, HTML-подобного языка, написанного в коде JavaScript.
Виртуальный DOM: React использует виртуальный DOM (объектную модель документа) для отслеживания изменяющихся компонентов. Это позволяет обновлять только измененные компоненты без перезагрузки всей страницы.
Жизненный цикл компонента: компоненты React имеют жизненный цикл, который охватывает различные этапы, такие как создание, обновление или уничтожение компонента.
React Hooks: Хуки — это функции, используемые для управления состояниями и свойствами компонентов.
React — это простая в освоении библиотека для тех, кто знаком с JavaScript. React поддерживается большим сообществом, и доступно множество ресурсов и документации.
Приведем примеры основных функций React.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React JavaScript Library Fundamentals</title>
</head>
<body>
<!-- container for app -->
<div id="root"></div>
<!-- load react -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- react app -->
<script>
// it prevents the code we write from going outside the JavaScript standart rules
'use strict';
// this is react element
const e = React.createElement;
/**
* this is react component
*/
class LikeButton extends React.Component {
// run when the component is created
constructor(props) {
// assigning values to the variable of its superclass ( React.Component )
super(props);
// an object to hold the state information of this component
this.state = { liked: false };
}
// render is run once
render() {
// javascript expression to check if conditions are true
if (this.state.liked) {
return 'You liked this.';
}
// html content to display when rendering the component
return e(
// type | we create a button element
'button',
// props | run when the component is created like constractor
{ onClick: () => this.setState({ liked: true }) },
// conntent or other elements
'Like'
);
}
}
// the name of out html tag
const containerName = "root";
// it allow us to call an existing object in an html document
const domContainer = document.getElementById(containerName);
// allows you to create a root to display React components inside a browser DOM node
const root = ReactDOM.createRoot(domContainer);
// displays the react root in the DOM node
root.render(e(LikeButton));
</script>
</body>
</html>
Вы можете создать его в базовом проекте React с помощью Node.js.
npx create-react-app fundamentals
JSX: JSX — это синтаксис для описания компонентов React, структура которого похожа на HTML.
import React from 'react';
function App() {
return (
<div>
<h1>Hello World!</h1>
<p>Welcome to my React app.</p>
</div>
);
}
export default App;
ВиртуальныйДОМ:
React использует виртуальный DOM для отслеживания измененных компонентов. Это позволяет обновлять только измененные компоненты без перезагрузки всей страницы.
import React, { useState } from "react";
/**
* this is react component
*/
export default function CounterButton() {
// run when the component is created
// we used state and default value = 0
const [count, setCount] = useState(0)
// an increment function
function increment() {
setCount(count + 1);
}
// html content to display when rendering the component
return (
// conntent or other elements
<div>
<p>Count {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
Жизненный цикл компонента:
Компоненты React имеют жизненный цикл, который охватывает различные этапы, такие как создание, обновление или уничтожение компонента. Это полезно, когда компоненты интерактивны.
import React, { Component } from "react";
/**
* this is react component
*/
export default class Timer extends Component {
// run when the component is created
constructor(props) {
// assigning values to the variable of its superclass ( React.Component )
super(props);
// an object to hold the state information of this component
this.state = { counter: 0, increment: props.increment };
}
// invoked immediately after a component is mounted
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
// invoked just before a component is dissembled and destroyed
componentWillUnmount() {
clearInterval(this.timerID);
}
// main function of this component
tick() {
// set current state
// normal function expressions
// this.setState(function (state, props) {
// return {
// counter: state.counter + props.increment
// }
// });
// Arrow function expressions is similar
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
}
// render is run once
render() {
// html content to display when rendering the component
return (
// conntent or other elements
<div>
<p>Timer {this.state.counter}</p>
</div>
);
}
}
/**
* component default probs
*/
Timer.defaultProps = {
increment: 1
};
Хуки — это функции, используемые для управления состояниями и свойствами компонентов. Это позволяет писать компоненты проще и проще.
import React, { useEffect, useState } from "react";
/**
* this is react component
* @param {*} props component default probs
* @returns Component
*/
export default function Timer2(props) {
// run when the component is created
// assigning values to the variable of its superclass ( React.Component )
const { increment } = props
// an object to hold the state information of this component
const [state, setState] = useState({ counter: 0, increment: increment })
// invoked immediately after a component is mounted
useEffect(() => {
const timerID = setInterval(
() => tick(),
1000
);
// invoked just before a component is dissembled and destroyed
return () => {
clearInterval(timerID)
}
})
// main function of this component
function tick() {
// set current state
// normal function expressions
// setState(function (state, props) {
// return {
// counter: state.counter + props.increment
// }
// });
// Arrow function expressions is similar
setState((state) => ({
counter: state.counter + increment
}));
}
// html content to display when rendering the component
return (
// conntent or other elements
<div>
<p>Timer {state.counter}</p>
</div>
);
}
/**
* component default probs
*/
Timer2.defaultProps = {
increment: 1
};
Эти примеры показывают несколько примеров основных функций React. Конечно, у React есть и другие возможности, и эти примеры — лишь отправная точка.
