如何运行别人的react项目

如何运行别人的react项目

1、从网上下载项目到本地,放在自己的工作空间中

2、下载好的项目缺少项目依赖环境,我们需要自己安装。

npm install

这个步骤将会新建该项目的node_modules文件夹,并将配置文件下的相关依赖下载到了本地。

3、查看项目的package.json文件,找到对应的npm运行命令,可以看到使用了webpack的微型服务器webpack-dev-server,因此需要在项目环境中安装webpack和webpack-dev-server

npm install webpack     
npm install webpack-dev-server    
npm install webpack-cli

安装完成以后,可以直接执行npm start,查看编译过程中,出现的错误。

【configuration.output.path: The provided value "./" is not an absolute path!】

出现这个错误,一般是webpack.config.json下的output路径出错,根据对应关系仔细查看自己的目录。

【The node API for babel has been moved to babel-core】

出现这个错误,说明你已经安装过了babel文件,并且将“babel”作为了loader的简写,并在配置文件中,进行了相关配置。

module: {
    rules: [ {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
         presets: ['es2015', 'react']
      }
   }]
}

这里babel包,已经在webpack1.x中已经移除了,你需要将配置文件中的babel写为“babel-loader”来替代它。这里一定要在该项目中,先安装babel-loader。

npm install babel-loader

然后更改配置文件中的loader。

module: {
    rules: [ {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
         presets: ['es2015', 'react']
      }
   }]
}

最后使用npm start,就可以运行起来了。

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

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

推荐文章
如何运行一个react项目?

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

如何访问已启动的react项目

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

如何用别人的css样式

如何用别人的css样式使用别人的css样式首先需要引入,引入到自己的HTML文档中,主要有两种方式。1、下载别人的css样式,通过link标签引入。打开网站,按下f12打开开发者工具面板,选中Sour

仿站复制的别人的css违法吗

仿站复制的别人的css违法吗通常来说仿站复制别人的css是不违法的,若css中存在具有版权的图片,则是属于侵权行为,需要更换为自己的图片或者是无版权的图片。仿站违法侵权范畴:页面完全一致,标题企业名称

cmd如何运行vue项目?

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

如何快速新建react项目?

创建一个react项目有三种方式:1.create-react-app快速脚手架(简单,类似于vue-cli工具)2.webpack一步一步构建3.第三方脚手架(generator-react-web

如何用vscode启动react项目

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

如何新建react项目

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

如何启动react项目

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

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

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

如何查看react项目端口?

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

怎么新建一个react项目

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

怎么从0搭建react项目

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

怎么编译react项目

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

前端实现excel导出和导入(react项目)

课程推荐:web全栈就业班--融职教育精品课程 最近公司有个新需求,需要前端导出规定模板的excel,导入的时候前端解析excel文件,数据处理一下传给后台,下面分享下纯前端实现excel的导出和导入

怎么删除创建的react应用

怎么删除创建的react应用创建的react项目会保存在一个文件夹里,整个文件夹就是一个react项目,我们只需要将文件夹删除,即可删除react项目。下面是具体的操作方法:●右键文件夹,移动到回收站

程序员必懂的Redis技术实战

课程推荐:前端开发工程师--学习猿地精品课程 Redis是现在很受欢迎的NoSQL数据库之一,目前广泛用于缓存系统、分布式锁、计数器、消息队列系统、排行榜、社交网络等场景中,本篇文章成哥为大家带来re

基于Tcp协议与基于Http协议的RPC简介笔记

前言:之前对于RPC方面的学习多限于对RMI原理的学习,直到今天在看陈康贤前辈的《大型分布式网站架构-设计与实践》这本书的时候,才发现原来RPC可以基于TCP协议也可以基于HTTP协议(这里所说的TC

你应该知道的RocketMQ

1.概述在很久之前写过一篇Kafka相关的文章,你需要知道的Kafka,那个时候在业务上更多的是使用的是Kafka,而现在换了公司之后,更多的使用的是Rocketmq,本篇文章会尽力全面的介绍Rock

SQL优化案例-定位系统中大量的rollback(十八)

系统中logfilesync比较严重,查看存储都没有问题,logfileparallelwrite很低,时间分布直方图也没问题数据库中提交和回滚操作比较频繁,每秒1000多次,rollback占比1/

一个被 CEO 逼疯的技术负责人的检讨书

作者:fingerQin来源:https://www.phpjieshuo.com/archives/139/以下是一封来自被CEO逼疯的技术负责人的检讨书。想火!!!自任开发部负责人一职以来,开发部

从艺术到数学再到编程,这个蚂蚁金服技术人的奇异人生

2020年已经到来,第一批90后互联网大军也步入了而立之年,回首他们的来时路,那些熬夜奋战的日夜,失败后的坚守,不断的创新与突破都成为他们送给自己最值得回味的礼物。第三次AI浪潮下,AI技术大军应用而

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

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

如何调试react native项目

如何调试reactnative项目调试reactnative项目有两种方式:1、模拟器调试;2、真机调试。一、模拟器调试我们在Android模拟器上按快捷键Command⌘+M,在iOS模拟器上按快捷

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w