创建React项目

1. create-react-app 项目名称

2.关键文件夹：public 和 src

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>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
<style>
  *{
    padding: 0;
    margin: 0;
  }
</style>
</html>
复制代码

src中编写index.js 和 App.js

index.js文件：

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

App.js文件：

复制代码
import React from 'react'
import './App.css'
import Header from "./compontents/Header/Header"  //外部引入的组件

class App extends React.Component {
  render() {
    return (
      <div>
          <Header />   //引入的组件
      </div>
    )
  }
}
export default App;
复制代码

以上就是react基本文件代码

posted @   无何不可88  阅读(342)  评论(0)  编辑  收藏  举报
相关博文：
·  React 引入本地静态文件或图片
·  React中如何使用ref
·  react学习笔记
·  创建React项目并配置webpack
·  React学习笔记03-编写第一个react应用程序
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示