上一篇文章我们介绍了 React的使用，并在通过了解create-react-app生成的目录结构后写了自己的第一个React程序。这一次我们讲系统讲解一下React的基础内容。
JSX
const element = <h1>Hello, world!</h1> 这个既不是字符串也不是HTML，这个就是JSX的语法，注意在使用JSX语法的时候一定要先引入 React，也就是 import react from 'react'。
- 嵌入表达式
在jsx中的表达式必须要用大括号括起来，这样react才会解析你的表达式。而且在大括号中我们还可以写方法调用，计算等。const name = 'Jeff'; const el = <h1>Hello, { name }</h1>;function formatName(user) { return user.firstName + ' ' + user.lastName } const user = { firstName: 'Jeff', lastName: 'Wang' } cosnt el = <h1>Hello, { formatName(user) }</h1> - 在for循环或if判断中使用JSX
// if 判断中使用jsx function getGreeting(user) { if (user) { return <h1>Hello, { formatName(user) }!</h1> } else { return <h1>Hello, Stranger.</h1> } } // for 循环使用 const list = [ { id: 1, title: 'this is news 1' }, { id: 2, title: 'this is news 2' } ] const listEl = list.map((v, i) => ( <li key={v.id}>{v.title}</li> )) // 注意上面箭头函数后面我跟了一个 ()，它等价于 => {return <li key={v.id}>{v.title}</li> }
使用注意点
- jsx中有的html属性需要大写，例如 class需要写成className，click 需要写成onClick等，并且每一项都是驼峰命名，如果你写成tabindex是不生效的。
- jsx 自动做了防止注入攻击，如果你像输出一个带html标签的内容，需要写成如下格式
<h1 dangerouslySetInnerHTML={{__html: 'cc © 2015'}}></h1>这样就可以完整输出你的内容。 - 标签闭合，假如你只是一个子元素 可以直接写成
<InputBox /> - jsx 是一个对象，js中使用需要利用babel转成js对象，例如：
const element = ( <h1 className="greeting"> Hello, world! </h1> ); // 上面的jsx 等价于 const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); // 也等价于 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world' } };
今天我们就学这么多内容，有什么问题可在留言去留言，有 不足指出请大家指出。
