很久没有更新了，最近在上班之余，学习了react，初次尝试做了一个购物网站，想分享一个react开发的步骤，也算是自己学习的一个总结。
一、创建react项目
1、进入控制台，全局安装create-react-app脚手架
npm install -g create-react-app
2、控制台cd命令进入你想要创建的目录下，运行如下命令，创建一个react项目（myreact为你创建的项目名称，你也可以自己更改），完成后，生成如下的目录结构
create-react-app myreact
myreact目录结构
3、cd myreact命令进入myreact目录下，运行npm run eject命令，将webpack配置文件暴露出来，命令运行完后，目录结构有所变更，如下：
配置文件暴露后文件结构
4、执行npm run start，让你的第一个项目运行起来，运行结果如下：
myreact项目运行结果
当你运行npm run start时，项目无法启动，那么需要将node_modules删除，然后运行npm install命令，运行完成后，再次npm run start即可。
二、myreact项目整理
在创建完一个react项目后，我们再进行下一步操作，将结构中无用的内容删除，使这个项目看起来更简洁，也方便后面开发。
1、首先将src目录下无用的文件删除，如下图，src下除了APP.js，index.js，serviceWorker.js这三个文件外，其他均删除，删除后src文件结构如下
删除后文件结构
2、然后修改App.js的内容如下：
import React, {Component} from 'react';
export default class App extends Component {
render() {
return (
<div>
我的第一个应用
</div>
)
}
}
3、在index中删除对index.css的引用，如下：
index.js
4、接着整理public文件下的内容，将无用的文件删除，并且修改下index.html，manifest.json的内容，最终效果如下：
修改后public文件结构
/* public/index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
<meta name="theme-color" content="#000000" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>我的react项目</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
/* public/manifest.json*/
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
5、完成后，我们就整理出一个比较干净的react项目，下面运行npm run start查看项目是否可以运行：
运行结果
