狗屎一样的React（第二节，让目录结构变得更易懂）

上一节，我们把从官网下载下来的React demo 启动起来了，但很多小伙伴碰到react还是感到很懵，不知从何下手，没事冒出个app.js，到底干嘛用的。刚下载下来的demo也不符合我们的真是项目开发思路，总之一句话，很狗屎。这一节，我来将demo的目录结构改变一下，然后做出一个简单的hello world实例，同时包含样式引用。

安装完以后，在小黑窗输入npm start 会自动在浏览器弹出他的demo示例，如图：

然后看一下大概的目录结构，如图：

node_modules： 这里面包含了react项目中会用到的一些组件，install的时候下载下来的，你可以进去看看，有一些如base64之类的我们可能会用到的组件；

public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发，所以暂时只包含一个index.html，并且这也是react工程的入口页面，入口页面怎么理解，就是你启动项目后，打开的首页，第一眼呈现的那个页面；

src：里面包含了一些我们自己使用的js文件，css文件，img文件等等，但你打开src文件夹你会发现很混乱，不要管什么app.js，你就看到index.js即可，系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应。

接下来，我们改动一下src里面的内容和结构，让首次接触react的小伙伴尽量能觉得他有点亲切的感觉，事实证明，越亲切的事物我们越希望去接近。

src文件夹内容修改如图：

这样，我们是不是更容易理解了呢，放样式的css文件夹，我们以后将要自己用于项目中自己手写的js文件夹，我们页面中需要的img图片等等。所以，src文件夹下原来的所有东西，除了index.js之外，都可以删掉了。别一开始就搞那么复杂，这样我们就可以轻装上阵了。

接下来，我们做一些代码修改，展示一个含有样式的hello world示例。

1、看public下的index.html，我们还是保留最简洁，最易懂的部分，如图：

怎么样，就是单纯的一个div，添加了id="root"，我觉得只要睁开眼就都能看懂吧；

2、再来看src下的index.js，我们依然保留最简约的部分，如图：

import 是react的es6使用，就像我们在页面中用<script src="react.js">那样，但为了适应时代的发展，让自己更好的走前端这条路，更好的学会react这个狗屎一样的框架，我们以后将更多的使用import来引入js以及css文件；

ReactDOM是react的方法类，我们用他的render方法来创建一个h1标签，含有hello world内容，然后渲染到id是root的div中，如果你心里对自己说：没看懂。那么你就多照着敲几遍，接下来看一下页面，如图：

3、接下来我们为这个demo添加样式，还是那条原则，尽量少写行内样式，写自己的css文件。这个时候我们在 src文件夹下的css文件夹下创建demo.css，写入css样式如图：

怎么样，至今是不是觉得天也是晴的，雨也是停的，自己也还是很行的呢？

4、引入这个demo.css。还是那个原则，不要想着在页面里通过标签引入文件了，要经常记得import这个关键字，要用熟练，用习惯，打开刚才的index.js然后引入，如图：

5、看一眼我们的成果，如图：

好啦，这一节我们通过以往自己的知识结构创建了css img js等文件夹，看到了入口index.html和入口index.js文件，我们引入了自己的样式。基础就这么多，看到有es6的东西及时去查，或者照着demo多敲几遍记熟了。

下一节我们开始做真正的属于自己的第一个React小项目，喜欢的小伙伴关注下一节：狗屎一样的React（第三节，创建app顶部标题栏）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!