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

Подготовка

Шаг 1: настройка среды разработки

Перед тем, как начать, убедитесь, что у вас установлены следующие инструменты:

  1. Node.js и npm: необходимо для установки зависимостей и запуска приложения.
  2. 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 и его экосистемы.