进入新公司已经半年了,各个业务线,技术栈都已经熟悉,工作也已经游刃有余,决定慢下脚步,沉淀积累,回顾一下所用技术栈所包含的基本知识,以及再公司中的实战。

首先回顾新项目搭建
react脚手架目前使用较多的有三个:

  1. react-boilerplate
  2. react-redux-starter-kit
  3. create-react-app
        
        今天先来回顾一下react的官方脚手架
        create-react-app是FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具
        
        对于create-react-app这个脚手架,网上给的优点无外乎下面这几个:
               使用的原因以及特性:
               无需配置;
               集成了对 React, JSX, ES6 和 Flow 的支持;
          集成了开发服务器;
          配置好了浏览器热加载的功能;
          在 JavaScript 中可以直接 import CSS 和图片;
          自动处理 CSS 的兼容问题,无需添加 -webkit 前缀;
          集成好了编译命令,编译后直接发布成产品,并且还包含了 sourcemaps。
        
        
        快速使用:
        
        建议使用node版本>6,npm版本>3
        
        安装 create-react-app:npm install -g create-react-app

       使用 create-react-app快速生成一个新项目:

  在搭建成功之后会有操作说明:

  

  

  安装后cd react-progrem文件夹里启动项目:npm start
  启动之后就可以看到一个welcome页面,然后就可以去src下面编辑你自己的APP啦:

  

  

  测试:npm test (执行测试动作)
  编译:npm build (编译项目执行)
  弹出:npm run eject (弹出配置文件,自己修改webpack之类的配置,one-way operation,慎重使用 )
  在这个脚手架里,webpack的配置文件被隐藏掉了,自定义修改webpack的配置主要有以下两种方法:
  1、npm run reject 将webpack的配置文件config弹出来,此过程不可逆,弹出就无法再隐藏回去了
  2、(1)使用react-app-rewired
  

  1. npm install react-app-rewired --dev
  2. npm install babel-plugin-import --dev

  

  (2)修改package.json里的配置:
 
  1. /* package.json */
  2. "scripts": {
  3. "start": "react-app-rewired start",
  4. "build": "react-app-rewired build",
  5. "test": "react-app-rewired test --env=jsdom",
  6. }

  

  (3)在项目根目录下创建config-overrides.js
  1. /* config-overrides.js */
  2. const { injectBabelPlugin } = require('react-app-rewired');
  3.  
  4. module.exports = function override(config, env) {
  5. config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
  6. return config;
  7. };

这是一般的快速搭建项目的方法,由于公司有自己的项目搭建配置,没有使用create-react-app。。。

React 官方脚手架 create-react-app快速生成新项目的更多相关文章

  1. 国内app快速生成平台对比

     泰格老虎 2013-03-07 00:39:10 这是海恒CEO高鹏写的一篇国内app快速生成平台对比文章,介绍了国内快速生成APP的平台与自己平台的对比,很有参考价值. 同类网站 安米网 http ...

  2. Myeclipse插件快速生成ssh项目并配置注解 在action层注入service的超详细过程

    最近发现,我对于ssh的 自动注入配置 还是不熟悉,于是整理了一下 终于做了一个 简单的 注入配置出来. 以前都是在applicationContext.xml 里面这样配 <bean id=& ...

  3. flink学习笔记-快速生成Flink项目

    说明:本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKh ...

  4. 如何解决 React 官方脚手架不支持 Less 的问题

    说在前面 create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式,不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Les ...

  5. React官方脚手架不支持less问题解决

    create-react-app是由React官方提供,并推荐构建React单页应用程序的最佳方法,但是默认不支持less,需要手动集成: 1,必须手动安装less npm install less ...

  6. react官方脚手架搭建项目

    1.全局安装 npm install -g create-react-app 2. app后面还要给项目文件命名 create-react-app //是全局命令来创建react项目 3.然后按照提示 ...

  7. 关于react 官方脚手架使用出现的问题

    首先按照官网说明,一路的安装下来,很顺利,然后开始运行吧,提示个错误,缺少index.js 文件  原来是默认给出的文件是App.js 如何更改呢 找到react-script模块文件夹config下 ...

  8. react官方脚手架添加less配置

    装两个包 npm install --save less less-loader 在node-modules/react-scripts/config/webpack.config.js中 在大概58 ...

  9. 我最近做了一个react的后台管理系统,用于快速创建后台项目模板

    react-ant-admin 此框架使用与二次开发,前端框架使用react,UI框架使用ant-design,全局数据状态管理使用redux,ajax使用库为axios.用于快速搭建中后台页面.欢迎 ...

随机推荐

  1. 在ubuntu下如何验证文件的MD5码 (转载)

    转自:http://blog.csdn.net/david_xtd/article/details/7641682 在windows下可以使用专用的工具软件如WinMD5等来查看文件的MD5码, 在u ...

  2. js 实现发布订阅模式

    /* Pubsub */ function Pubsub(){ //存放事件和对应的处理方法 this.handles = {}; } Pubsub.prototype = { //传入事件类型typ ...

  3. html解决的兼容问题

    手机版不缩放 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum ...

  4. ue4 motage

    Montage是什么 一个(可以自由拼接动画的)动画剪辑,通过slot,在任意时候由玩家主动向动画系统push自己制作的动画剪辑 Montage用途 上图是一个近身攻击动画,含有 3 个片段 [开始. ...

  5. android studio 生成引用arr

    http://blog.csdn.net/luyanjun07/article/details/51558151 1.背景 jar:无法包含资源文件 library:可以包含资源文件 但是引入显得比较 ...

  6. php UTF8 转字节数组,后使用 MD5 计算摘要

    Hex.encodeHexString(md5.digest);按 UTF8 转字节数组,后使用 MD5 计算摘要,得到 16 字节数组,使用 Hex 转为长度为 32 的字符串,保持小写 bin2h ...

  7. JS中的MOD运算

    最近研究汉诺塔非递归的时候,看到书上写了个MOD,久违啊,感觉好久没看到过了,都忘了怎么用了. 某人:我知道,这不就是取余嘛,直接%就行了. 嗯......,如果是python语言,你说的很对,但是我 ...

  8. C 语言实例 - 判断正数/负数

    C 语言实例 - 判断正数/负数 用户输入一个数字,判断该数字是正数还是负数或是零. 实例 #include <stdio.h> int main() { double number; p ...

  9. 译—— a tale of viewport2

    这一页我们将讨论移动浏览器.如果您对移动设备完全陌生,我建议您首先阅读第一部分关于桌面浏览器的内容,以便在熟悉的环境中做好准备. 移动浏览器的问题 移动浏览器和桌面浏览器比较,最明显的差异是屏幕大小. ...

  10. VUE中获取url中的值

    如图:获取值 一:main.js中写入 const router = new VueRouter({ routes: [ { path: '/goodsinfo/:goodsId', componen ...