https://www.jianshu.com/p/1f3acf8f8927
一、脚手架工具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>作者：灯光树影
链接：https://www.jianshu.com/p/1f3acf8f8927
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。