快速创建一个 React 项目

环境搭建

  • 安装 nodejs

    在 nodejs 官方 https://nodejs.org/en/ 下载并安装

  • 安装create-react-app, 一个全局的命令行工具,用于简化并创建一个新的 react 项目

    npm install -g create-react-app
    

创建项目

create-react-app react-demo //创建项目

cd react-demo // 进入到新的工程目录下

默认生成的项目框架

|-node_modules             //包管理
|-public             //一般用于存放静态文件,打包时会被直接复制到输出目录(./buidle)
|-src               //项目源代码
  |  |-asserts         //用于存放静态资源,打包时会经过 webpack 处理
  |  |-components     //组件 存放 React 组件,一般是该项目公用的无状态组件
  |  |-containers          //页面视图
  |  |-routes         //路由 存放需要 connect model 的路由组件
  |  |-App.js         //入口文件
  |  |-index         //注册路由与服务
  |  |- serviceWorker        //开发配置
|-package.json      //包管理代码
|-.gitignore //Git忽略文件

本地测试

npm run start //启动本地server用于开发

在浏览器中打开 localhost://8080 查看

项目打包
 npm run build // 命令执行后, 会在工程根目录下生成 build 目录
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建一个React项目有几种方式可以选择。一种常用的方式是使用create-react-app脚手架快速搭建React项目。这个脚手架提供了一个简单的命令行工具,可以帮助你快速创建一个React项目的基本结构和配置。另一种方式是使用generator-react-webpack脚手架搭建React项目。你需要先安装yeoman和generator-react-webpack,然后通过命令行工具创建项目。还有一种方式是使用webpack一步一步构建React项目,这个方式需要自己手动配置webpack和其他相关的工具。其中,create-react-app脚手架是最常推荐的方式,因为它简化了项目的搭建过程并提供了很多有用的功能和工具。所以,如果你想创建一个React项目,我建议你使用create-react-app脚手架来快速搭建项目。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [如何创建一个 react 项目](https://blog.csdn.net/mChales_Liu/article/details/111318858)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [如何创建React项目](https://blog.csdn.net/hwx865/article/details/127300342)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值