react学习笔记01

react特点

1. jsx 是js+xml
2. 组件 通过构建组件使代码得到复用
3. 单向响应的数据流 比传统的数据绑定简单
4. hooks 函数式编程

书写第一个例子hello，world

function HelloWorld(){
    return <h1>hello,world</h1>
}

jsx

jsx是javascript的一种语法扩展

优点：

• 执行更快，因为它在编译成javascript后进行了优化
• 类型安全，在编译过程中就能发现
• 编写模版更简单快速

表达式

在jsx不能使用if else语句，可以使用三元表达式来替代。

let i=1;
const ReactDom.createRoot(document.getElementById('root'));
root.render(
    <div>{i==1?"true":"false"}</div>
)

样式

const myStyle = {
    fontSize:100,
    color:'red'
}

注释 在{}中如下：

const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<div>
   {/*注释...*/}
</div)

数组 jsx允许在模板中数组，数组会自动展开所有成员

const arr = [
    <h1>h1</h1>
    <h2>h2</h2>
]
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(
    <div>{arr}</div>
)