React-tutorial例子全解析
Talk is cheap,Show me the code
近些时间一直在关注React，关于 如何学习React可以参照链接的文章自行制定计划。千里之行，始于足下。本文是React官方的教程上的一个例子，通过详细地学习，从中收获不少，特此做了笔记，与大家共享交流进步。
起步
下载 例子，然后进行解压
由于采用的node环境，因此下载解压之后，只需在所在目录运行
npm installnode server.js
采用默认端口设置，只需打开浏览器，访问 http://localhost:3000/
目录结构说明
react-tutorial
--node_modules --body-parser：express中间件，用于接收和解析json数据 --express：express框架--public --css --base.css：基本样式文件 --scripts -- example.js：React应用js文件 index.html：基本的HTML结构--.editorconfig：用于在不同的编辑器中统一编辑风格（文件编码）的配置文件--.gitignore：git相关配置文件--app.json：web app的相关信息--comments.json：上传的评论数据--LICENSE：项目代码使用协议--package.json：项目所依赖的包，npm install的安装包的配置文件--README.md：项目说明书，里面有使用说明--requirements.txt：不清楚--server.js：服务器端的js代码
App功能
此项目构建了一个简单的应用，如图所示
服务器端
服务器端的功能还是相对简单的，通过代码注释的形式来分析
导入了依赖的模块
var fs = require('fs'); //读写文件var path = require('path'); //路径var express = require('express'); //express框架var bodyParser = require('body-parser'); //中间件 生成app，并且进行配置
//获取comments.json文件的路径var COMMENTS_FILE = path.join(__dirname, 'comments.json');//设置端口app.set('port', (process.env.PORT || 3000));//设置静态文件的文件目录路径app.use('/', express.static(path.join(__dirname, 'public')));//启用bodyParser中间件接收请求，并且接收并解析json数据app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: true})); 设置响应头部信息
app.use(function(req, res, next) { //允许跨域 CORS res.setHeader('Access-Control-Allow-Origin', '*'); //缓存设置 res.setHeader('Cache-Control', 'no-cache'); next();}); 设置get请求url对应的处理函数（获取评论json数据）
app.get('/api/comments', function(req, res) { //读取comments.json文件，并且解析为json数据 fs.readFile(COMMENTS_FILE, function(err, data) { if (err) { console.error(err); process.exit(1); } //读取成功后，返回 res.json(JSON.parse(data)); });}); 设置post请求url对应的处理函数（提交评论数据）
app.post('/api/comments', function(req, res) { //先读取comments.json文件 fs.readFile(COMMENTS_FILE, function(err, data) { if (err) { console.error(err); process.exit(1); } //将文件内容解析为json数据 var comments = JSON.parse(data); //获取新评论 var newComment = { id: Date.now(), author: req.body.author, text: req.body.text, }; //添加json数组中 comments.push(newComment); //将json数据写回到comments.json文件中,并且返回全部的评论数据 fs.writeFile(COMMENTS_FILE, JSON.stringify(comments, null, 4), function(err) { if (err) { console.error(err); process.exit(1); } res.json(comments); }); });}); 启动，监听端口
app.listen(app.get('port'), function() { console.log('Server started: http://localhost:' + app.get('port') + '/');}); web端
web端核心在于 example.js文件，结合官网的资料，我们对这个应用进行分析，学习如何构建一个简单的react应用。
组件结构
React践行了 Web Components的理念，依照组件化的开发方式，我们来分析这个应用的组件结构（如图所示）：
即是：
-- CommentBox -- CommentList -- Comment -- CommentForm
组件之间的关系图为：
组件Comment
如上述的结构图，我们从最底层开始编写组件 Comment，这个组件需要做两件事情
接收上层组件 CommentList传递的数据，动态渲染虚拟DOM节点，则从 props中读取数据
//评论人{this.props.author}//评论的内容{this.props.children} 由于评论是支持MarkDown语法的，因此需要使用第三放库 marked对用户输入的内容进行处理。
var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 此外， 输出的内容要解析为HTML，而在默认情况下，基于预防XSS攻击的考虑，React对 输出的内容是不解析为HTML的。此时，需要利用到特殊的属性 dangerouslySetInnerHTML，要将内容放到一个对象的 _html属性中，然后将这个对象赋值给 dangerouslySetInnerHTML属性
var html = {_html:" 输出的html内容"}; var Comment = React.createClass({ rawMarkup : function() { var rawMarkup = marked(this.props.children.toString(),{sanitize:true}); return {_html : rawMarkup}; //React的规则，会读取这个对象的_html内容， }, render : function() { return (
{this.props.author}
查看更多关于学习React系列1-React-tutorial全解析_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did112427