【React】如何创建React项目 -- 手动和自动

前言

最近在学React，怕自己老奶奶记性，一过就忘，就写了放这了。
手动创建的也有，命令行自动创建的也有。

给俩有用的链接，可以import，也可以下载了放src里

• react.development.js

https://unpkg.com/react@18.0.0/umd/react.development.js

• react.dom.development.js

https://unpkg.com/react@18.0.0/umd/react-dom.development.js

一、手动创建React项目

项目初始结构如下：

根目录
    - public
        - index.html （添加标签 <div id="root"></div>）
    - src
        - App.js
        - index.js

1.进入项目目录，执行命令：

npm install -y 或 yarn init -y

2.安装项目依赖：

npm install react react-dom react-script -S 或  yarn add react react-dom react-scripts

3.启动项目:

npx react-scripts start

或者

将react-scripts start设置到package.json的scripts选项中，然后通过npm start启动

"script":{"start":"react-scripts start"}

二、自动创建React项目

1.首先要保证安装了react，-g是全局安装

npm install -g create-react-app

2、cmd打开你想要创建项目的文件，输入以下命令，proj-by-auto 是项目名称，可自己更改

$ npx create-react-app proj-by-auto  

D:\react_project>npx create-react-app proj-by-auto           

Creating a new React app in D:\react_project\proj-by-auto.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1480 packages in 44s

261 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at tryGitInit (D:\react_project\proj-by-auto\node_modules\react-scripts\scripts\init.js:46:5)
    at module.exports (D:\react_project\proj-by-auto\node_modules\react-scripts\scripts\init.js:276:7)
    at [eval]:3:14
    at runScriptInThisContext (node:internal/vm:143:10)
    at node:internal/process/execution:100:14
    at [eval]-wrapper:6:24
    at runScript (node:internal/process/execution:83:62) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 25496,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...

added 63 packages, and changed 1 package in 9s

261 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package in 4s

261 packages are looking for funding
  run `npm fund` for details

Success! Created proj-by-auto at D:\react_project\proj-by-auto
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd proj-by-auto
  npm start

Happy hacking!