Установка React (NPM)

Перед началом убедитесь, что у вас установлены Node.js и npm. Проверить, установлены ли они, можно с помощью следующих команд:

node -v
npm -v

Если ваша система пока не поддерживает Node.js и NPM, обратитесь к нашемуруководству по Node.js。

Мы рекомендуем использовать в React модульную систему CommonJS, такую как browserify или webpack. В этом руководстве используется webpack.

Использование npm в Китае очень медленное. Вы можете использовать инструмент командной строки cnpm, доработанный Taobao (с поддержкой gzip-сжатия), вместо стандартного npm:

$ npm install -g cnpm --registry=https://registry.npmmirror.com
$ npm config set registry https://registry.npmmirror.com

Затем вы можете использовать команду cnpm для установки модулей:

$ cnpm install [name]

Для получения дополнительной информации см.:http://npm.taobao.org/。

Используйте create-react-app для быстрого создания среды разработки React

React предоставляет официальный инструмент Create React App для быстрого создания проектов React.

create-react-app создан в Facebook. С помощью этой команды мы можем быстро создать среду разработки React без настройки.

Проект, автоматически создаваемый create-react-app, основан на Webpack + ES6.

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

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

Вы также можете использовать командуnpxдля его создания. npx — это инструмент, включённый в npm 5.2.0 и более поздние версии, используемый для выполнения локальных или удалённых пакетов npm:

npx create-react-app my-app

Откройте в браузереhttp://localhost:3000/, результат показан на рисунке ниже:

Структура каталога проекта выглядит следующим образом:

my-first-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock (или  package-lock.json)

Описание каталогов и файлов

node_modules/

Хранит все пакеты зависимостей проекта. Этот каталог автоматически создаётся npm или yarn и содержит все сторонние библиотеки и модули, необходимые для работы проекта.

public/

Хранит статические файлы. Webpack не будет обрабатывать файлы в этом каталоге.publicФайлы в этом каталоге будут скопированы напрямую в каталог сборки.

  • favicon.ico: Маленький значок на вкладке браузера.
  • index.html: HTML-файл шаблона. Компоненты React будут смонтированы вdivэлемент в этом файле.
  • logo192.pngиlogo512.png: Значки логотипа React разных размеров.
  • manifest.json: Файл манифеста веб-приложения, используемый для определения метаданных, таких как имя приложения и значки.
  • robots.txt: Используется, чтобы сообщить поисковым системам, какие страницы можно сканировать.

src/

Хранит исходный код приложения. Здесь вы в основном занимаетесь разработкой.

  • App.css：AppФайл стилей компонента.
  • App.js: Основной файл компонента, определяющий базовый компонент React.
  • App.test.js：AppФайл тестов компонента.
  • index.css: Глобальный файл стилей.
  • index.js: Входной файл приложения, отвечающий за рендеринг компонентов React в DOM.
  • logo.svg: SVG-файл для логотипа React.
  • reportWebVitals.js: Файл для мониторинга производительности, который может помочь вам понять и проанализировать производительность вашего приложения.
  • setupTests.js: Файл, используемый для настройки тестовой среды.

.gitignore

Перечисляет файлы и каталоги, которые Git должен игнорировать, такие какnode_modules/и каталог вывода сборки.

package.json

Файл конфигурации проекта, содержащий информацию о проекте, скрипты, зависимости и т. д.

README.md

README-файл проекта, содержащий базовую информацию о проекте и инструкции по использованию.

yarn.lockилиpackage-lock.json

Файл блокировки, фиксирующий точные версии зависимостей для обеспечения согласованной установки зависимостей в разных средах.

Попробуйте изменить код файла src/App.js:

src/App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Добро пожаловать в учебное руководство</h2> </div> <p className="App-intro"> Вы можете изменить его в <code>src/App.js</code> файл. </p> </div> ); } } export default App;

После изменения откройте http://localhost:3000/ (обычно автоматически обновляется), и вывод будет следующим:

src/index.js — это входной файл. Мы можем попробовать напрямую изменить код файла src/index.js:

Примечание:В React 18 ReactDOM.render устарел.

Пример

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Привет {props.name}!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Отрисовать компонент Hello и передать свойство name
root.render(<Hello name="World" />);

Затем откройте в браузереhttp://localhost:3000/и он выведет:

Hello World!

Создайте свой первый компонент

Вы можете отредактироватьApp.jsфайл, чтобы создать ваш первый компонент. Вот простой пример, который изменяетAppкомпонент для отображения "Hello, React!":

Пример

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Привет, React!</h1>
      </header>
    </div>
  );
}

export default App;

После сохранения файла браузер автоматически обновится, и вы должны увидеть "Hello, React!" на странице.

Вы можете создавать дополнительные файлы компонентов вsrcкаталоге, например, создайтеHello.jsфайл:

код файла Hello.js:

import React from 'react';

function Hello() {
  return <h1>Привет из нового компонента!</h1>;
}

export default Hello;

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

Пример

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Hello />
      </header>
    </div>
  );
}

export default App;

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

Другие расширения