React通过AJAX加载数据

使用React Router实现组件的路由基础上接着写原型,右侧面板的页面列表数据,要从服务器端通过AJAX方式加载。

源代码见:react-proto m4

下面简要介绍下做法。

模拟json数据

首先是要模拟服务器端的json数据接口。创建了api/pageLis.json文件,内容类似这样:

1
2
3
4
5
6
7
8
9
[
{
"id":231,
"name":"建立基本知识"
},
{
"id":453,
"name":"迈向成功的决心:情绪的纪律"
}

webpack-dev-server很好用,这个文件可直接通过这个url访问:http://localhost:3000/api/pageList.json

Read More

在webpack中加载css,并使用flexbox布局

继续在设置webpack实现React项目的hot load基础上写原型。需要将css的布局加进来。代码发布在react-proto m2

加载css

比较直接的方式,加载css

目前写的还不够合理,css文件放置在css目录下。使用webpack是通过javascript加载css的,因此不需要在网页中使用类似这样的代码:

1
<link rel="stylesheet" type="text/css" href="css/style.css">

react-hot-loader的作用下,可在修改css样式保存后,自动加载到网页中。不过也有例外:因为react-hot-loader只能重新加载javascript,如html增加了新元素,css即使动态更新了也不会起到作用。

Read More