react应用的方式一（npx create-react-app my-app）

随着前端技术的不断发展，项目的复杂性也在不断提高。为了能够高效地管理前端项目

   无论你用webpack、vue、react等构建一定要注意关键点，共通性
   1、本身都是node.js项目
   2、package.json是核心(包括package-lock.json)
   3、node_modules目录是项目依赖包，都是通过npm install <package-name> 安装上的
   项目都会经过一个开发、测试、编译、部署等全周期流程。然后各自都会有自己的一些开发特点。
   比如: webpack会有webpack.config.js文件
        vue会有 vue.config.js等

react应用的方式一（npx create-react-app my-app）
react应用的方式二(npm init react-app my-react-app)

一般有三种建立 react应用的方式

1.npx
npx create-react-app my-app
(npx 需要 npm 5.2+ 以及更高版本， 参阅 instructions for older npm versions)
2.npm
npm init react-app my-app
npm init <initializer> 命令在 npm 6+ 版本可用
3.Yarn
yarn create react-app my-app

前言:

React项目是基于React库构建的用户界面应用，采用组件化开发方式，旨在提高代码的可维护性和重用性。
React是一个用于构建用户界面的JavaScript库，主要用于开发单页应用（SPA）。它通过组件化的方式将复杂的用户界面拆分为多个独立、可复用的组件。每个组件都有自己的状态（State）和属性（Props），通过组合这些组件来构建完整的用户界面

Create React App（CRA）是Facebook 官方推出的一个方便快捷的 React 项目搭建工具，它封装了复杂的webpack、Babel 等构建工具配置,但随着时间的推移，它逐渐被更现代、更高效的构建工具所替代。React 官方在 2025 年正式弃用 Create React App，推荐使用社区中流行的 React 框架来创建新项目。这些框架如 Next.js、Remix、Gatsby、Expo 和 Vite，提供了更灵活和高效的开发体验。
github 地址: https://github.com/facebook/create-react-app

npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具。它可以帮助我们在不全局安装某些包的情况下，直接运行该包提供的命令行工具。
npx会在执行时，检查本地项目中是否安装了对应的依赖，如果没有安装则会自动下载安装，并执行命令。

一、下面演示利用 npx create-react-app <项目名> 来创建react项目

1、查看npx版本

查看npm和npx版本

D:\nodevue\my-app>npm -v
11.6.2

D:\nodevue\my-app>npx -v
11.6.2

2、创建流程:

1.npx create-react-app my-react-app 
2.cd my-react-app  
3.npm start  (启动项目)

3、实例：
1)执行创建命令

D:\nodevue>npx create-react-app my-react-app
Creating a new React app in D:\nodevue\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

..... 中间略

Inside that directory, you can run several commands:
  npm start
    开始启动开发服务器
  npm run build
    编译静态文件
  npm test
    测试
  npm run eject
    这个将进行删除操作，不能回滚

2)默认创建出的package.json配置文件
项目本质上还是node.js项目，而`package.json` 文件是Node.js项目的核心配置文件，package.json文件内容如下:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^19.2.1",
    "react-dom": "^19.2.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",  //npm run start ,需要进入本项目目录执行，start你可以改成其他名称
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

react-scripts是一个包,被安装在D:\nodevue\my-react-app\node_modules下
start、build、eject、test等都会在 D:\nodevue\my-react-app\node_modules\react-scripts\bin\react-scripts.js 进行处理
下面是 D:\nodevue\my-react-app\node_modules\react-scripts\bin\react-scripts.js 文件内容

#!/usr/bin/env node
'use strict';
process.on('unhandledRejection', err => {
  throw err;
});
const spawn = require('react-dev-utils/crossSpawn');
const args = process.argv.slice(2);
const scriptIndex = args.findIndex(x => x === 'build' || x === 'eject' || x === 'start' || x === 'test');
const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
/*
      package.json设置的:
     "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts builds",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
    script变量值为:
    1.start
    2.test
    3.eject
    4.build
     
    每个命令会对应
    D:\nodevue\my-react-app\node_modules\react-scripts\scripts 目录下
    1.start.js (负责启动开发服务器)
    2.test.js 
    3.eject.js
    4.build.js
*/
const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
if (['build', 'eject', 'start', 'test'].includes(script)) {
  const result = spawn.sync(
    process.execPath,
    nodeArgs
      .concat(require.resolve('../scripts/' + script))
      .concat(args.slice(scriptIndex + 1)),
    { stdio: 'inherit' }
  );
  if (result.signal) {
    if (result.signal === 'SIGKILL') {
      console.log(
        'The build failed because the process exited too early. ' +
          'This probably means the system ran out of memory or someone called ' +
          '`kill -9` on the process.'
      );
    } else if (result.signal === 'SIGTERM') {
      console.log(
        'The build failed because the process exited too early. ' +
          'Someone might have called `kill` or `killall`, or the system could ' +
          'be shutting down.'
      );
    }
    process.exit(1);
  }
  process.exit(result.status);
} else {
  console.log('Unknown command "' + script + '".');
  console.log('Perhaps you need to update react-scripts?');
  console.log(
    'See: https://facebook.github.io/create-react-app/docs/updating-to-new-releases'
  );
}

3)项目生成目录

├── README.md
├── node_modules   #npm install <package-name> 安装的项目包不全局不可见，类似虚拟环境
├── package.json   #核心文件
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js   #入口文件
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

4) 在项目根目录目下，执行 npm run build 会产生 build这个编译目录

D:\nodevue\my-react-app>npm run build
> my-react-app@0.1.0 build
> react-scripts build
(node:40892) [DEP0176] DeprecationWarning: fs.F_OK is deprecated, use fs.constants.F_OK instead
(Use `node --trace-deprecation ...` to show where the warning was created)
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
  61.01 kB  build\static\js\main.ececa8e2.js
  1.76 kB   build\static\js\453.311b3dbc.chunk.js
  513 B     build\static\css\main.f855e6bc.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
  serve -s build
Find out more about deployment here:
  https://cra.link/deployment

5)本地部署访问
如果你不知道serve是什么包，可以到
https://www.npmjs.com/package/serve
github地址: https://github.com/vercel/serve

D:\nodevue\my-react-app>npm install -g serve
added 86 packages in 6s
25 packages are looking for funding
  run `npm fund` for details

D:\nodevue\my-react-app>serve -s build -l 3000

┌────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:3000 │
│ - Network: http://26.26.26.1:3000 │
│ │
│ Copied local address to clipboard! │
│ │
└────────────────────────────────────────┘

6）生产部署
一般上传放在nginx的静态目录下，提高并发。云上一般都是前端会有lsb, 指向多个nginx ，那些繁杂的node.js环境、webpack等这些东西就不用了，毕竟都是js的东西，而node.js是c++开发的，内置了v8 javascript引擎，就像浏览器内置了javascript引擎一样。
如果感兴趣了可以看下 mozilla firefox 的历史点击下载pdf 这个是多年以前就看到的，现在还在

这个小狐狸还是挺有意思的

二、为什么使用npx
npx 的主要功能就是帮助我们快速运行一些通过 npm 安装的工具，而不需要我们手动去下载安装这些工具到全局环境。
npm 是 Node.js 的包管理工具，我们编写了一些通用的工具，就可以将其发布为一个 npm 包，这样所有具备 Node.js 的环境都可以下载并且运行这个包。
而npx 直接就可以运行这些npm包。

参考:
  https://www.npmjs.com/package/simple-test-package (npm packcage)
  https://juejin.cn/post/7081581923960619015
  https://www.cnblogs.com/bq-med/articles/18537399
  https://create-react-app.dev/docs/updating-to-new-releases/
  https://www.mozillazine.org/articles/article2278.html

posted @ 2025-12-04 15:24 jinzi 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部