react-项目结构

react环境搭建

1.安装安装nodejs( 问度娘 )。

2.安装npm或者yarn或cnpm( 问度娘 )。

3.安装react脚手架create-react-app：

npm install -g create-react-app
或  cnpm install -g create-react-app
或  yarn add -g create-react-app

react创建项目

create-react-app  myReact   
cd myReact   
npm start  或 yarn start

react項目结构

初始项目结构如下：
 
┌── public               // 公共资源文件
│   ├── favicon.ico      // 是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。
│   ├── index.html       // 主文件
│   └── manifest.json    // 编译配置文件
│
├── node_modules         // 项目依赖包文件夹
├── src                  // 我们的项目的源码编写文件（里面的文件可根据喜好，随意更改）
│   ├── App.css          // 样式文件（删除）
│   ├── App.js           // 入口组件，其他组件会被插入此组件中，此组件通过index.js再插入 index.html 文件里，形成单页面应用；
│   ├── App.test.js      // 测试文件（删除）
│   ├── index.css        // 样式文件（删除）
│   ├── index.js         // 存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，index.js文件是和index.html进行关联的文件的唯一接口，类似vue里面的main.js。
│   ├── serviceWorker.js // 
├── package-lock.json    // npm5 新增文件，优化性能
├── package.json         // 项目依赖包配置文件（node配置文件）
└── README.md            // 项目说明文档

react项目准备

下载相关插件

npm insatll classnames --save    // 样式类名插件

react完整项目结构

┌── public               // 公共资源文件
│   ├── favicon.ico      // 是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。
│   ├── index.html       // 主文件
│   └── manifest.json    // 编译配置文件
│
├── node_modules         // 项目依赖包文件夹
├── src                  // 我们的项目的源码编写文件（里面的文件可根据喜好，随意更改）
│   ├── component        // 组件文件，存放所有的组件 
│   │       └── PageHome // 组件文件夹（每个组件都有自己的css和js文件或者图片等，所以每个组件都创建一个文件夹，习惯首字母大写） 
│   │           ├── index.js       // 组件文件夹
│   │           └── index.css      // 组件文件夹
│   ├── App.js           // 入口组件，其他组件会被包裹此组件中，此组件通过index.js再插入 index.html 文件里，形成单页面应用；
│   ├── index.js         // 存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，index.js文件是和index.html进行关联的文件的唯一接口，类似vue里面的main.js。
│   └── serviceWorker.js // 
├── package-lock.json    // npm5 新增文件，优化性能
├── package.json         // 项目依赖包配置文件（node配置文件）
└── README.md            // 项目说明文档