新建一个react项目及各个目录详解

1、安装node.js

2、安装npm npm安装较慢，建议更换淘宝源，或者安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org 3、安装yarn

cnpm install -g yarn

4.创建react项目

安装脚手架

cnpm install -g create-react-app 或者 npm install -g create-react-app

若此时出现create-react-app: command not found错误

cd到项目目录下

cd my-project

yarn start 或 npm start

之后浏览器会自动打开页面，或者手动输入http://localhost:3000 即可访问

react项目结构 README：项目的说明文件 一般看一个陌生的项目先从README入手，里面会详细注明项目需要安装的依赖以及所运行的环境等

package.json： node包文件，包括项目的一些介绍（如名字、版本号、依赖的第三方包等等）

node_modules ： 项目依赖的第三方包

public文件夹：

index.html：浏览器自动打开的HTML页面 favico.ico：项目图标 mainfest.json： wepack打包优化相关

src文件夹：所有代码

index.js

//导入核心模块
import React from react;
import ReactDOM from react-dom;

// 全局样式
import ./index.css;

// 入口组件（组件的首字母必须大写）
import App from ./App;
ReactDOM.render(<App />, document.getElementById(root));

App.js：react组件

// 必须导入React模块：JSX依赖于该模块
import React from react;
// 局部样式
import ./App.css;

// 组件的定义
function App() {
          
   
	return (
	<div>
		测试
	</div>
	);
}
export default App;

index.js ： 整个项目的入口文件，是渲染页面的地方，并且最终渲染的，相当于Vue中的main.js。 registerServiceWorker.js ： 离线缓存 App.js：总组件 App.css：css文件

yarn.lock：项目依赖的安装包

.gitignore： 使用 git管理代码的时候，有些文件不希望传到git仓库中，可以定义在这里。