JSX语法简介

JSX语法简介

下面的两个文件中,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标签

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/5203.html

发表评论

登录后才能评论