ReactJS - Установка: Пособие для начинающих
Привет, будущие разработчики React! Я рад быть вашим проводником в этом захватывающем путешествии в мир ReactJS. Как alguien, кто уже много лет преподаёт информатику, я могу заверить вас, что учиться React - это как учиться ездить на велосипеде - сначала это может показаться пугающим, но как только вы научитесь, вы будете ехать без проблем!
Что такое ReactJS?
Прежде чем мы перейдём к установке, давайте быстро поймём, что такое ReactJS. React - это популярная библиотека JavaScript для создания пользовательских интерфейсов, особенно для одностраничных приложений. Всё дело в создании повторно используемых UI компонентов, которые управляют своим состоянием, что упрощает создание сложных интерфейсов.
Теперь давайте脏 our руки и начнём настраивать React!
Инструментальная цепочка: Ваш React инструмент
工作时 使用 React, мы используем набор инструментов под названием "инструментальная цепочка". Представьте её как ваш React швейцарский армейский нож - у неё есть всё, что вам нужно для создания потрясающих веб-приложений.
Основные инструменты в нашей инструментальной цепочке
| Инструмент | Назначение |
|---|---|
| Node.js | JavaScript runtime |
| npm (Node Package Manager) | Менеджер пакетов для JavaScript |
| Babel | Компилятор JavaScript |
| Webpack | Модульный бандлер |
| ESLint | Линтер кода |
| Jest | Тестовая среда |
Не волнуйтесь, если эти термины звучат как инопланетный язык. Мы рассмотрим каждый из них по мере продвижения!
Сервер для伺服 статических файлов: Ваш локальный游乐очник
Прежде чем мы перейдём к сложным настройкам, давайте начнём с чего-то простого - статического сервера. Это позволит нам伺服 наше React приложение локально на нашем компьютере.
Настройка простого статического сервера
-
Во-первых, убедитесь, что у вас установлен Node.js. Вы можете下载 его с nodejs.org.
-
Откройте ваш терминал или командную строку и выполните:
npm install -g serveЭта команда устанавливает пакет 'serve' глобально на вашей системе.
- Теперь создайте новую директорию для вашего проекта:
mkdir my-react-app
cd my-react-app- Создайте простой HTML файл под названием
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My First React App</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>- Теперь выполните команду serve:
serveВот и всё! Вы должны увидеть сообщение, говорящее вам, где ваше приложение伺воится. Обычно это http://localhost:5000. Откройте этот URL в вашем браузере, и вы увидите ваше первое React приложение!
Компилятор Babel: Перевод в будущее
помните Babel из нашей инструментальной цепочки? Пора встретить этого магического переводчика! Babel - это компилятор JavaScript, который позволяет вам использовать последние возможности JavaScript, даже если браузеры их не поддерживают.
Зачем нам Babel?
Представьте, что вы пишете письмо другу, который говорит на другом языке. Babel - это как переводчик, который может мгновенно перевести ваше письмо на язык вашего друга. В мире React, Babeltranslate современный JavaScript и JSX (расширение синтаксиса React) в версию JavaScript, которую понимают все браузеры.
Использование Babel в нашем проекте
Мы уже включили Babel в наш простой HTML файл выше. Давайте разберём эту часть:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your React code here
</script>Первая строка включает библиотеку Babel standalone. Вторая строка говорит Babel компилировать код внутри тега script.
Инструментальная цепочка Create React App: Готовое решение
Теперь, когда мы немного окунулись в React, давайте погрузимся с головой с помощью инструментальной цепочки Create React App. Это удобная, функционально насыщенная среда для обучения и создания новых React одностраничных приложений.
Настройка Create React App
- Откройте ваш терминал и выполните:
npx create-react-app my-app- Как только это будет сделано, перейдите в вашу новую директорию:
cd my-app- Запустите development сервер:
npm startВаше новое React приложение должно автоматически открыться в вашем браузере, обычно по адресу http://localhost:3000.
Что внутри?
Create React App настраивает полностью настроенную среду разработки. Давайте заглянем, что мы получаем:
| Функция | Описание |
|---|---|
| React | Основная библиотека React |
| webpack | Бандлер вашего кода и активов |
| Babel | Компилирует современный JavaScript |
| ESLint | Проверяет ваш код на ошибки |
| Jest | Позволяет вам писать тесты |
| Горячая перезагрузка | Мгновенно видите ваши изменения в браузере |
Ваш первый компонент
Давайте создадим простой React компонент. Откройте src/App.js и замените его содержимое на:
import React from 'react';
function App() {
return (
<div>
<h1>Welcome to My React App</h1>
<p>This is my first component!</p>
</div>
);
}
export default App;Сохраните файл и проверьте ваш браузер. Вы должны увидеть ваш новый компонент отрендеренным!
Заключение
Поздравляю! Вы только что сделали свои первые шаги в захватывающем мире разработки React. Мы covered много ground - от настройки простого статического сервера до использования мощной инструментальной цепочки Create React App.
Помните, что обучение React - это путешествие. Не волнуйтесь, если всё не сойдётся сразу. Продолжайте практиковаться, продолжайте создавать, и, самое главное, продолжайте наслаждаться!
В следующем уроке мы углубимся в React компоненты и начнём создавать более сложные приложения. Пока что,快乐编码!
Credits: Image by storyset