手写react主要文件的脚手架

最新推荐文章于 2024-04-30 13:48:38 发布

六加六呀

最新推荐文章于 2024-04-30 13:48:38 发布

阅读量71

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44761131/article/details/126127314

版权

public文件中的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react脚手架</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

//引入react核心库
import React from "react";
//引入reactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from "./App";
//渲染App到页面
ReactDOM.render(<App />, document.getElementById("root"));

App.js

//创建外壳组件

//第一种写法
// import React from "react";
// class App extends React.Component {
//   render() {
//     return <div>hello react</div>;
//   }
// }
// export default App;

//第二种写法  { Component }不是解构赋值 是分别暴露
import React, { Component } from "react";
//创建并暴露App组件
export default class App extends Component {
  render() {
    return <div>hello react11</div>;
  }
}