reactjs开发环境搭建

安装node.js

如果没有node.js安装包，点击下载node-v5.6.0-x64.msi

安装Git

如果没有git安装包，点击下载Git-1.9.5-preview20150319.exe

安装开发工具webstorm

如果没有webstorm，点击下载WebStorm11zh.rar.这个软件是收费英文软件，安装包里有破解和汉化说明，按照里面的步骤进行破解和汉化。

在webstorm中设置。这样你就可以有提示了，记得保存或应用你的设置哦。

更改你的chrome浏览器的配置。

安装js调试插件JetBrains,如果你没有安装，点击下载www.cnplugins.com_hmhgeddbohgjknpmjagkdomcpobmllji_2_0_7_.crx。

建立你的项目

比如我建立了一个学徒网的reactjsdemo,建立在了f:/项目/ReactDemo/xueto/,里面结构如下。

设置webstorm

在webstorm中设置当前项目的开发环境为jsx这样你就可以有提示了，记得保存或应用你的设置哦。

webstrom的部分快捷键：

调试            F5

文本格式化    Ctrl+Alt+F

注释JS与取消  Ctrl+/

安装react工具包，并对react进行实时编译

打开git Bash,使用命令来安装react tools.

npm install -g react-tools

使用cd命令切换到你的项目目录下，例如我的项目目录是f:/项目/ReactDemo/xueto/。

cd f:/项目/ReactDemo/xueto

这时你的git的当前文件夹会在项目目录下。

添加实时编译命令jsx --watch src/ js/这个命令的意思是说把src目录下的所有reactjs文件全部实时编译到js目录下。

jsx --watch src/ js/

编写项目

在项目中，添加对react.min.js的引用。如果你没有此文件，点击右键另存为下载react.min.js。

所有的react.js文件在src目录下编写，当你保存文件后，node会自动在js目录下生成一个相同文件名的js文件。在页面引用时，引用js下的文件。

方法

reactjs中提供了一些内部封装的方法。

createClass              function()                                 创建一个封装的组件 ，组件的名字首字母必须是大写

render                     function()                                 react中的核心方法，实现组件的内容。

map                        function(item,index)                  遍历数组

getDefaultProps       function()                                 设置默认属性

props                      object                                      属性

state                        object                                      状态

setState                   function(object)                         设置状态

getInitialState           function()                                  初始化状态

refs                         object                                       引用组件内的dom

componentWillMount function()                                  dom插入之前

componentDidMount  function()                                 dom插入之后

componentWillUpdate  function()                              dom更新前

componentDidUpdate  function()                              dom更新后

componentWillUnmount  function()                             dom删除之前

React中的注意事项

在双引号，单引号中插入变量时记得在{}前加上$,比如javascript:goAd_window('${item.TargetUrl}')

在return中的{}中写for循环时不能写for,会报错的，改用map方法。

在html代码中写class,for时需要改成className,htmlFor。

在html代码中写style时不能直接=""，要改成={},例如：

如果你想获取到input,checkbox,radio,select的value值记得用event.target.value或者refs.[yourdomname].value。

在html代码中不要写if else会编译不通过，可以通过三元式的方法。condition?dosomthing:other;

三人行工作室