手写react主要文件的脚手架

最新推荐文章于 2024-08-29 13:07:02 发布

六加六呀

最新推荐文章于 2024-08-29 13:07:02 发布

阅读量85

点赞数

文章标签： react.js javascript 前端

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

版权

这篇博客介绍了如何创建和运行一个基本的React应用。通过查看`index.html`、`index.js`和`App.js`的代码，我们可以看到React应用的基本结构。`index.html`作为应用的入口，`index.js`导入并渲染了`App`组件，而`App.js`定义了该组件。这是一个React新手入门的简单示例。

摘要由CSDN通过智能技术生成

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>;
  }
}