创建 React 项目

依次输入命令:

npm install -g create-react-app
create-react-app react16

cd my-app
npm start

在浏览器中输入 local:3000 即可查看项目运行效果:

* 使用 create-react-app 创建项目成功在命令行中有提示信息如下,分别给出了项目启动、打包、测试和弹出配置文件的命令:

Success! Created react16 at /Users/wangxi/.Trash/react16/react16
Inside that directory, you can run several commands:
  yarn start
    Starts the development server.
  yarn build
    Bundles the app into static files for production.
  yarn test
    Starts the test runner.
  yarn 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 react16
  yarn start
Happy hacking!

 

参考: Creating a New Application

转载于:https://www.cnblogs.com/wx1993/p/6054902.html

### 使用 npm 创建 React 项目的教程 要通过 `npm` 创建一个 React 项目,可以按照以下方法操作: #### 方法一:使用 `create-react-app` 这是官方推荐的方式之一。它提供了一个无需配置的环境来快速搭建 React 应用。 1. **检查 Node.js 和 npm 的版本** 需要确保本地已安装 Node.js 并且其版本不低于 8.16,以及 npm 不低于 5.2。可以通过以下命令验证: ```bash node -v npm -v ``` 2. **全局安装 `create-react-app`(可选)** 如果当前使用的 Node 或 npm 版本较低,则需要先全局安装 `create-react-app` 工具[^1]。 ```bash npm install -g create-react-app ``` 3. **初始化 React 项目** 执行以下命令以创建一个新的 React 项目,命名为 `my-app`: ```bash npx create-react-app my-app ``` 此处使用了 `npx` 命令,它可以临时运行包中的二进制文件而不需要提前全局安装工具[^2]。 4. **进入项目目录并启动开发服务器** 完成上述步骤后,切换到新创建项目目录,并启动内置的开发服务器: ```bash cd my-app npm start ``` --- #### 方法二:手动设置 React 环境 对于更高级的需求或者希望自定义配置的情况,可以选择手动方式创建 React 项目。 1. **新建项目文件夹并初始化 npm** 创建一个新的文件夹作为项目根目录,并执行以下命令完成基础依赖项的初始化: ```bash mkdir manual-react-project && cd manual-react-project npm init -y ``` 2. **安装核心依赖库** 添加必要的 React 及相关组件至项目中: ```bash npm install --save react@^17.0.0 react-dom@^17.0.0 ``` (注意这里可以根据需求调整具体的 React 版本号) 3. **引入 Webpack/Babel 等构建工具**(视情况决定) 若想进一步增强功能支持 JSX 脚本解析等功能,则需额外集成这些工具链[^3]。 4. **编写入口 HTML 文件与 JavaScript 源码** 最后还需自行设计页面结构及逻辑实现部分,在此不再赘述具体细节过程。 --- 以上便是利用 npm 构建标准版或定制化风格各异类型的 React 开发框架实例介绍完毕!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值