node,webpack这些就不一一介绍怎么安装了,默认大家都知道。

一、npm install -g create-react-app

首先全局安装react的脚手架工具 create-react-app

上面提示,npm有新版本了,哎,先不管。

二、新建一个react项目

哦吼,华丽地报错了,先不要慌,我们看到报错信息是 cb() never called!  This is an error with npm itself.

好吧,大概知道了是npm的问题,应该是版本问题?那么,来更新一下咯:

嗯哼,还是报错?那就百度一下吧。百度的结果是:

①npm cache clean -f (清除npm缓存)

npm install -g n (安装最新版node helper)

WTF?

③npm install -g n --force(安装最新版node:stable)

④npm install

重新安装npm好了之后,继续重新新建react项目

看来包还挺多的。

三、npm start

露,总是曲折的,这里又报错了,是webpack版本的问题,话说我已经大半年没更新电脑上的node、webpack、npm的版本了,正好趁这个机会,全部更新一次。

其实报错信息下面,还提出了解决方案(7 steps):

说了那么多,就是要你重新装依赖。

其后,我装了yarn、并且npm run eject(参考博客:https://blog.csdn.net/nideshijian/article/details/87279597

之后,删除了项目下的,node_modules,再次npm install   ------>  npm start;

四、目录结构

至于如何开发,目前看上去,和vue的结构还是有一些区别的,所以,有待后期继续学习。

从头搭建一个React应用的更多相关文章

  1. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  2. 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)

    背景 ​ 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...

  3. 【webpack系列】从零搭建 webpack4+react 脚手架(一)

    搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对web ...

  4. 从头开始搭建一个dubbo+zookeeper平台

    本篇主要是来分享从头开始搭建一个dubbo+zookeeper平台的过程,其中会简要介绍下dubbo服务的作用. 首先,看下一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多之后 ...

  5. 从头开始搭建一个Spring boot+RabbitMQ环境

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  6. 使用React全家桶搭建一个后台管理系统

    引子 学生时代为了掌握某个知识点会不断地做习题,做总结,步入岗位之后何尝不是一样呢?做业务就如同做习题,如果‘课后’适当地进行总结,必然更快地提升自己的水平. 由于公司采用的react+node的技术 ...

  7. 搭建一个简单的React项目

    我是使用了create-react-app来搭建的基本框架,其中的原理和vue-cli差不多的脚手架.(当然也可以自己配置项目目录,这里我偷了一下懒) npm install -g create-re ...

  8. 快速搭建一个基于react的项目

    最近在学习react,快速搭建一个基于react的项目 1.创建一个放项目文件夹,用编辑器打开 2.打开集成终端输入命令: npm install -g create-react-app 3. cre ...

  9. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

随机推荐

  1. 照着官网来安装openstack pike之nova安装

    nova组件安装分为控制节点和计算节点,还是先从控制节点安装 1.前提条件,数据库为nova创建库和账户密码来连接数据库 # mysql -u root -p MariaDB [(none)]> ...

  2. 20145324 《Java程序设计》第7周学习总结

    20145324 <Java程序设计>第7周学习总结 教材学习内容总结 第十一章 1.静态sleep()用于流程暂停指定时间,单位是毫秒 2.一个Thread被标记为Daemon线程,在所 ...

  3. gerrit代码审核工具之“error unpack failed error Missing unknown”错误解决思路

    使用gerrit代码审核工具时遇到error: unpack failed: error Missing unknown d6d7c89bd1d77f44c5c8e99437aaffbfc0684e7 ...

  4. PHP的memory_limit引起的问题

    在运行PHP程序,通常会遇到下面的错误, 这个意味着PHP脚本使用了过多的内存,并超出了系统对其设置的允许最大内存.解决这个问题,首先需要查看你的程序是否分配了过多的内存,在程序没有问题的情况下,你可 ...

  5. Spring容器基础xmlbeanfactory(一起看源码)

    在spring中,如果你想创建容器少不了使用常见的xmlbeanfactory,ClassPathXmlApplicationContext,FileSystemXmlApplicationConte ...

  6. 迟到的thuwc&noiwc2018总结

    已经4个多月没写博客了呢. thuwc和noiwc都炸了,接下来的一段时间都没怎么写题,靠文化课和游戏麻醉自己.这篇博客也算是向之前自闭.颓废的自己告别吧.. 先写一发游记: thuwc:Day1炸, ...

  7. JDK 中的监控与故障处理工具-01

    当给系统定位问题的时候, 我们经常需要了解并分析 JVM 的运行时状态 . 那应该从哪些方面入手呢? 答案就是从数据入手 . 这里的数据包括: GC日志,异常堆栈, 线程快照(threaddump) ...

  8. PHP整数取余返回负数的相关解决方法

    PHP语言虽然功能强大,但并不代表其没有缺点,在编写代码的过程中未免会遇到一些让人头痛的问题.下面我们将为大家介绍有关PHP整数取余返回负数的解决办法. 我们先来看个例子. $res = 162447 ...

  9. java 之 find 命令

    转自:https://blog.csdn.net/holyshit666/article/details/52296966 find命令是比较常用的命令,用来在特定目录下查找具有某种特征的文件. 一: ...

  10. 浅谈NodeJs的模块机制

    J历史 我们都知道,js在刚被创建的时候,只是为了在网页上写一些小脚本而已,比如网页特效,表单验证等等,创立者也许没觉悟到以后的js会发展到如此规模.这是web1.0时代. 在web 2.0时代,各种 ...