一. JSX

1

const element = <H1>Hello World!</H1>

上面这种看起来很像XML 和HTML的语法标签被称为JSX，是一个JavaScript语法的扩展

那么JSX有哪些用处？

1
2


const name = 'marunrun';
const element = <H1>Hello，{name}</H1>

在JSX语法中，我们可以在大括号{} 中使用表达式。包括使用变量，调用函数

1
2
3
4


const title = alert(1);

// 安全的使用
const element = <H1>{title}</H1>;

二. 组件与props

定义一个组件最简单的方法就是定义一个函数，并返回一个React元素，这种被称为“函数组件”

1
2
3


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

当然你也可以使用