一、什么是脚手架

  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脚手架构建应用的更多相关文章

  1. react脚手架构建工程

    https://blog.csdn.net/qtfying/article/details/78665664 第二步:安装less包: https://segmentfault.com/a/11900 ...

  2. 用webpack4从零开始构建react脚手架

    用webpack4从零开始构建react脚手架 使用脚手架 git clone git@github.com:xiehaitao0229/react-wepack4-xht.git` `cd reac ...

  3. webpack4构建react脚手架

    create-react-app 脚手架还没有更新到webpack4,但是猛然间发现webpack4已经到 v4.12.0 版本了!!!慌得不行,正好端午有空所以研究了一波,自己搭建了一个简单的rea ...

  4. React脚手架创建一个React应用以及项目目录结构详解

    react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...

  5. React学习系列之(1)简单的demo(React脚手架)

    1.什么是React? React是一个一个声明式,高效且灵活的用于构建用户界面的JavaScript库.React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 ...

  6. react+redux构建淘票票首页

    react+redux构建淘票票首页 描述 在之前的项目中都是单纯的用react,并没有结合redux.对于中小项目仅仅使用react是可以的:但当项目变得更加复杂,仅仅使用react是远远不够的,我 ...

  7. 记一次改造react脚手架的过程

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  8. react项目构建

    1.react脚手架 npm install -g create-react-app create-react-app myproject 2.页面配置(bootcdn) <script src ...

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

    经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦 ...

随机推荐

  1. 在HP-UX 11.11用swinstall安装gcc 4.2.3

    agent60 在linux上执行不了,原因是操作系统内核版本不一致,需要重新编译包. file $SHELL 显示  PA-RISC1.1 在HP-UX 11.31 PA-RISC1.1 版本中 编 ...

  2. mysql 锁2

    官网地址 https://dev.mysql.com/doc/refman/5.5/en/innodb-transaction-isolation-levels.html 这里主要是说事务隔离级别,以 ...

  3. [UE4]定义和使用黑板、使用/赋值黑板变量

    黑板,其实就是相当于字典表,一个key对应一个value,key不能重复

  4. @postconstruct初始化的操作(转载)

    原文地址:https://www.cnblogs.com/qingruihappy/p/7861623.html 从Java EE 5规范开始,Servlet中增加了两个影响Servlet生命周期的注 ...

  5. UE4 材质Lerp节点解疑

    转自:http://www.manew.com/thread-46268-1-1.html 1.A是一个灰色,B是一个红色,Alpha是一个颜色图 A到B是0到1,也就是黑到白,所以,alpha图,黑 ...

  6. 使用unbound提供DNS域名解析服务

    使用unbound提供DNS域名解析服务 # 作者:Eric # 微信:loveoracle11g # 先配yum仓库 [root@server1 ~]# cd /etc/yum.repos.d/ [ ...

  7. AI的胜利,人类的荣耀

    在围棋界,AI战胜人类,这不是人类的耻辱,是人类的荣耀. 看到柯洁悲伤哭泣的画面,曾经放出豪言的大男孩,低下了骄傲的头.我相信经过这样一次挑战,对他的成长有好处,无论是人生,还是棋艺. 在围棋领域,人 ...

  8. Pyhton-Web框架之【Django】

    一.什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. 对于所有的 ...

  9. 将16进制的颜色转为rgb颜色

    在前端面试过程中,常常会遇到这样一种类型的题目: 使用js将16进制的颜色值转为rgb颜色! 反而在项目中,不怎么遇到这种问题,也很少有这种需求的项目. 但毕竟面试中常常遇到,我自己在之前的面试的时候 ...

  10. 检查Linux系统cpu--内存---磁盘的脚本

    花了一天写了三条命令分别检查cpu,内存,磁盘 [root@localhost ~]# cat cpu_mem_disk.sh #!/bin/sh # echo "1 检查cpu利用率--- ...