react-脚手架初始化项目

最新推荐文章于 2023-03-21 10:06:58 发布

前端小菜羊

最新推荐文章于 2023-03-21 10:06:58 发布

阅读量166

点赞数

文章标签： react.js

本文链接：https://blog.csdn.net/weixin_47124862/article/details/119906619

版权

全局安装

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app reactproject
cd reactproject

# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start

以上命令执行完成后，则自动打开： http://localhost:3000/

项目目录

删除目录中我们不需要用到的文件（public中只需保留html文件）

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

保留文件如下

├── package.json
├── public                  # 这个是webpack的配置的静态目录o
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
├── src
│   ├── App.js              # App组件代码
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
└── yarn.lock

index.html文件修改

1.删除上方已删除的引入文件
2.删除不必要的注释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js文件修改

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

app.js文件修改

function App() {
  return (
    <div>React 项目运行成功</div>
  )
}

export default App

最后对页面进行刷新

前端小菜羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-脚手架初始化项目

全局安装# 全局安装npm install -g create-react-app# 构建一个my-app的项目npx create-react-app reactprojectcd reactproject# 启动编译当前的React项目，并自动打开 http://localhost:3000/npm start以上命令执行完成后，则自动打开： http://localhost:3000/项目目录删除目录中我们不需要用到的文件（public中只需保留html文件）├── pack
复制链接

扫一扫