1.JSX的用法
function App(){let msg = 'react 的插值';return (<div>{msg}</div>
)
}jsx中也可以绑定属性，绑定属性时不能加引号
function App(){let url= 'https://baikebcs.bdimg.com/baike-react/common/logo-baike.svg';return (<div><img src={url} /></div>)
}jsx中也支持一些简单的js运算， 也支持条件运算符（react 的条件渲染方式之一
function App(){let count = 10;return (<div><p>{ 1 + 1}</p><h2>{count * 10}</h2></div>)
}jsx中也可以使用es6的模板字符串, 支持字符串拼接操作
function App(){let count = 10;let msg = '新的一年';return (<div><p>{`${count} hello`}</p> <p>{msg + '美妙人生'}</p> </div>)
}在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的：
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语法
function App(){let content;if (isLoggedIn) {content = <AdminPanel />;} else {content = <LoginForm />;}return (<div>{content}</div>);
}
如果你喜欢更为紧凑的代码，可以使用 条件 ? 运算符。与 if 不同的是，它工作于 JSX 内部：
function App(){return (<div>{isLoggedIn ? (<AdminPanel />) : (<LoginForm />)}</div>)
}当你不需要 else 分支时，你还可以使用 逻辑 && 语法：
function App(){let isLoggedIn = true;return (<div>{isLoggedIn && <AdminPanel />}</div>)
}3.react的列表渲染
React 中的列表渲染推荐使用的是数组的map() 方法; react中列表渲染也需要绑定key值；
对于列表中的每一个元素，你都应该传递一个字符串或者数字给 key，用于在其兄弟节点中唯一标识该元素。通常 key 来自你的数据，比如数据库中的 ID。如果你在后续插入、删除或重新排序这些项目，React 将依靠你提供的 key 来思考发生了什么。
使用 map() 函数将这个数组转换为 <标签名> 标签构成的html结构:
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()方法进行渲染
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>)
}