Начало работы с ReactJS: руководство для начинающих
Зададимся сначала вопросом, что же такое React?
React - это библиотека JavaScript для создания пользовательских интерфейсов. Он поддерживается Facebook и сообществом индивидуальных разработчиков и компаний. React можно использовать в качестве основы при разработке одностраничных или мобильных приложений.
React позволяет разработчикам создавать большие веб-приложения, пособные изменять данные без перезагрузки страницы. Цель React - предоставить способ создания быстрых масштабируемых веб-приложений.
React — это библиотека JavaScript для создания пользовательских интерфейсов.
Преимущества React
React известен своей скоростью, масштабируемостью и простотой. Главным преимуществом React является его производительность.
React способен быстро и эффективно обрабатывать большие объемы данных. Это делает React хорошим выбором для разработки крупномасштабных приложений,
Его декларативный синтаксис упрощает чтение и обслуживание кода, в то время как его виртуальный DOM обеспечивает высокую производительность. React также хорошо подходит для больших приложений со сложными структурами данных.
Вот некоторые другие преимущества React, которые делают его отличным выбором для веб-разработки:
- JSX упрощает создание шаблонов и делает их лаконичными;
- Это позволяет создавать повторно используемые компоненты, чтобы ваш код можно было легко читать и поддерживать;
- React js выгоден своей простотой, гибкостью и масштабируемостью;
- Кроме того, работа с платформой Reactjs помогает улучшить совместную работу и общение в команде;
- React можно использовать для создания одностраничных приложений;
- Это декларативно: React позволяет безболезненно создавать интерактивные пользовательские интерфейсы. Создавайте простые представления для каждого состояния в вашем приложении, и React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных.
React JSX
React уникален тем, что использует декларативную парадигму и расширение синтаксиса JavaScript под названием JSX.
JSX - это расширение синтаксиса для React, которое позволяет вам писать разметку непосредственно в коде JavaScript.
const myElement = <h1>I Love JSX!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);Без JSX:
const myElement = React.createElement('h1', {}, 'I do not use JSX!');
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);JSX - это XML-подобное расширение синтаксиса для ECMAScript без какой-либо определенной семантики. Он НЕ предназначен для реализации движками или браузерами.
Это НЕ спецификация. Он предназначен для использования различными препроцессорами (транспилерами) для преобразования этих процессов токенов в стандартный ECMAScript.
JSX - это синтаксическое расширение JavaScript, который позволяет вам писать синтаксис, подобный HTML, в вашем коде JavaScript. С React вы можете использовать обычный JavaScript или JSX.
React компоненты
Компонент класса
Компоненты класса React - один из способов создания компонентов React. Они создаются путем расширения React.Component классов.
В компоненте класса React вам нужно будет создат метод render(). Метод render() вернет элемент React.
При создании компонента класса вам необходимо расширить класс React.Component. Это дает вашему компоненту возможность иметь методы состояния и жизненного цикла.
Компоненты классов также легко тестировать, поскольку они представляют собой просто классы JavaScript. Они позволяют использовать классы JavaScript для создания компонентов React.
Компоненты класса более мощные, чем функциональные компоненты и они могут иметь состояние. Они упрощают создание повторно используемого кода и отлично подходят для работы с более крупными приложениями.
React представил официальную поддержку компонентов класса в версии 15.5. Компоненты класса - это более традиционный способ написания компонентов React с использованием класса. Их можно использовать с новым контекстным API React и статическими методами жизненного цикла getDerivedStateFromProps.
Компоненты класса следует использовать, когда вам нужно использовать одну из этих функций или другие возможности, уникальные для классов, такие как локальное состояние или доступ к методам жизненного цикла.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}Функциональные компоненты
Функциональные компоненты - это более простой способ написания компонентов React. Они эквиваленты функциональным компонентам без сохранения состояния в React.
Проще говоря, функциональные компоненты - это функции, которые возвращают элементы React. Когда вам нужен компонент, у которого нет состояния, вы можете использовать функциональный компонент.
Функциональный компонент - это просто функциональная единица, используемая для создания компонентов React. Он принимает свойства и возвращает элемент React.
Когда вы создаете компонент React, у вас есть возможность создать компонент функции или компонент класса.
Функциональный компонент - это компонент React, написанный как функция JavaScript.
Функциональные компоненты проще, чем компоненты класса, и они часто используются для компонентов представления.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}React Props
React Props позволяет родительскому компоненту передавать данные дочернему компоненту. Затем дочерний компонент может получить доступ к этим данным через объект this.props.
React Props также используются для указания поведения компонента, например, должен он отображаться или нет.
React props - это фрагменты данных, которые передаются компонентам React. Они используются для настройки поведения компонента, и их можно использовать в сочетании с состоянием для управления данными внутри компонента.
React props неизменяемые, что означает, они не могут быть изменены после их установки.
Это делает их идеальными для передачи данных вниз по дереву компонентов, а также помогает поддерживать модульность компонентов и простоту их анализа.
function Person(props) {
return <h2>I'm { props.name }!</h2>;
}
function Greeting() {
const name = "Jesse"
return (
<>
<h1>Hello!</h1>
<Person name=
{
name
}
/>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting />);React State
React state - одна из самых важных концепций React. Это относится к данным, которые нужны компоненту React для рендеринга.
Создание объекта state
Объект state инициализируется в конструкторе:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}React state можно использовать для хранения данных, необходимых компоненту для рендеринга.
Когда компонент state изменяется, компонент будет повторно отображать себя. Есть два способа изменить компонент state: setState и forceUpdate.
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}React setState - это функция, используемая для обновления state компонента React. Функция принимает два аргумента, первый из которых является объектом, содержащим новые значения state, а второй - функцией, обратного вызова. Функция обратного вызова выполняется после применения новых значений state. Новые значения state объединяются с предыдущими state.
React forceUpdate - это функция, которая вызывает повторную визуализацию компонента. Это может быть полезно, если вам нужно внести изменения в prop или state, которые заставят компонент выглядеть по-другому. forceUpdate не будет вызывать shouldComponentUpdate, поэтому он подходит не для всех ситуаций. Используйте его экономно.
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World"
};
this.updateSetState = this.updateSetState.bind(this);
}
updateSetState() {
this.setState({
message:"It is a beautiful day."
});
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
<button onClick = {this.updateSetState}>SET</button>
</div>
);
}
} В приведенном выше примере отображаемые данные обновляются с «Hello World» на «It is a beautiful day.» при нажатии кнопки.
Когда разработчик хочет обновить представление в React, он вызывает функцию forceUpdate. Эта функция сообщает React, что компонент необходимо повторно отобразить.
Когда вызывается forceUpdate, React повторно визуализирует компонент, даже если props или state компонента не изменились.
Функция forceUpdate используется, когда изменения происходят за пределами компонента, например, срабатывание прослушивателя событий или запрос от API, возвращающий данные.
React state - мощная концепция, которая позволяет разработчикам легко управлять данными в своих приложениях React.
Используя state, разработчики могут создавать сложные приложения, которые реагируют на действия пользователя и могут меняться со временем.
React state прост в использовании и может стать отличным способом повышения производительности вашего приложения.
React компонент Render
Чтобы отобразить компонент React, вы сначала должны компонент «render». Это просто означает, что вам нужно вывести правильный HTML-код из вашего компонента React, чтобы его можно было отобразить в браузере.
Процесс render компонента React на самом деле довольно прост. Сначала вы создаете новый элемент в React. Этот элемент может быть элементом DOM, либо пользовательским компонентом React.
<div id="root"></div>После того, как вы создали свой элемент, вы используете ReactDOM. Эта библиотека позволит вам отображать ваш компонент React в HTML-элемент на странице.
const root = ReactDOM.createRoot(
document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);После того, как вы render свой компонент, вы можете взаимодействовать с ним с помощью API ReactDOM.
React компонент Update
В прошлом, когда компонент React отображался, он был статическим. После render компонент нельзя было изменить.
Это затрудняло обновление компонентов, которые необходимо было изменить в зависимости от взаимодействия с пользователем или новых данных.
Однако теперь есть способ обновить компонент render. Используя метод setState, разработчик может изменить компонент после render.
Это позволяет создавать динамические и интерактивные пользовательские интерфейсы с помощью React.
При создании приложений с помощью React важно иметь возможность обновлять отображаемый компонент.
Есть два способа сделать это: с помощью компонентов state или props. Обновление компонента state приведет к re-render, а обновление компонента props приведет компонент к update.
class App extends Component {
constructor(props){
super(props)
// Set initial state
this.state = {greeting :
'Click the button to receive greetings'}
// Binding this keyword
this.updateState = this.updateState.bind(this)
}
updateState(){
// Changing state
this.setState({greeting :
'GeeksForGeeks welcomes you !!'})
}
render(){
return (
<div>
<h2>Greetings Portal</h2>
<p>{this.state.greeting}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
)
}
}
Чтобы обновить отображаемый компонент React, вам нужно использовать метод setState. Этот метод примет объект, содержащий новые данные, которыми вы хотите обновить компонент.
Как только вы обновите state компонента, компонент будет повторно визуализирован с новыми данными. Если вам нужно сделать вызов API для получения новых данных, мы можете это сделать это внутри метода setState.
Заключение
В заключении скажу, что ReactJS - это отличный инструмент для создания пользовательских интерфейсов. Это быстро, эффективно и легко в освоении. Если вы ищете способ начать работу с ReactJS, это руковолство - отличное место для начала.
