从头搭建一个React应用

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的结构还是有一些区别的,所以,有待后期继续学习。

原文地址:https://www.cnblogs.com/eco-just/p/10556199.html

时间: 2024-08-02 13:20:59

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

如何使用脚手架搭建一个react项目

1.准备工作: 首先要知道,搭建一个react项目总是需要安装node.js和npm的,未安装的请移步node.js官网:https://nodejs.org/en/ 检测是否安装成功:npm -v 和node -v 2.npm安装脚手架 执行命令npm install create-react-app 3.使用npx和脚手架创建项目my_app,这个过程可能需要几分钟,请耐心等待 npx create-react-app my_app 这里用到了npx,就是可以让你不用全局安装create-r

从零开始搭建一个react项目

如果只是想试试 React,那么建议使用 create-react-app来创建一个react项目.快速开始 因为 create-react-app 和 vue-cli 不一样,create-react-app将webpack的相关配置直接封装好了,所以自定制化程度不高,所以考虑手动构建一个 React项目 代码下载 准备工作 安装node环境. 配置cnpm(看个人需求). 准备一个空的文件夹react-demo. 初始化工程 从这里开始新建一个react工程 1. 初始化工程目录 1 cd

搭建一个react项目

搭建react整体框架 1.电脑里新建文件夹 2.npm create react-app 项目名称 如 npm create react-app huihuidemo / yarn create react-app huihuidemo 3.cd 项目名称 如 cd huihuidemo 4.npm run start 5.安装antd cnpm i antd -S / yarn add antd 6.在css文件中最顶部引入 @import '~antd/dist/antd.css'; //

从头开始搭建一个dubbo+zookeeper平台 【转】

本篇主要是来分享从头开始搭建一个dubbo+zookeeper平台的过程,其中会简要介绍下dubbo服务的作用.   注册中心的选择   dubbo支持多种类型的注册中心: 这里我们选择zookeeper,其实类型的优点缺点可详细查看文档. 1:zookeeper的安装,还是采用docker这一招鲜的run命令来安装zookeeper docker run -dit --name zookeeper --hostname zookeeper-host -v /data:/data -p 2181

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

本篇主要是来分享从头开始搭建一个dubbo+zookeeper平台的过程,其中会简要介绍下dubbo服务的作用. 首先,看下一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越多之后的常规方案演进历程. 其次,当服务越来越多之后,我们需要做哪些服务治理? 最后,是dubbo的架构图   注册中心的选择   dubbo支持多种类型的注册中心: Multicast注册中心 Zookeeper注册中心 Redis注册中心 Simple注册中心 这里我们选择zookeeper,其实类型

搭建一个简单的React项目

我是使用了create-react-app来搭建的基本框架,其中的原理和vue-cli差不多的脚手架.(当然也可以自己配置项目目录,这里我偷了一下懒) npm install -g create-react-app 先装脚手架 create-react-app elemApp 这样就可以生成一个名为elemApp的react初始框架了 这上面的就不细说了,用过三大框架的应该都清楚. 1.创建目录结构 其实这些目录都是可以按照个人习惯来定义,但是不可缺少的一定要加上 2.安装路由(创建Router

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

react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况. 从webpack开始 思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的

史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views 编辑推荐:稀土掘金 是一个高质量的技术社区,从 React Native 到 RxJava,性能优化到优秀开源库,让你不错过移动开发的每一个技术干货.各大应用市场搜索「掘金」,技术干货尽在掌握中. 说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X

史上最详细Windows版本搭建安装React Native环境配置

说在前面的话: 感谢同事金晓冰倾情奉献本环境搭建教程 之前我们已经讲解了React Native的OS X系统的环境搭建以及配置,鉴于各大群里有很多人反应在Windows环境搭建出现各种问题,今天就特意更新一贴来说明.关于os x环境搭建以及react native入门学习资料请移步:http://www.lcode.org/react-native/ 刚创建的React Native技术交流3群(496508742),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微