freeCodeCamp

4.3 KiB

Raw Blame History

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 должен открыть браузер, автоматически отображающий ваше приложение.

источники

1. Реагировать на документацию

4.3 KiB Raw Blame History Unescape Escape