React工程化项目结构详解

时间:2021-6-12 作者:qvyue

通过create-react-app来构建React项目

create-react-app 是来自 FaceBook 的脚手架工具,用于快速构建工程化的 React 项目,它是基于 Node.js 环境的,可以通过npm来进行安装。

npm install -g create-react-app  //全局安装

如果是 Mac 用户,请加上sudo,不然会提示没有权限操作。

sudo npm install -g create-react-app

总有人说国内 npm 很慢,但是我觉得可能是你的网络或者电脑的问题,我一直用的 npm,觉得还行毕竟原生就是原生的。如果真觉得慢,你可以使用淘宝的 cnpm,读者可以另行设置,这里不赘述。

构建 React 项目

进入到你想要创建项目的目录,使用命令构建项目,只需等待它下载完成就可以了。

create-react-app [项目名]

React 工程化项目的结构

构建好之后的React项目,结构大致是这样的。

React工程化项目结构详解
React工程化项目结构图.png
  • package.json
    这个文件管理项目的依赖,相当于maven里的pom.xml文件,但是它里面还有一些命名。总之,跟Vue是一样的。

  • public 文件夹
    favicon.ico–浏览器tab上的图标,是项目的标志,可以替换为公司的Logo。
    index.html–项目的入口文件,一切从这里开始,这里是代码执行的源头。其中的

    是项目的总容器,所有的内容都存储在这个容器中,一个项目里有且只能有一个。我们把这个div称为“根DOM节点”,在此div下的所有内容都由 React DOM 来管理。

  • src文件夹
    存放的是项目的核心内容,也是我们主要的工作区域。
    index.js–是和index.html文件关联的唯一接口。内容如下:

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

ReactDOM.render(
  ,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ReactDOM.render()方法的作用就是将的内容渲染到根DOM节点中去。document.getElementById(‘root’)中的”root”便是index.html中的”root”了,便是引用页面内容了。在这里,也可以写一些内容(结构,样式,逻辑)是整个项目的根组件,比如:

ReactDOM.render(

Hello World

, document.getElementById('root'));
  • App.js
    该类是继承react提供的component,export default App;是为了将App公开,index.js才能够引用。App.js继承了component的话,必须使用render进行渲染。return的内容是类似于html结构的内容,就是jsx,jsx语法是react的主要语法。内部的div的className是为了区分html语法的一个类名,这个是div的样式引用。在这个文件中,只能用一个div容器,如果在div的同级目录添加别的内容,便会报错。
    className=”App”,是引用到App.css的样式。注意,页面内容样式是就近原则,首先用App.css的样式,App.css是组件的样式,index.css是全局的样式。
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。