73 lines
4.3 KiB
Markdown
73 lines
4.3 KiB
Markdown
|
---
|
|||
|
|
title: Your first React App
|
|||
|
|
localeTitle: Ваше первое приложение React
|
|||
|
|
---
|
|||
|
|
## Ваше первое приложение React
|
|||
|
|
|
|||
|
|
### Монтаж
|
|||
|
|
|
|||
|
|
Как указано в предыдущей статье (Установка), запустите инструмент `Create React App` . После того, как все закончится, введите `cd` в папку приложения и запустите `npm start` . Это запустит сервер разработки, и вы все готовы начать разработку своего приложения!
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install -g react-create-app
|
|||
|
|
create-react-app my-first-app
|
|||
|
|
|
|||
|
|
cd my-first-app
|
|||
|
|
npm start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Редактирование кода
|
|||
|
|
|
|||
|
|
Запустите свой редактор или IDE по выбору и отредактируйте файл `App.js` в папке `src` . При создании с помощью средства `react-create-app` в этом файле уже будет некоторый код.
|
|||
|
|
|
|||
|
|
Код будет состоять из следующих частей:
|
|||
|
|
|
|||
|
|
#### импорт
|
|||
|
|
|
|||
|
|
```JavaScript
|
|||
|
|
import React, { Component } from 'react';
|
|||
|
|
import logo from './logo.svg';
|
|||
|
|
import './App.css';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Это используется [webpack](https://webpack.js.org/) для импорта всех необходимых модулей, чтобы ваш код мог их использовать. Этот код импортирует 3 модуля: 1) `React` и `Component` , которые позволяют нам использовать Реакт, как он должен использоваться. (С компонентами) 2) `logo` , который позволяет использовать `logo.svg` в этом файле. 3) `./App.css` , который импортирует таблицу стилей для этого файла.
|
|||
|
|
|
|||
|
|
#### классы / компоненты
|
|||
|
|
|
|||
|
|
```JavaScript
|
|||
|
|
class App extends Component {
|
|||
|
|
render() {
|
|||
|
|
return (
|
|||
|
|
<div className="App">
|
|||
|
|
<header className="App-header">
|
|||
|
|
<img src={logo} className="App-logo" alt="logo" />
|
|||
|
|
<h1 className="App-title">Welcome to React</h1>
|
|||
|
|
</header>
|
|||
|
|
<p className="App-intro">
|
|||
|
|
To get started, edit <code>src/App.js</code> and save to reload.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
React - это библиотека, в которой используются компоненты, которые позволяют разделить ваш интерфейс на независимые, многоразовые фрагменты и подумать о каждой части отдельно. Уже создан один компонент, компонент `App` . Если вы использовали инструмент `create-react-app` , этот компонент является основным компонентом проекта, и вы должны строить вокруг этого центрального класса.
|
|||
|
|
|
|||
|
|
Мы рассмотрим детали, более подробно описанные в следующих главах.
|
|||
|
|
|
|||
|
|
#### экспорт
|
|||
|
|
|
|||
|
|
При создании класса в реакции вы должны экспортировать их после объявления, что позволяет использовать компонент в другом файле с помощью ключевого слова `import` . Вы можете использовать `default` после ключевого слова `export` чтобы сообщить React, что это основной класс этого файла.
|
|||
|
|
|
|||
|
|
```JavaScript
|
|||
|
|
export default App;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Просмотрите результаты!
|
|||
|
|
|
|||
|
|
Когда вы запустили сервер разработки, выпустив команду `npm start` , вы можете просмотреть изменения, которые вы добавляете в свой проект в прямом эфире в своем браузере. После выдачи команды npm должен открыть браузер, автоматически отображающий ваше приложение.
|
|||
|
|
|
|||
|
|
### источники
|
|||
|
|
|
|||
|
|
[1\. Реагировать на документацию](https://reactjs.org/docs/hello-world.html)
|