React – это JavaScript-библиотека для разработки интерактивных пользовательских интерфейсов. В этом руководстве мы научимся, как создать React-приложение с нуля, шаг за шагом. Не волнуйтесь, если вы новичок в разработке, я постараюсь объяснить все простым и понятным языком.
Подготовка
Шаг 1: настройка среды разработки
Перед тем, как начать, убедитесь, что у вас установлены следующие инструменты:
- Node.js и npm: необходимо для установки зависимостей и запуска приложения.
- Code Editor: можете использовать любой редактор кода по своему выбору, но рекомендую Visual Studio Code, так как он предоставляет отличные инструменты для разработчиков.
Шаг 2: создание нового проекта
Откройте терминал или командную строку и выполните следующую команду, чтобы создать новый проект:
«`bash
npx create-react-app my-first-react-app «` |
Эта команда создаст новую папку «my-first-react-app» и установит все необходимые зависимости для вашего проекта.
Шаг 3: запуск проекта
Теперь перейдите в созданную папку:
«`bash
cd my-first-react-app «` |
Запустите ваше первое React-приложение, используя команду:
«`bash
npm start «` |
После этого ваше приложение будет доступно по адресу `http://localhost:3000`. Откройте этот URL в вашем браузере, и вы увидите ваше новое Реакт-приложение, готовое к работе!
Программируем
Шаг 1: разбираемся с файловой структурой проекта
Прежде чем продолжить, давайте разберемся с файловой структурой проекта. Важно понять, как устроено ваше приложение:
`src`: тут исходники проекта.
`public`: статические файлы.
`node_modules`: зависимости проекта.
Шаг 2: изучаем компоненты
Компоненты – это независимые и переиспользуемые части UI. Каждый компонент может иметь свои стили, состояния и свойства.
Создадим первый. В папке `src` создайте новую папку с именем `components`, а затем внутри нее создайте файл `HelloWorld.js`. Вставьте следующий код в `HelloWorld.js`:
«`jsx
import React from ‘react’; function HelloWorld() { return <h1>Hello, World!</h1>; } export default HelloWorld; «` |
Шаг 3: используем созданный компонент
Откройте файл `src/App.js` и замените все на:
«`jsx
import React from ‘react’; import HelloWorld from ‘./components/HelloWorld’; function App() { return ( <div> <HelloWorld /> </div> ); } export default App; «` |
Шаг 4: пользовательские свойства (props)
Компоненты могут принимать пользовательские свойства (props) — это позволяет передавать данные от родительского компонента дочернему. Давайте модифицируем наш компонент `HelloWorld`, чтобы он мог принимать имя и выводить приветствие с этим именем.
Измените файл `HelloWorld.js` следующим образом:
«`jsx
import React from ‘react’; function HelloWorld({ name }) { return <h1>Hello, {name}!</h1>; } export default HelloWorld; «` |
Теперь обновим файл `src/App.js`, чтобы передать имя в компонент `HelloWorld`:
«`jsx
import React from ‘react’; import HelloWorld from ‘./components/HelloWorld’; function App() { return ( <div> <HelloWorld name=»John» /> <HelloWorld name=»Jane» /> </div> ); } export default App; «` |
Шаг 5: стилизация компонентов
Можно украсить компоненты через CSS или специальные библиотеки стилей. Воспользуемся первым вариантом.
Создайте новый файл `HelloWorld.css` в папке `components` и добавьте следующий CSS:
«`css
h1 { color: #ff4500; font-size: 24px; font-weight: bold; } «` |
Теперь подключим этот файл стилей к компоненту `HelloWorld.js`:
«`jsx
import React from ‘react’; import ‘./HelloWorld.css’; function HelloWorld({ name }) { return <h1>Hello, {name}!</h1>; } export default HelloWorld; «` |
Шаг 6: сборка приложения
Когда вы закончили разрабатывать свое приложение, пришло время для сборки. Выполним команду:
«`bash
npm run build «` |
После успешной сборки, вы найдете оптимизированные файлы в папке `build`.
Заключение
Вы только что создали свое первое Реакт-приложение. Теперь вы можете идти дальше и создавать более сложные приложения с использованием богатых возможностей React и его экосистемы.