React 创建组件的方式

其实src文件夹下的App.js就相当于是一个组件

image.png

组件写好后，通过export default 导出，然后在index.js引入渲染

image.png

我们可以写更多组件测一下

// react 组件新写法

function Demo(){
    return (
        <h1>DEMO test</h1>
    )
}
export default Demo;

// react 组件老写法
import React, {Component} from 'react';
class Demo extends Component {
    render(){
        return (
            <div>
                DEMO test
            </div>
        )
    }
}

export default Demo;

image.png
image.png

ReactDOM 是一个第三方模块，它有一个render方法，可以帮助我们把某一个组件挂载到DOM节点上。

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

index.js里还引入了 react模块，如果去掉，页面就会报错，这是因为渲染app组价的时候，使用的是jsx语法，如果在react项目中，使用了jsx语法，那么一定要在对应的文件里引入 react，否则无法编译这种语法。

image.png