主流 React 框架的项目创建

最新推荐文章于 2025-11-03 17:11:08 发布

原创最新推荐文章于 2025-11-03 17:11:08 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

这篇博客介绍了如何使用create-react-app工具快速初始化一个React项目。全局或局部安装后，通过运行命令创建项目，安装过程包括react、react-dom和react-scripts。项目创建成功后，目录结构包括README、node_modules、package.json等文件。启动项目，运行`npm start`，即可开始React应用的开发。博客还提到了项目目录中的关键文件夹和文件的作用。

React

1.create-react-app

全局安装create-react-app ---(可以使用但并不是一定):

$ npm install -g create-react-app

全局安装创建一个项目:

$ create-react-app your-app 注意命名方式，不要出现项目名称为驼峰式

Creating a new React app in /dir/your-app.

Installing packages. This might take a couple of minutes. 安装过程较慢，
Installing react, react-dom, and react-scripts...

如果不想全局安装，可以直接使用npx

$ npx create-react-app react-baisc （项目文件名）也可以实现相同的效果

这需要等待一段时间，这个过程实际上会安装三个东西

react: react的顶级库
react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom,以前react-dom模块是包含在react模块中的
react-scripts: 包含运行和打包react应用程序的所有脚本及配置

出现下面的界面，表示创建项目成功:

uccess! Created react-basic at /Users/wudaxun/Desktop/workspace/code/bk2119/code/week5/day03/react-basic
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 react-basic
  npm start

Happy hacking!

根据上面的提示，通过cd react-baisc命令进入目录并运行yarn start即可运行项目。

生成项目的目录结构如下：

├── README.md							使用方法的文档
├── node_modules					所有的依赖安装的目录
├── package-lock.json			锁定安装时的包的版本号,保证团队的依赖能保证一致。与yarn.lock二者出现其一
├── package.json					
├── public								静态公共目录
└── src										开发用的源代码目录
└── yarn.lock							锁住项目的依赖的版本号