第一章 react前端开发-react入门

目前市面上前端框架有很多，前端技术更新非常之快，当前的前端框架格局差不多是Angular、Vue和React三足鼎立的状态。

react是目前很流行的前端开发框架，使用它可以开发迅速和方便调试，长江后浪推前浪，web开发经历过好几次进化，做Java开发的伙伴以前应该学过Servlet，这种方式开发Web应用页面都是由服务端生成然后返回给浏览器的，如果业务逻辑稍微复杂点就很难拼html，非常痛苦。直到后来形成了MVC的模式才好了很多，终于使得前端和后端进行了分离，开发人员可以各司其职，但是这种情况下View层和Controller层的耦合度也比较高，会增加Web开发的复杂度，Java中的Struts、SpringMVC框架都是这样，前端页面的跳转都要经过服务端。

React是由Facebook开源的，据说当初Facebook要做一个网站，在选择框架时，当时市面上所有的前端技术都不满意，因此自己搞了一套，后来给开源了。

有可能react也一样，再过几年又被其他技术淘汰了，所以程序员需要不断的学习。

接下来通过一个简单例子来快速上手react的开发，其他更细节的内容在后面讲解。

第一步：检查环境

在使用react之前，需要确保计算机中装有Node.js环境，没有的伙伴请先安装一下。

第二步：创建react应用

在命令行执行  npx create-react-app 应用名称  ，就可以创建一个应用了，如下图所示：

命令执行成功后，可以在目录下看到hello-react文件夹了。

第三步：打开应用

 使用webstorm或者vs code打开刚创建好的hello-react文件夹，可以看到下面的目录，可以看到很多文件都提前生成好了，src下的index.js是应用的主程序，这个非常重要，在index.js里有root.render()，整个页面都是从这里开始渲染的

 在这里顺便说一句，react在javascript中嵌入了html标签，使得对javascript做了一些扩展，有过JSP开发经验的伙伴应该也记得曾经在JSP中也能嵌入html代码。这样做有好处也有坏处，先说好处就是不用分开定义html和js文件，编写和阅读代码会方便很多。

将上图第9行到第11行修改成下图所示的内容：

第四步：启动服务

执行命令yarn start，服务就启动了，默认监听3000端口，会自动打开浏览器，此时浏览器就展示出了刚才输入的Hello  React了，如下图所示：

至此，第一个React的hello world程序就算搭建成功了，后续的高级用法都是在这个基础上进行的

在上图中目录结构有一个package.json文件，它是用来指定项目的依赖项的，运行npm install或yarn start时，会使用package.json来确定需要下载和安装的依赖项，并将其安装到node_modules文件夹中