1.JSX的用法

javascript">function App(){let msg = 'react 的插值';return (<div>{msg}</div> 
)
}

jsx中也可以绑定属性，绑定属性时不能加引号

javascript">function App(){let url= 'https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg';return (<div><img src={url} /></div>)
}

jsx中也支持一些简单的js运算， 也支持条件运算符（react 的条件渲染方式之一

javascript">function App(){let count = 10;return (<div><p>{ 1 + 1}</p><h2>{count * 10}</h2></div>)
}

jsx中也可以使用es6的模板字符串, 支持字符串拼接操作

javascript">function App(){let count = 10;let msg = '新的一年';return (<div><p>{`${count} hello`}</p>  <p>{msg + '美妙人生'}</p>        </div>)
}

在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的：

javascript">function App(){let count = 10;let ele ;// 变相的react的条件渲染if(count > 10){ele = (<h1>《哪吒2》</h2>)}else {ele = <p>《唐探1900》</p>}return (<div>{ele}</div>)
}

2.react的条件渲染

React 没有特殊的语法来编写条件语句，因此你使用的就是普通的 JavaScript 代码。例如使用 if 语句根据条件引入 JSX： if语句工作与JSX的外部， 即函数式组件的顶层作用域中， return 返回的模板就是jsx语法

javascript">function App(){let content;if (isLoggedIn) {content = <AdminPanel />;} else {content = <LoginForm />;}return (<div>{content}</div>);
}

如果你喜欢更为紧凑的代码，可以使用 条件 ? 运算符。与 if 不同的是，它工作于 JSX 内部：

javascript">function App(){return (<div>{isLoggedIn ? (<AdminPanel />) : (<LoginForm />)}</div>)
}

当你不需要 else 分支时，你还可以使用 逻辑 && 语法：

javascript">function App(){let isLoggedIn  = true;return (<div>{isLoggedIn && <AdminPanel />}</div>)
}

3.react的列表渲染

React 中的列表渲染推荐使用的是数组的map() 方法; react中列表渲染也需要绑定key值；

对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据，比如数据库中的 ID。如果你在后续插入、删除或重新排序这些项目，React 将依靠你提供的 key 来思考发生了什么。

使用 map() 函数将这个数组转换为 <标签名> 标签构成的html结构:

javascript">function App(){const products = [{ title: 'Cabbage', id: 1 },{ title: 'Garlic', id: 2 },{ title: 'Apple', id: 3 },];const listItems = products.map(product =><li key={product.id}>{product.title}</li>);   return (<ul>{listItems }</ul>) 
}

也可以直接在jsx中使用map()方法进行渲染

javascript">function App(){   const products = [{ title: 'Cabbage', id: 1 },{ title: 'Garlic', id: 2 },{ title: 'Apple', id: 3 },];return (<ul>{products.map(product =><li key={product.id}>{product.title}</li>);   }</ul>) 
}