如何快速新建react项目?

创建一个react项目有三种方式:

1. create-react-app 快速脚手架(简单,类似于 vue-cli 工具)

2. webpack一步一步构建

3. 第三方脚手架(generator-react-webpack,需要yeoman的支持)

这里主要介绍利用 create-react-app 快速脚手架 创建一个react项目:

注意:create-react-app 要求node版本至少在 8.0.0 及以上,如果您的node版本较低,请先更新: 使用 n模块 更新node

node更新后可能会导致以前的项目跑不起来哦,如有这种情况发生,更新或者重装一下依赖 即可解决

(1)npm install -g create-react-app 全局安装

(2)create-react-app 项目名称 新建并对react项目进行命名(注:项目名称不能有大写)==>> 请先进入到项目要存放的位置

(3)cd 项目名称 通过命令进入文件夹内部,准备运行项目

(4)npm start 运行项目

为了提高速度,最好使用 cnpm 或者 yarn 哦!

1.png

运行 npm start 命令,启动开发服务器后,在地址栏中输入 http://localhost:3000/ 就能看到我们的项目了。(项目会自动打开,默认端口是3000,并自带热更新),命令运行成功效果如下:

2.png

项目打开后的效果:

3.png

注意:

create-react-app 快速脚手架搭建的项目,其默认配置文件都是隐藏的,如果要自定义,运行npm run eject。

单向操作不可逆,npm run eject命令暴露项目的配置,可以自由配置项目所需的依赖,不使用的版本零配置即可开发。

create-react-app刚生产项目后的package.json和目录结构如下:

4.png

5.png

运行npm run eject命令后的package.json和目录结构如下:

6.png

7.png

8.png

Image placeholder
前端答疑
未设置
  62人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何新建react项目

如何新建react项目前文中,我们介绍过了2种react项目的搭建方式,分别是webpack的方式搭建和create-react-app脚手架的方式搭建感兴趣的同学可以点击下方链接,进行学习。webp

怎么从0搭建react项目

怎么从0搭建react项目一、浏览器中通过标签直接引入React框架有两个核心的包,分别是react以及react-dom,如何想直接在浏览器中使用React,那么把这两个包直接引入就可以了。 如

如何运行一个react项目?

React起源于Facebook的内部项目,因为该公司对市场上所有JavaScriptMVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在20

怎么新建一个react项目

怎么新建一个react项目现在比较流行和常用的方式就是利用create-react-app脚手架来帮我们搭建一个初始的react项目,准备工作安装node环境,这个去百度搜索下node安装,在命令行中

Spring boot 如何快速的配置多个 Redis 数据源

Redis简介 redis多数据源主要的运用场景是在需要使用多个redis服务器或者使用多个redis库,本文采用的是fastdep依赖集成框架,快速集成Redis多数据源并集成lettuce连接池,

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何运行别人的react项目

如何运行别人的react项目1、从网上下载项目到本地,放在自己的工作空间中2、下载好的项目缺少项目依赖环境,我们需要自己安装。npminstall这个步骤将会新建该项目的node_modules文件夹

如何启动react项目

如何启动react项目1、首先打开命令提示符工具开始——菜单——运行——cmd2、然后使用cd命令进入项目目录cdmy-app3、接着运行npmstart即可注:如果项目目录中没有node_modul

如何将react项目部署到服务器

如何将react项目部署到服务器前提要求:●nodejs环境●一个react项目●一个服务器(本地也行)1、首先打开项目目录,按下shift+右键,打开命令提示符,输入打包命令npmrunbuild2

如何访问已启动的react项目

如何访问已启动的react项目1、运行react项目都会开启一个终端窗口,只需要打开窗口,查看项目的运行地址即可。上面这个项目的地址是http://localhost:3000/,打开浏览器输入这个地

如何查看react项目端口?

如何查看react项目端口?react项目端口默认是3000,定义在node_modules\react-scripts\bin\react-scripts.js文件中,可以通过文本编辑器打开它,搜索

复杂异常检测如何快速落地?看看百度怎么做

作者简介:周伟  百度云高级研发工程师负责百度云智能运维(Noah)告警通告系统的设计和研发,在大规模分布式系统、运维监控、精准报警等方面具有广泛的实践经验。干货概览本文提到的异常检测(Anomaly

怎么编译react项目

怎么编译react项目使用create-react-app脚手架搭建的react项目,只需要使用npmrunbuild命令就可以编译项目了,代码会被编译到build目录中。一、create-react

cordova如何打包vue项目?

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。据我现在的了解打包Vue项目目前流行的就是使用weex和cordova。weex是阿

eclipse如何导入vue项目?

eclipse导入vue项目的方法1、首先,我们需要去导入的项目根目录下看一下,是否包含.project和.classpath文件,我这里是没有这两个文件的。这里要注意显示文件夹下的隐藏文件。2、由于

cmd如何运行vue项目?

1、打开cmd命令窗口使用组合键【win+r】打开运行窗口,输入cmd,进入cmd命令窗口。2、将目录切换到vue项目下3、使用npmrundev命令然后在浏览器中输入网址http://localho

apicloud如何打包vue项目?

apicloud如何打包vue项目?APICloud新建项目后,会生成以下目录结构其中index.html是入口文件,而vue-cli打包生成的文件是在dist目录下├─dist │└─static

怎么打包node项目?

怎么打包node项目?可以使用JXcore打包nodejs项目:JXcore是一个支持多线程的Node.js发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。下载JXcor

nodejs怎么运行项目?

nodejs怎么运行项目?想要运行nodeJS项目,只需要安装好node的环境就可以了,不需要其他的配置。使用cmd命令,打开window窗口,输入node-v,如果运行的结果是nodeJS的一个版本

dreamweaver怎么新建css?

dreamweaver怎么新建css?1、新建一个htlm文档,在body中插入一个div,将ID命名为main2、在右侧的CSS设计器点击源的加号,选择在页面中定义3、点击选择器的加号,输入#mai

Git教程_3.2 Git 分支 - 分支的新建与合并

分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流。你将经历如下步骤: 开发某个网站。 为实现某个新的需求,创建一个分支。 在这个分支上开展工作。

写SERVLET再重启tomcat 后台模板放在新建的manage

写SERVLET再重启tomcat后台模板放在新建的manage

怎样新建css文件?

怎样新建css文件?css文件就是一个普通的文本文件,只是后缀名是.css。在windows操作系统下,文本文件命名为.txt,我们右键桌面——新建——文本文件,然后右键文本文件——重命名,将后缀名改

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD