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