18_使用react脚手架构建应用
一、什么是脚手架
1.脚手架:用来帮助程序员快速创建一个基于xxx项目的模板仓库(可以理解为网上的大神写好了基础模板直接下载无需自己配置)
1)包含了所有需要的配置
2)指定好了所有依赖
3)可以直接安装/编译/运行一个简单效果
2.react提供了一个用于创建react项目的脚手架:create-react-app
3.项目的整体技术为:react + webpack + es6 + eslint(检查与法的合法性)
4.使用脚手架的好处:模块化、组件化、工程化(指的是可以用一条命令对项目进行打包、编译、运行)
二、安装脚手架
1.首先要下载node.js,node.js中含有了npm
2.node和npm的关系:node.js是javascript的运行环境,是对google v8引擎的封装,是一个服务器端的javascript解释器
npm是node.js的包管理器,在node.js上面开发时,会用到很多人封装好的js代码,高手将写好的库上传到npm官网上面,当开发人员想要使用时,直接通过npm来安装
3.环境检查
1)node检查:node -v
2)检查npm仓库位置:npm config get registry。
推荐使用速度快的淘宝镜像下载,否则下载慢会报错,
修改npm下载的源地址为淘宝镜像命令:npm config set registry https://registry.npm.taobao.org
使用 npm config get registry 命令来检查源地址是否修改成功
4.创建项目
选择一个文件夹,打开cmd执行:create-react-app project_name 命令来创建项目,此时会在当前文件夹下创建名字为project_name的工程
使用 cd project_name 移动到项目中,执行 npm start 即可运行项目
18_使用react脚手架构建应用的更多相关文章
- react脚手架构建工程
https://blog.csdn.net/qtfying/article/details/78665664 第二步:安装less包: https://segmentfault.com/a/11900 ...
- 用webpack4从零开始构建react脚手架
用webpack4从零开始构建react脚手架 使用脚手架 git clone git@github.com:xiehaitao0229/react-wepack4-xht.git` `cd reac ...
- webpack4构建react脚手架
create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...
- React脚手架创建一个React应用以及项目目录结构详解
react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...
- React学习系列之(1)简单的demo(React脚手架)
1.什么是React? React是一个一个声明式,高效且灵活的用于构建用户界面的JavaScript库.React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 ...
- react+redux构建淘票票首页
react+redux构建淘票票首页 描述 在之前的项目中都是单纯的用react,并没有结合redux.对于中小项目仅仅使用react是可以的:但当项目变得更加复杂,仅仅使用react是远远不够的,我 ...
- 记一次改造react脚手架的过程
公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...
- react项目构建
1.react脚手架 npm install -g create-react-app create-react-app myproject 2.页面配置(bootcdn) <script src ...
- 【webpack系列】从零搭建 webpack4+react 脚手架(四)
经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...
随机推荐
- 1120 Friend Numbers (20 分)
1120 Friend Numbers (20 分) Two integers are called "friend numbers" if they share the same ...
- html地址--待更新
11.学习笔记: 视频直播技术:ijkplayer技术:jni技术: https://www.cnblogs.com/renhui/category/1011048.html: IM:环信, xmpp ...
- sqlserver基本增删查语句
use StudentManageDB go insert into Students (StudentName,Gender,Birthday,Age,StudentIdNo ,PhoneNumbe ...
- Linux下安装python3及相关包
Python3: sudo apt-get install python3 终端中输入python则进入python2,输入python3则进入python3 安装python2的相关包: sudo ...
- Spring MVC RESTful
REST: 即 Representational State Transfer,(资源)表现层状态转化是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便 具体说,就是 HTTP ...
- 数组.html
<script > var arr1 = [1, 2, 3, 4, 5, 6 ]; 赋值 var arr2 =Array(1,2,3,4,5,6); var arr3 = new Arra ...
- browserify babel gulp 没有编译import的文件
1.遇到坑的gulp配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel ...
- echarts学习之——电力迁徙图
今天主要就是在搞echarts,我们都知道他为我们提供了丰富的api方法,使我们能够迅速的搭建图标.同时他里面还有许多的案例, 其中就有这么一个国内航线模拟迁徙的地图,如下所示: 而我们通常因为各种需 ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
- JS函数介绍
JS中函数中没有重载特性,并且调用俩个重名函数是看顺序的 即第2个会把第1个覆盖掉也就是在下面写的会覆盖上面写的, 举个例子 function box(num,num2){ return num+10 ...