4.3 KiB
title | localeTitle |
---|---|
Your first React App | Ваше первое приложение React |
Ваше первое приложение React
Монтаж
Как указано в предыдущей статье (Установка), запустите инструмент Create React App
. После того, как все закончится, введите cd
в папку приложения и запустите npm start
. Это запустит сервер разработки, и вы все готовы начать разработку своего приложения!
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
в этом файле уже будет некоторый код.
Код будет состоять из следующих частей:
импорт
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
Это используется webpack для импорта всех необходимых модулей, чтобы ваш код мог их использовать. Этот код импортирует 3 модуля: 1) React
и Component
, которые позволяют нам использовать Реакт, как он должен использоваться. (С компонентами) 2) logo
, который позволяет использовать logo.svg
в этом файле. 3) ./App.css
, который импортирует таблицу стилей для этого файла.
классы / компоненты
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, что это основной класс этого файла.
export default App;
Просмотрите результаты!
Когда вы запустили сервер разработки, выпустив команду npm start
, вы можете просмотреть изменения, которые вы добавляете в свой проект в прямом эфире в своем браузере. После выдачи команды npm должен открыть браузер, автоматически отображающий ваше приложение.