最近在学习React，跟着前端blue大神学习基础，这是课程中的一个小案例，因为不会，希望写博客来加强记忆。 此案例是用React来实现豆瓣电影的前后端数据交互。 首先来看一下改之前的源码。
博客会附上js以及css整个项目，编译器为Atom。 源文件 这个作业很简单，就是将原生css，js写的项目改编成React渲染的项目。 首先在开始前有一个小问题 在index.html下面添加这样一行代码，
然后写一个js，命名为nav.js
class Nav extends React.Component{
render(){
return (
);
}
}
将js引入到html页面，然后运行index.html 如图显示，有一个警告，两个错误 警告是由babel给出警告，警告我们这样使用babel是有分险的，具体会发生什么。我们后面会见到。 这个错误，作为小白的我看的很懵，这是一个跨域问题，blue大神在视屏中这样解释到：由于我们写的这个script是由babel来编译的，但是我们的babel并不能去得到这个nav.js,因为babel进行数据交互是采用的ajax，所以我们应该在服务器的环境下来运行这个项目 。其实我们将这个组件写在html中是没有这个错误的。 我特地去查了一下这个问题，原因是这样的：
babel.js库通过遍历script标签，查询type=text/babel的标签。获取该标签的src值后发送XMLHttpRequest，由于本地file协议打开html，内部发送ajax请求js文件，协议不同，所以跨域
我是这样理解的，在本地环境下，babel不能够跨文件的去读取另一个文件。（但是我在webstrom下使用是成功的，因为webstrom默认在服务器的环境下运行） 既然需要服务器，我们就给他一个服务器： 我是用的是blue老师同款serve 安装：
npm i -g serve
电脑上需要有npm哦 下载好后，直接启动 直接 serve 就可以启动 启动完成，会得到一个端口，我们复制这段地址，进入我们的项目再次访问刚刚的index.html 可以发现我们写的内容在上面显示了，并且刚刚报的错误也没有了。 既然项目可以正常运行了，那么下面我们就可以开始第一步了。
React很出名的一点就是他是实行组件开发的，在这大型项目中有着很重要的作用，极大地提高了代码的重用性。本次作业的内容也是掌握组件化开发。
那么我们开始来组件化 开发吧 怎么样进行组件化开发呢？什么又是一个组件呢？对于这点，也没有一个确切的说法，我们可以把一整个网页作为一个组件，也可将一个搜索框作为一个组件。我觉得blue老师说的一个词很好，“粒度“，就像我们炒菜放多少盐一样，取决于个人口味，我们可以将一个导航栏为一个组件，也可以将轮播图作为组件，然后由多个组件一起构成我们的网页。 这个案例十分典型，本次作业第一步就是将导航栏作为组件，用react渲染给html页面。 首先我们在nav.js中写一个组件，专门放置导航栏，将html页面的代码copy过来 部分代码如图所示，当然我们现在运行是会直接报错的，why？因为我们的react采用的是jsx语法啊，所以，我们得换成jsx语法的规则，比如class在jsx中应该是className ，凡是复合属性，后面的应该大写，去除中间的“-”，在这里特别要注意，
value应该使用defaultValue
，不然我们的输入框可能无法输入任何值，因为在jsx中，value="'恰巧是一个赋值语句，相当于给Value一个固定的值，所以无法修改.
ok ,当我们改好这一步后，我们发现，在服务器环境下运行是和我们之前运行的结果完全一样的,当我们拆开导航栏后，感觉这个导航栏似乎还可以再拆成几个小组件，我们在这里将其拆为搜说组件和一个链接组件
首先我们来看搜索框组件
先建一个nav-search的js文件
然后将搜索框的有关的内容复制过来，放入return中，之后就可以在nav.js文件中导入这个组件了
导入
在index.html文件中导入nav-search.js文件，记住，一定要先导入nav-search文件，然后导入nav文件，因为在nav文件中会用到nav-search中的组件，如果在后面导入就找不到这个组件了。
写好search文件之后我们就可以来写链接组件了，老规矩，直接创建文件然后copy
其实，到这里我们的改写就基本完成了。哇，有没有发现，一个文件里的那么多个代码，分成几个组件后变得这么少了，而且我们还可以重用，要是想用哪个组件了，直接导入就行了。
但是，我们的link组件里面，是放的我们导航栏的内容，一般情况下，我们这个是不能写死的，可能哪一天，我们导航的功能发生改变，所以我们要从后端来获取这些数据。既然有服务器，在这里我们就模拟一下。come
首先，我们删掉ul中的li，这个将从后端获取数据，并且我们写出来这个组件的构造函数，在状态中，我们写一个数组用来存放后端获取来的数据 在这里，我们使用axios来对后台发送请求，请求的接口blue老师已经为我们准备好了，首先要引入axios，通过script标签引入就行，然后通过axios发送异步请求。将得到的数据进行操作，创建li
class Links extends React.Component{
constructor(prpos){
super(prpos);
this.state = {
links:[]
};
axios({
url:"http://api.zhinengshe.com/10005-douban/navs",
headers:{
apikey:'017326c4c9dd42b7ba6c1811189444b7'
}
}).then(
res=>{
if(res.data.err){
alert(res.data.err);
} else{
this.setState({
links:res.data.data
})
}
},err=>{
console.log(err);
});
}
render(){
console.log('links:',this.state.links);
return(
{this.state.links.map(link=>(
))}
)
}
}
这是写完之后的代码，有很多是es6的语法，大家不会的可以看一下es6语法，通过map循环来创建一个个新的li，使其得到显现 这是重后端获取来的数据，可以看到和页面上一模一样，注意每个li里面必须有一个不同的key 这篇博客写的比较乱，大致掌握了思路和技巧，但还是不太熟练，还得继续加油，如果有初学者小伙伴发现这个，也可以拿着个练练手哦。