ReactJS - React Without ES6 ECMAScript

Здравствуйте,野心勃勃的程序开发者们！今天，我们将踏上一段激动人心的旅程，探索ReactJS的世界，但有一个转折——我们将不使用ES6。如果你还不知道ES6是什么，不用担心；我们会在接下来的学习中解释一切。想象一下，我们正在制造一台时间机器，带我们回到React的早期时代。准备好了吗？让我们跳进去吧！

Что такое React и почему мы учимся "старому" способу?

React - это популярная библиотека JavaScript для создания интерфейсов пользователей. Это как LEGO для веб-разработчиков - вы создаете小的, повторно используемые части (компоненты) и собираете их, чтобы создать сложные приложения.

Теперь вы можете задаться вопросом: "Почему мы учимся React без ES6?" Ну, мои дорогие студенты, это как учиться водить механическую коробку передач перед автоматической. Это дает вам более глубокое понимание того, как все работает под капотом. Кроме того, вы можете встретить старые кодовые базы, которые используют этот синтаксис, поэтому полезно быть с ним знакомым.

Создание React Class (create-react-class)

В мире React до ES6 мы использовали что-то называемое createReactClass для создания компонентов. Давайте рассмотрим простой пример:

var React = require('react');
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
render: function() {
return <h1>Привет, {this.props.name}!</h1>;
}
});

Давайте разберем это:

1. Мы требуем (импортируем) React и пакет create-react-class.
2. Мы создаем компонент под названием Greeting с помощью createReactClass.
3. Внутри компонента мы определяем функцию render, которая возвращает JSX (синтаксис, похожий на HTML).

Если бы мы использовали ES6, тот же компонент выглядел бы так:

class Greeting extends React.Component {
render() {
return <h1>Привет, {this.props.name}!</h1>;
}
}

Видите разницу? Способ createReactClass может показаться более многословным, но у него есть уникальные функции, которые мы рассмотрим下一步.

Установка значений по умолчанию для props (getDefaultProps)

В React мы часто хотим установить значения по умолчанию для props. С createReactClass мы используем особый метод叫做 getDefaultProps. Вот как это работает:

var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Привет, {this.props.name}!</h1>;
}
});

В этом примере:

1. Мы определяем функцию getDefaultProps, которая возвращает объект.
2. Этот объект содержит значения по умолчанию для наших props.
3. Если при использовании этого компонента не предоставляется prop name, он будет по умолчанию равен 'World'.

Итак, если мы используем <Greeting />, он отрендерит "Привет, World!". А если мы используем <Greeting name="Alice" />, он отрендерит "Привет, Alice!".

В ES6 React мы достигли бы того же результата, используя статические свойства:

class Greeting extends React.Component {
static defaultProps = {
name: 'World'
};
render() {
return <h1>Привет, {this.props.name}!</h1>;
}
}

Установка начального состояния (getInitialState)

Состояние похоже на личное хранилище данных компонента. С createReactClass мы устанавливаем начальное состояние с помощью getInitialState:

var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>Счетчик: {this.state.count}</p>
<button onClick={this.incrementCount}>Увеличить</button>
</div>
);
}
});

Давайте разберем это:

1. getInitialState возвращает объект, который определяет начальное состояние.
2. Мы устанавливаем начальный count равным 0.
3. У нас есть функция incrementCount, которая обновляет состояние.
4. В методе render мы отображаем счетчик и кнопку для его увеличения.

В ES6 React мы обычно устанавливаем начальное состояние в конструкторе:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... остальная часть компонента
}

Сравнение методов

Вот удобная таблица сравнения методов, о которых мы говорили:

createReactClass	ES6 Class	Назначение
getDefaultProps	static defaultProps	Установка значений по умолчанию для props
getInitialState	constructor	Установка начального состояния
render	render	Рендеринг компонента

Заключение

Итак, уважаемые пользователи, мы совершили путешествие назад во времени, чтобы исследовать React без ES6. Помните, что понимание этих концепций сделает вас более разносторонним разработчиком React. Это как знать историю языка - это gives вам более глубокое понимание современных функций.

Заканчивая, я вспоминаю историю. Однажды я работал над проектом legacy, который использовал этот старый синтаксис. Мои коллеги были в замешательстве, но благодаря пониманию этих основ я смог как супергерой React спасти положение!

Продолжайте практиковаться, будьте любознательны, и скоро вы будете создавать удивительные вещи с React - независимо от того, используете ли вы старый синтаксис или новый. Счастливого кодирования, и пусть ваши компоненты всегда рендерятся безупречно!

Credits: Image by storyset