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

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

react-boilerplate
react-redux-starter-kit
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
  

npm install react-app-rewired --dev
npm install babel-plugin-import --dev

  

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

  

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

这是一般的快速搭建项目的方法,由于公司有自己的项目搭建配置,没有使用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. lung 分割论文

    <4D Lung Tumor Segmentation via Shape Prior and Motion Cues > Abstract— Lung tumor segmentatio ...

  2. MVC动态生成的表单:表单元素比较多 你就这样写

    MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) ...

  3. PJzhang:经典子域名爆破工具subdomainsbrute

    猫宁!!! 参考链接: https://www.waitalone.cn/subdomainsbrute.html https://www.secpulse.com/archives/5900.htm ...

  4. sessionStorage二种存值取值的方法

    //方法一 sessionStorage.setItem('id1','这是一个测试id1'); //存入一个值key:value console.log(sessionStorage.getItem ...

  5. [Swift]Xcode实际操作

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应

    GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...

  7. JDBC基础原理

    一.DCL(了解) -- 1. 创建用户CREATE USER 'zhangsan'@'%' IDENTIFIED BY 'zhangsan';-- 2. 用户授权GRANT ALL ON heima ...

  8. 导出war包

    1. 使用Eclipse 导出 右键web工程 -> export -> war file 将导出的war文件放到tomcat安装目录的webapps下,然后启动tomcat,就会发现在该 ...

  9. FileUtils简化你的文件操作

    前言: 在工作当中我们往往遇到很多文件的操作,我们也习惯写一些自己定义的工具类来简化文件操作,其实apache的commons的FileUtils类就是这样一个工具类,使用它能大大的简化我们对文件的操 ...

  10. 详解环境搭建SSM

    1.概述: SSM即为spring 4 +spring mvc +mybatis 3.4.6 推荐使用maven或者gradle 来配置 下面给出maven配置方式 2.项目结构: 新建web项目 这 ...