狗屎一样的React(第二节,让目录结构变得更易懂)

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

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

           狗屎一样的React(第二节,让目录结构变得更易懂)_第1张图片

然后看一下大概的目录结构,如图:

狗屎一样的React(第二节,让目录结构变得更易懂)_第2张图片

         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文件夹内容修改如图:

狗屎一样的React(第二节,让目录结构变得更易懂)_第3张图片

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

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

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

狗屎一样的React(第二节,让目录结构变得更易懂)_第4张图片

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

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

狗屎一样的React(第二节,让目录结构变得更易懂)_第5张图片

import  是react的es6使用,就像我们在页面中用

你可能感兴趣的:(React)