React初探 – JSX与渲染DOM

JSX是为React.createElement(component, props, ...children)方法提供的语法糖.

元素是构成React应用的最小单位，JSX 就是用来声明 React 当中的元素。

下方不是字符串也不是 html，就是 js 语句（jsx语法），一些js中的标识符像 class 和 for 就不好作为标签的属性名，React DOM 使用 className 和 htmlFor 来代替对应的属性。

const ele = <p className='teststyle'>Hello, world!</p>;

这里声明了ele元素，在React中这个元素是一个对象 ，
它有
1.标签名属性，值为：p
2.元素属性，因为元素可能有多个属性，这里以对象表示：{ className: 'teststyle' }
3.内容属性，值为：Hello, world!

相当于 ：

React.createElement("p",{className: 'teststyle'},"Hello, world!");

将虚拟dom渲染为dom

使用ReactDOM的render方法，第一个参数是 使用jsx声明的 react 元素实例，可以嵌套，相当于是html模板，第二个参数是插入该模板的目标位置。

html:

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

javascript:

let test = <div><h1>标题</h1><p>内容</p></div>;

    ReactDOM.render(
        test,
        document.getElementById('example')
    );

这样就可以将jsx声明的元素在真实的dom元素(id为example的div元素)内渲染出来了

插值表达式

和vue 、angular 不同的是 react 的插值表达式是单括号的：{}

const ele = <h1>{i == 1 ? 'i是1' : 'i不是是1'}</h1>

数组

数组会自动展开：

    var arr = [
        <li>这是数组中的第0项</li>,
        <li>这是数组中的第1项</li>,
    ];


    ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('test')
    );

效果:

<div id="test">
    <div><li>这是数组中的第0项</li><li>这是数组中的第1项</li></div>
</div>

样式

使用驼峰命名法定义样式

var myStyle = {
    fontSize: 100,
    color: 'red'
};
ReactDOM.render(
    <h1 style = {myStyle}>标题</h1>,
    document.getElementById('example')
);