React---项目结构分析

*********************************************************

到这项目已经创建完毕。

项目结构

那么这些的作用都是什么呢？

node_modules:(包含了react项目中会用到的一些组件，install的时候下载下来的)


public:(项目中的启动页面，react比较适合单页面项目应用开发，所以暂时只包含一个index.html，并且这也是react工程的入口页面)

       Manifest.json：5+移动App的配置文件，用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息，用户可通过HBuilder的可视化界面视图或者源码视图来配置 5+移动App的信息。
       index.html:项目入口。
       favicon:图片。

src:(包含了一些我们自己使用的js文件，css文件，img文件等。系统默认将index.html对准了index.js。index.js也就是我们的入口js，他和index.html所对应)

       App:组件的js、css。
       index:入口文件的js、css。index.js必须在src的一级目录下。
       logo:图片。
       registerServiceWorker:注册一个服务来为本地缓存提供服务。这使得应用程序在随后的访问中加载更快。
    
.gitignore:(一般来说,每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中,项目开发中，很多文件都是不需要加入版本管理的，比如java字节码文件.class，安卓虚拟机文件.dex和一些包含密码的配置文件等。这个文件的内容是一些规则，Git会根据这些规则来判断是否将文件添加到版本控制中)

package-lock.json:(锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致。)

package.json:(定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。)

README.md:(README.md文件是一个项目的入门手册，里面介绍了整个项目达到什么样子的效果、需要搭建什么样的环境、具备什么样的技能等等。)

理解了这些模块或是文件的作用与功能。但是在开发中，这样的结构有点乱，整理一下：

换成常用的结构

只动了src里面的内容，其他模块没动。

新建：

css
js
page
resource

四个文件，值得注意的是：index.js必须在src的一级目录下，不能放到文件夹中，否则会报错，因为index.html和index.js内部默认位置。

index.js文件（只将路径修改了下，其他没变。）

import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import App from './js/App';
import registerServiceWorker from './js/registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

修改完成。

*********************************************************

React---项目结构分析

猜你喜欢