详解使用create-react-app快速构建React开发环境

最近在折腾react开发，总结一个react环境搭建的教程，写得比较细碎，基本上就是自己的搭建步骤了，希望能够帮助到有需要的小伙伴。

常用的脚手架

  1. react-boilerplate
  2. react-redux-starter-kit
  3. create-react-app（git上关注量最大）

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目：

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

tips：

如果使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

如何编译less

1.暴露出配置文件

npm run eject

2.安装less-loader 和less

npm install less-loader less --save-dev

3.修改webpack 配置

修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

test: /\.css$/ 改为 /\.(css|less)$/

在这个test的下面找到use，添加loader

{
  loader: require.resolve('less-loader') // compiles Less to CSS
}

好了 重新运行项目 less已经编译了

项目结构

src目录

src目录用来存放我们自己的代码，可以在src下面创建子目录，只有src根目录下的文件会被webpack编译，所以必须把文件放在src根目录下，否则不会识别。

public目录

只有public目录下的文件才会被public/index.html引用

tip:public和src下的index.html文件必须存在不能改名

常用命令

1启动命令

npm start

2编译打包命令。在生产环境中编译代码，并放在build目录中能够正确的打包代码，并且优化，压缩，使用hash重命名文件

npm run build

3.文件修改后测试

npm test

4.结构命令。暴露出webpck的配置命令，原本在脚手架中，配置项是不可见的，需要修改才执行这个命令（这是一个单项命令，一旦结构，不可逆。）

npm run eject

5.https运行

set HTTPS=true&&npm start

6.线上编译

这个是create-react-app的一个大亮点，它能让你的应用骗译出在线上生产环境运行的代码，编译出来的文件很小，且文件名还带hash值，方便我们做cache，而且它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，真的超级方便。

只需一行命令：

npm run build

7.api开发

只需要在package.json文件中，加一个配置项就可以了。

"proxy": http://localhost:3001/,

8.ajax？
替代用fetch

npm install whatwg-fetch
import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
  .then(res => res.json())
  .then((data) => {
   this.setState({ value:data });
  });

调试工具react developer tools（https://github.com/facebook/react-devtools）

在chrome中添加扩展程序react developer tools，记得重启浏览器（重启 重启 重启，重要的事情说三遍），在chrome的开发工具里面会出现react选项。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解开发react应用最好用的脚手架 create-react-app

    1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境. 比如: npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --

  • create-react-app构建项目慢的解决方法

    create-react-app构建项目慢的解决方法

    create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令: create-react-app my-app 来创建一个新的React应用.由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch 解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已,而在寻求create-rea

  • react以create-react-app为基础创建项目

    什么是create-react-app create-react-app是一个js库,使用它能够很方便地建立react项目,免去了建立react项目时配置webpack.调试服务器.运行脚本等麻烦,你只需要使用这个库,便可以一键完成react项目的创建初始化项目 首先,要先利用create-react-app创建一个react项目,可参考https://github.com/facebookincubator/create-react-app 注:用"[ ]"包裹的都是可自定义的内容,

  • 详解Ubuntu18.04配置VSCode+CMake的C++开发环境

    详解Ubuntu18.04配置VSCode+CMake的C++开发环境

    首先,介绍自己电脑:Ubuntu18.04.VS Code 1.46版 本文目的:为VS Code配置好C++ 开发环境,以及VS Code +CMake的配置 对于C++ 工程,有四个必要的json配置文件,先ctrl+shift+p打开输入指令分别是: c_cpp_properties.json :配置项目结构,自动生成和更新,输入C/C++:Edit configuration task.json: 构建和编译运行项目,输入Task:Configure Task,模板,Others lau

  • 详解Windows下运用Docker部署Node.js开发环境

    详解Windows下运用Docker部署Node.js开发环境

    开始 在windows下部署nodejs开发环境着实遍地坑,每遇到一个问题都要去google原因再试图解决.而且如果你想把你写好的应用交给别人跑跑看,他可能同样需要折腾很久才能真正在他的环境下运行起来.被坑了好些时日最终还是放弃,转战Docker. 文章开头先明确一下我们希望实现的效果: 1.依然在Windows下编辑源代码,在Docker容器中运行代码,最后在Windows的浏览器中看到运行结果,方便后续debug. 2.可以将我开发完成的程序和运行环境一起打包制作成Docker的image,

  • 详解SpringBoot 使用Spring Initializr 快速构建工程（官方推荐）

    详解SpringBoot 使用Spring Initializr 快速构建工程（官方推荐）

    序言: 在此之前,我们主要通过Maven Archetype 来快速生成Maven项目,项目原型相对简陋,对各种IDE的支持也不太友好.然而通过Spring官方提供的Spring Initializr 来构建Maven项目,它不仅完美支持IDEA和Eclipse,而且能自动生成启动类和单元测试代码,给开发人员带来极大的便利!! 注:本文含Eclipse&IDEA两部分教程. 一.Spring Initializr 使用教程 ( Eclipse )具体步骤: 步骤1 : 使用浏览器打开: http

  • 详解使用create-react-app快速构建React开发环境

    最近在折腾react开发,总结一个react环境搭建的教程,写得比较细碎,基本上就是自己的搭建步骤了,希望能够帮助到有需要的小伙伴. 常用的脚手架 react-boilerplate react-redux-starter-kit create-react-app(git上关注量最大) 使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-re

  • 详解Vue-cli webpack移动端自动化构建rem问题

    相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上找了很多的方法发现以下问题: 1 照着老的视频教程去弄,发现node npm webpack px2rem的各种插件版本都不一样,根本没用 2 网上的教程缺斤少俩,不完整,搞得我整了半天搞不定,想想干脆手动vscode 的cssrem设置算了,但老子还是不服气,东拼西凑还是整出来了,最后还是研究出了以下方法希望对大家的移动端自动化构建rem有帮助 1 安装v

  • 详解使用阿里云镜像仓库构建国外Docker镜像

    使用阿里云镜像仓库下载国外镜像 在日常使用 Docker 或 K8S 的过程中,经常会需要到国外的网站中下载镜像,但是有些网站在国内是无法访问的.对于这个问题可以使用阿里云提供的镜像仓库进行下载,然后 pull 到本地并修改 tag 来实现. 例如在使用 K8S 部署 Istio 时,需要下载 gcr.io/istio-testing/install-cni:1.5-dev 镜像,可以根据如下步骤在阿里云中进行构建和下载: 一.配置 Github 首先登录 Github 中创建一个用于构建镜像的

  • 详解如何使用VSCode和CMake构建跨平台的C/C++开发环境

    详解如何使用VSCode和CMake构建跨平台的C/C++开发环境

    目录 一.前言 二.开发工具 三.示例项目 四.使用CMake 4.1.如何引入一个第三方静态库 4.2.动态库的加载问题 4.3.utf-8编码格式的代码通过visual studio编译报错问题 4.4.可执行文件的工作目录问题 4.5.如何修改Mac上动态库的加载路径 五.利用VSCode的task.json执行指定命令 5.1.通过Ctrl+Shift+B执行CMake编译本地工程 5.2.通过Ctrl+B构建与运行可执行文件 六.利用VSCode的launch.json完成调试 一.前

  • Mac下快速搭建PHP开发环境步骤详解

    最近做了一个后端的项目,是用PHP+MySQL+Nginx做的,所以把搭建环境的方法简单总结一下. 备注: 物料:Apache/Nginx+PHP+MySQL+MAMPMac OS 10.12.1 自带Apache,Nginx和PHP 1.运行Apache 查看Apache版本,在终端根目录输入如下命令: sudo apachectl -v 终端会输出Apache的版本及built时间 Server version: Apache/2.4.23 (Unix) Server built:   Au

  • docker在win10家庭版下构建laravel开发环境的教程详解

    操作系统: win10 家庭版 安装docker: 官网下载的docker无法安装成功,提示操作系统版本问题~~~~ 所以直接下载了阿里提供的docker安装包: http://mirrors.aliyun.com/doc ... 社区版是-ce后缀的 阿里镜像加速 首先登录阿里云 查找容器镜像服务 win10找到C:Users用户.dockermachinemachinesdefault底下有个config.json文件,在属性RegistryMirror添加加速器地址,docker虚拟机重启

  • 详解Mybatis核心类SqlSessionFactory的构建

    目录 1.实例代码 2.代码剖析 3.总结 请大家搬好小板凳,指北君将会用最通俗易懂,图文并茂的方式,给大家深入剖析 Mybatis 的实现原理. 本篇文章我们首先解析 SqlSessionFactory 的创建过程. 1.实例代码 在实例代码中,我们在测试类中写了一个 init() 方法,里面包括了 SqlSessionFactory 的构建,分为两步. 第一步:读取配置文件 mybatis-config.xml 输入流 第二步:根据输入流构建 SqlSessionFactory: publi

随机推荐