初识React,初识JSX

92 阅读1分钟

使用JSX写一个app组件挂载到首页上

声明一个App.js文件,里面写入

import React from "react";
const App =()=>{
    return (
        <div>app组件</div>
    )
}
export default App

在index.js里面使用App组件

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'
ReactDOM.render(<App/>,document.getElementById('root'))

使用结果

image.png

使用JSX的注意事项

1.注意className
<div className="red">n</div>
被转译为
React.createElement( 'div', {className:'red'l}, "n")
插入变量
1.标签里面的所有JS代码都要用抱起来
2.如果你需要变量n,那么就用把n包起来
3.如果你需要对象,那么就要用把对象包起来,如{ {name:'frank'} }
习惯return后面加()