第3节——jsx 语法入门

一、什么是jsx

设想如下变量声明

const element = <h1>Hello, world!</h1>;

他既不是html也不是字符串，他是什么呢？它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

二、jsx基本语法

jsx可以直接当做变量的值

// 可以在变量后面直接跟html，但是注意不能换行
const jsx = <div></div>
      
// 如果想换行则可以加一个括号,注意只能有一个根元素
const jsx2 = (
  <div>
    <div>你好，jsx</div>
  </div>
)

// 在jsx中使用变量用 {} 括起来，里面就是我们在外部声明的变量
const hello = '你好'
const jsx3 = (
  <div>{hello}</div>
)


// 在jsx中做判断是否显示，一般用 三元运算
const is = true
const jsx5 = (
  <div>
    {is ? <div>你好，我显示了</div> : null}
    { is && <div>你好，我显示了</div> }
  </div>
)

三、React.createElement()

本部分知识点中，组件传值知识点暂未讲到。同学们可以学完组件传值后，在回来重新回顾一遍

React 并不强制要求使用 JSX。当你不想在构建环境中配置有关 JSX 编译时，不在 React 中使用 JSX 会更加方便。每个 JSX 元素只是调用 React.createElement(component, props, …children) 的语法糖。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

1、基本语法

React.createElement(组件或者标签名, 组件接收的参数, 子级) 

2、基本使用

使用jsx编写组件

class Hello extends React.Component {
  render() {
    return <div>Hello React</div>;
  }
}

不使用jsx编写

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello React`);
  }
}

传入组件

class Hello extends React.Component {
  render() {
    return <div>Hello React</div>;
  }
}

class Hello2 extends React.Component {
  render() {
    return React.createElement(Hello, null, null);
  }
}