react项目文件结构解析

环境搭建好之后的项目结构（搭建环境方法可参照https://my.oschina.net/korabear/blog/1813164），利用VScode编辑器打开：

这个是自动创建的初始结构，下面是各个文件的内容和作用。

1.package.json

这个文件是管理下载的依赖包,在项目中经常用到的是"react"库，“react-dom”（将jsx语法渲染到dom中）

在项目中最重要的命令是“start”启动项目，"bulid"的作用就是将项目打包。

2.public文件夹

1).favicon.ico

是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。

2).index.html

项目的入口文件，引用了第三方类库啊，还可以引入cdn

<div id="root"></div>是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个。

3.src文件

1).index.js

存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，index.js文件是和index.html进行关联的文件的唯一接口。index.js的内容结构：

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

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

ReactDOM.render(）的作用是将<App/>的内容渲染到根“root”中去。

document.getElementById('root')中的"root"便是index.html中的"root"了，<App />便是引用页面内容了。在这里，<App />也可以写一些内容(结构,样式,逻辑)是整个项目的根组件，比如:

ReactDOM.render(<p >Hello World</p>, document.getElementById('root'));

运行结果（前提是本地服务器启动，打开localhost:3000）：

但是，能够引用<App />的原因是文档内容的头部，有import App from './App';内容，就是为了将App.js的内容引入到index.js文件中。

2).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是全局的样式。

内容渲染的方式有两种，jsx语法(上面默认的内容)和React.createElement的方法。

第二种方法:

return React.createElement("div",{classNama:'App'},React.createElement('h1',null,'Hello World!!!'));

这种方法显然不方便。

所以，经常用jsx语法比较好。

react项目文件结构解析

猜你喜欢