JSX语法简介

匿名用户

3 年 ago

下面的两个文件中，index.js中使用到了标签形式的代码块，App.js为一个组件具体显示内容是由render函数返回的结果决定的，这里面我们返回了一个div标签。

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

//App.js

function App() {
  return (
    <div className="App">
      Fuck the world!
    </div>
  );
}

export default App;

以前我们写div的时候，一般都是在html文件中写的，但是我们现在在js中写了div，在React当中，我们js中写的标签，我们称为JSX语法。

jsx和js语法有一些区别，最直观的感受：

js当中我们会这样：'<div>hello world</div>’
jsx当中我们不需要加单引号或者双引号，我们可以直接这样： <div>hello world</div>

JSX当中我们不仅可以使用html标签，我们还可以使用我们自定的组件标签，例如index.js中的<App />

有一点需要注意的是：JSX中使用组件必须以大写开头。

因此我们可以总结：

大写开头的标签一般就是组件
小写开头的标签一般就是h5标签