Учебник ReactJS: Создание вашей первой React программы

Здравствуйте, будущие разработчики React! Я рад отправиться в это путешествие с вами, погружаясь в мир ReactJS. Как某人, кто преподавал informatику более десяти лет, я могу заверить вас, что React не только мощен, но и невероятно увлекателен для изучения. Так что давайте начнем!

Что такое ReactJS?

React - это библиотека JavaScript для создания пользовательских интерфейсов. Она была разработана Facebook и с тех пор стала одной из самых популярных библиотек для фронтенда в мире. Но не волнуйтесь, если это звучит пугающе - мы разберем это шаг за шагом.

Why React?

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

Предварительные условия

Прежде чем мы углубимся, давайте убедимся, что у нас есть все необходимое:

1. Основное понимание HTML и CSS
2. Знакомство с JavaScript (не волнуйтесь, мы будем повторять по ходу)
3. Текстовый редактор (я recommend Visual Studio Code)
4. Установленный на вашем компьютере Node.js

Настройка вашего первого проекта React

Давайте начнем с создания нашего первого проекта React. Мы будем использовать инструмент под названием Create React App, который настроит все необходимое всего одной командой.

1. Откройте ваш терминал или командную строку
2. Перейдите в папку, где вы хотите создать ваш проект
3. Выполните следующую команду:

npx create-react-app my-first-react-app

Это может занять несколько минут. Когда это будет сделано, перейдите в вашу новую проектную папку:

cd my-first-react-app

Теперь запустим наше приложение:

npm start

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

Понимание структуры проекта

Давайте посмотрим, что Create React App настроил для нас:

my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

Наиболее важные файлы для нас сейчас находятся в папке src. App.js - это место, где мы будем писать большую часть нашего кода.

Ваш первый компонент React

Откройте src/App.js в вашем текстовом редакторе. Вы должны увидеть что-то вроде этого:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Измените <code>src/App.js</code> и сохраните, чтобы перезагрузить.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Изучить React
</a>
</header>
</div>
);
}

export default App;

Это React компонент. Не волнуйтесь, если он выглядит запутанно - мы разберем это:

1. Мы импортируем React и другие необходимые файлы
2. Мы определяем функцию под названием App
3. Эта функция возвращаетsome JSX (JavaScript XML) - особый синтаксис, который похож на HTML, но позволяет нам использовать JavaScript внутри
4. Наконец, мы exporting компонент, чтобы его можно было использовать в elsewhere

Давайте изменим этот компонент, чтобы сделать его своим:

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>Добро пожаловать в мою первую React программу!</h1>
<p>Я兴奋地学习React!</p>
</div>
);
}

export default App;

Сохраните файл и проверьте ваш браузер - он должен автоматически обновиться!

Добавление интерактивности с помощью состояния

Теперь давайте сделаем наше приложение немного более интерактивным, добавив кнопку, которая подсчитывает, сколько раз на нее нажимали.

Замените содержимое App.js на это:

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Добро пожаловать в мою первую React программу!</h1>
<p>Я兴奋地学习React!</p>
<button onClick={handleClick}>
Вы нажали на меня {count} раз
</button>
</div>
);
}

export default App;

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

1. Мы импортируем useState, React hook, который позволяет нам добавлять состояние в наш компонент
2. Мы используем useState(0) для создания переменной состояния count и функции setCount для ее обновления
3. Мы определяем функцию handleClick, которая увеличивает счетчик
4. В нашем JSX мы добавляем кнопку, которая отображает счетчик и вызывает handleClick при нажатии

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

Создание нового компонента

По мере роста нашего приложения, мы хотим разбить его на более мелкие, повторно используемые компоненты. Давайте создадим новый компонент для нашего счетчика.

Создайте новый файл src/Counter.js и добавьте следующий код:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
Вы нажали на меня {count} раз
</button>
</div>
);
}

export default Counter;

Теперь давайте используем этот новый компонент в нашем App.js:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Добро пожаловать в мою первую React программу!</h1>
<p>Я兴奋地学习React!</p>
<Counter />
<Counter />
</div>
);
}

export default App;

Смотрите! У нас теперь есть два независимых счетчика на нашей странице.

Заключение

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

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

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

Credits: Image by storyset