一步一步写web之react实战（一）

react系列文章建立在你已经熟悉javascript、html、css、less、webpack、react语法等的基础上，这个熟悉是单个的教程都看过，但是没有系统的把它们串联起来。

下面开始我的尝试之旅（注：此篇与下一篇为盲目探索篇，从（三）开始正式实践）。

首先，假设你没有启动过项目，那么该怎么启动呢（盲人摸象，从文档入手）：先看react文档，打开文档入门教程下有几个大字JSFiddle，甭管他是什么，下面还有两行红字呢，点几下看看是什么。发现是两个供我们写代码实战工具，打开第一个，默认输出的是“hello world”，那就自己随便修改下吧，先加一行<p>你好啊</p>

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}
    <p>你好啊</p>
    </div>;
  }
});

点击左上角的运行，发现右边输出了“你好啊”，如下图。

一步一步写web之react实战（一）

很好，接着尝试,修改reactDOM.render()

ReactDOM.render(
  <Hello name="World" />,
  var change = document.getElementById('container');
  cahnge.style.backgroundColor="red";
);

再运行，发现不但没有显示，原来显示的内用也全没了！好奇怪！其实也不奇怪，react中的数据驱动有点特别，注重纯函数，在render中是不允许这种有修改值的操作的，以上是个人不全面的理解，以后对react理解更透彻了在来更新吧，反正记住这里不能乱来就是。

接下来，继续探索！还是规规矩矩用自己的编辑器吧，我依然用的webstorm。那么看文档吧，先看react官方文档，main.js写好后（甭管在哪写，自己建个文件做主目录，在里面加一个文件命名main.js就是），建好后要从终端进这个目录，用browserify或webpack运行npm install那行命令（进自己的目录后直接输这行就行，如果不会就自行学习终端命令的一些基础知识吧），发现报错提示找不到package.json文件找原因，发现我们的目录里真的没这个文件，那就往回看，这段代码上面文字写的是用webpack安装react dom和构建你的包，在向上也有在“通过npm使用react”几个大黑子下面有出现了一个词“webpack”，感觉挺厉害的样子，百度下看看是什么！找到它的官方文档WebPack中文指南。按照教程一步一步的来，发现里面有创建package.json文件的地方（配置文件那一小节），很好，这个文件算是解决了，既然来了索性就把webpack看完吧，反正也不多，发现内容不多，需要在实践中加深理解。

注意：后面输入的命令都是webpack 而不是webpack entry.js bundle.js。各种效果大家可自己运行对比。

按照webpack教程我们已经可以在页面显示内容，下面我们还想加入react，这才是最终目的。先把webpack的代码提交在进行下一步。此节完！

（附github链接：https://github.com/dwenb/reactLearning）

秒客网

一步一步写web之react实战（一）

相关文章