React学习中的一个小实战（智能社）

最近在学习React，跟着前端blue大神学习基础，这是课程中的一个小案例，因为不会，希望写博客来加强记忆。
此案例是用React来实现豆瓣电影的前后端数据交互。
首先来看一下改之前的源码。

博客会附上js以及css整个项目，编译器为Atom。
源文件
这个作业很简单，就是将原生css，js写的项目改编成React渲染的项目。
首先在开始前有一个小问题
在index.html下面添加这样一行代码，

     <div id="root"></div><script type="text/babel" src="js/components/nav.js"></script><script type="text/babel">const root=document.getElementById('root');ReactDOM.render(<Nav />, root);</script>

然后写一个js，命名为nav.js


class Nav extends React.Component{render(){return (<div>navvvvvv</div>);}
}

将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(<div className="nav-secondary"><div className="nav-items"><ul>{this.state.links.map(link=>(<li key={link.href}><a href={link.href}>123</a></li>))}</ul></div><a href="https://movie.douban.com/annual/2018?source=movie_navigation" className="movieannual2018"></a></div>)}}

这是写完之后的代码，有很多是es6的语法，大家不会的可以看一下es6语法，通过map循环来创建一个个新的li，使其得到显现

这是重后端获取来的数据，可以看到和页面上一模一样，注意每个li里面必须有一个不同的key

这篇博客写的比较乱，大致掌握了思路和技巧，但还是不太熟练，还得继续加油，如果有初学者小伙伴发现这个，也可以拿着个练练手哦。

React学习中的一个小实战（智能社）相关推荐

WPF制作的一个小功能,智能提示(IntelliSense)
WPF制作的一个小功能,智能提示(IntelliSense) 原文 http://www.cnblogs.com/scheshan/archive/2012/06/30/2570867.html 最近 ...
MFC学习中遇到的小问题和解决方案
MFC学习中遇到的小问题和解决方案 1 清除combox里面的内容 ((CComboBox*)GetDlgItem(IDC_COMBO_CF))->ResetContent();//消除现有所有 ...
学习中遇到的小技巧（陆续更新……）
原来只是在网易博客里整理了一些学习中遇到的小技巧,现在开始在这里慢慢积累希望对大家有所帮助. 1.浏览器技巧: 如果浏览器的缓存已满,服务速度可能会减慢,您可能无法下载和查看附件.一下是在Intern ...
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
python 子图_python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
如何在 React Native 中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...
python画50个图-python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
python画简便的图-python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...
python一张图-python 实现在一张图中绘制一个小的子图方法
有时候为了直观展现图的信息,可以在大图中添加小子图的方式进行数据分析,如下图所示: 具体的代码如下:该图连接了数据库,当然重要的不是数据展示,而是添加子图的方法. import matplotlib. ...

React学习中的一个小实战（智能社）

React学习中的一个小实战（智能社）相关推荐

最新文章

热门文章