2.5 KiB
2.5 KiB
title | localeTitle |
---|---|
Your first React App | 你的第一个React App |
你的第一个React App
安装
如前一个artice(安装)中所述,运行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,然后编辑src
文件夹中的App.js
文件。使用react-create-app
工具react-create-app
,此文件中已存在一些代码。
代码将包含以下部分:
进口
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
webpack使用它来导入所有必需的模块,以便您的代码可以使用它们。此代码导入3个模块: 1) React
和Component
,它允许我们使用React,因为它应该被使用。 (带组件) 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是一个使用Components的库,它允许您将UI拆分为独立的,可重用的部分,并独立思考每个部分。 已经创建了1个组件,即App
组件。如果您使用create-react-app
工具,则此组件是项目中的主要组件,您应该围绕此中心类构建。
我们将在下一章中详细介绍组件。
出口
在react中创建类时,应该在声明后导出它们,这允许您使用import
关键字在另一个文件中使用该组件。您可以在export
关键字后使用default
来告诉React这是此文件的主类。
export default App;
查看结果!
通过发出npm start
命令启动开发服务器后,您可以在浏览器中查看添加到项目中的更改。发出命令后,npm应该打开一个自动显示你的应用程序的浏览器。