React入门

一、参考的网址：

React教程|菜鸟教程

React

由于英文水平有限，主要参考第一个网址的教程进行入门。

二、前期准备

在本机上安装并配置node.js，熟悉node.js得到基本使用模式。

可以 参考：node.js安装配置

当然，JAVA方向的日常开发通常不会用到node.js，没兴趣的话，可以跳过这一步。

如果使用菜鸟教程进行React的入门学习，建议先熟悉ES6 的语法，这样可以更方便的理解提供的案例。

二、React的安装

要使用React，只需要在页面中引入：

react.min.js 、react-dom.min.js 和 babel.min.js三个类库即可。

可以在官网 https://reactjs.org/ 下载最新版，并直接引入到项目中。

其中，react.min.js是React的核心类库，react-dom.min.js用于与DOM的交互，babel.min.js用于将ES6转为ES6、并内嵌了对JSX的支持。

需要注意的是：如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

三、React元素渲染

元素是React的最小单元，用于描述显示在页面上的内容。

通常，我们会在页面上定义一个指定id的根节点，然后使用ReactDOM.render()方法，将元素渲染到页面中。

如：

设置根节点如下：

<div id = "example" ></div>

定义一个元素element，并将其渲染到这个根节点中：

var element = <p>这里是希望渲染到元素中的内容</p>;
ReactDOM.render(
    element,
    document.getElementById("example")
);

注意，元素一旦渲染到根节点当中去，目前无法动态的变更改元素中的内容，如果需要改变页面徐然的效果，只能定义一个新的元素，并重新调用一次ReactDOM.render方法，将这个新的元素重新渲染到同一根节点当中去。

此外，值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

四、React JXS

React中，可以使用JXS代替js，这是一种形式上类似于HTML的语法，并且，类似于JavaScript，他可以写在一个单独的js文件中，供页面进行引用。当然，在React中，并不强制要求使用JXS。

上文用到的ReactDOM.render()，就是一个JXS表达式。

1、使用js表达式

在JXS中，仍然可以使用js表达式，将需要用到的js表达式写在花括号{}中即可。

如：

ReactDOM.render(
    <h1>括号中是一个js表达式{1+1}</h1>,
    document.getElementById("example")
);

注意，定义的元素和document.getElementById()渲染语句之间，一定要以逗号隔开。否则语句将不生效。

 另外，JXS中，不支持if else的表达式，而应当用三目运算符（?:）代替

如：

ReactDOM.render(

    <h1>{1==2?'yes':'no'}</h1>,
    document.getElementById('example')

);

2、使用内联样式

在JSX中，可以设置元素的样式。通常，使用内联样式来实现。

如：

var myStyle = {
    color: 'red',
    fontSize : 20
};

ReactDOM.render(
    <h1 style = {myStyle}>使用花括号引入样式</h1>,
	document.getElemen