上一节，我们把从官网下载下来的React demo 启动起来了，但很多小伙伴碰到react还是感到很懵，不知从何下手，没事冒出个app.js，到底干嘛用的。刚下载下来的demo也不符合我们的真是项目开发思路，总之一句话，很狗屎。这一节，我来将demo的目录结构改变一下，然后做出一个简单的hello world实例，同时包含样式引用。
import 是react的es6使用，就像我们在页面中用那样，但为了适应时代的发展，让自己更好的走前端这条路，更好的学会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顶部标题栏）
网友评论