react 0至1 【jsx】
1.函数调用
// 项目的根组件
// App -> index.js -> public/index.html(root)const count = 100function getName () {return 'test'
}function App () {return (<div className="App">this is App{/* 使用引号传递字符串 */}{'this is message'}{/* 识别js变量 */}{count}{/* 函数调用 */}{getName()}{/* 方法调用 */}{new Date().getDate()}{/* 使用js对象 */}<div style={{ color: 'red' }}>this is div</div></div>)
}export default App2.列表渲染
const list = [{ id: 1001, name: 'Vue' },{ id: 1002, name: 'React' },{ id: 1003, name: 'Angular' }
]function App () {return (<div className="App">this is App{/* 渲染列表 */}{/* map 循环哪个结构 return结构 */}{/* 注意事项：加上一个独一无二的key 字符串或者number id */}{/* key的作用：React框架内部使用 提升更新性能的 */}<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default App3.条件渲染
const isLogin = truefunction App () {return (<div className="App">{/* 逻辑与 && */}{isLogin && <span>this is span</span>}{/* 三元运算 */}{isLogin ? <span>jack</span> : <span>loading...</span>}</div>)
}export default App// 定义类型
const articleType = 3 // 0 1 3// 定义核心函数（根据类型返回不同的JSX模版）function getArticleTem () {if (articleType === 0) {return <div>文章1</div>} else if (articleType === 1) {return <div>文章2</div>} else {return <div>文章3</div>}
}function App () {return (<div className="App">{/* 调用函数渲染不同的模版 */}{getArticleTem()}</div>)
}export default App
4.事件绑定
function App () {// 基础绑定const handleClick = () => {console.log('button被点击了')}// 事件参数e// const handleClick = (e) => {// console.log('button被点击了', e)// }// 传递自定义参数const handleClick = (name) => {console.log('button被点击了', name)}// 既要传递自定义参数 而且还要事件对象econst handleClick = (name, e) => {console.log('button被点击了', name, e)}return (<div className="App"><button onClick={(e) => handleClick('jack', e)}>click me </button></div>)
}export default App