一、脚手架工具create-react-app安装
使用以下命令进行安装脚手架:
npm install -g create-react-app
二、create-react-app的使用
- 在需要创建项目的位置打开命令行
- 输入create-react-app + 项目名称的命令,比如:
create-react-app todolist
- 当项目创建完成后,可以进入项目,并启动:
cd todolist
npm start
三、脚手架工具生成的目录结构
- 重要文件:
- index.html
- index.js
- App.js
- 文件内容:
- App.js
import React, { Component } from 'react';
/**
import {Component} from 'react'
相当于:
import {Component} from React // 因为react导出React对象
由于解构赋值的原因,所以Component等于React.Component
*/
//所有的组件都要继承Component
class App extends Component {
// 发送页面内容
render() {
return (
<div>
Hello World
</div>
);
}
}
// 导出App模块
export default App;
- index.js
import React from 'react'; // 导入React的作用是使用jsx语法
import ReactDOM from 'react-dom';
import App from './App'; // 接受
// 像js中使用标签的语法,叫做jsx语法
ReactDOM.render(<App />, document.getElementById('root'));
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>TodoList</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>