1.下载安装node.js,需要node.js环境。

2.经过挑选,决定选择creat-react-app这个项目脚手架,然后输入指令安装          $ npm install -g create-react-app

3.创建项目,然后输入指令(my-app是名字,自己取)          $ create-react-app my-app

4.进入项目,然后输入指令          $ cd my-app

5.运行项目,然后输入指令          $ npm start

6.选择react-router-dom这个路由,然后输入指令安装          $ npm install --save react-router-dom

7.对比fetch和axios选择fetch,然后输入指令安装          $ npm install whatwg-fetch --save

8.因为我是开发微商城项目,UI组件集成选择ant-design-mobile,然后输入指令安装          $ npm install antd-mobile --save

9.引入 react-app-rewired 并修改 package.json 里的启动配置          $ npm install react-app-rewired --save-dev

10.在项目根目录创建一个 config-overrides.js 用于修改默认配置,输入代码

module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};

11.安装按需加载组件代码和样式的 babel 插件并修改 config-overrides.js 文件          $ npm install babel-plugin-import --save-dev

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
return config;
};

12.用组件方式来写css          $ npm install --save styled-components

react项目搭建的更多相关文章

  1. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  2. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  3. react项目搭建及webpack配置

    1,配置webpack npm install -g webpack                       webpack的cli环境 npm install -g webpack-dev-se ...

  4. React项目搭建及依赖安装

    一.前提 首先保证node.js已安装完成... 安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成. 二.安装react脚手架 在cmd命令行中输 ...

  5. 基于webpack的React项目搭建(三)

    前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...

  6. 基于webpack的React项目搭建(二)

    前言 前面我们已经搭建了基础环境,现在将开发环境更完善一些. devtool 在开发的过程,我们会经常调试,so,为了方便我们在chrome中调试源代码,需要更改webpack.config.js,然 ...

  7. react 项目搭建

    1.首先运行环境-node是必须的,需要下载安装node的运行环境: 2.安装好了node之后,自然的就有了npm: 3.npm install -g creact-react-app/全局安装cre ...

  8. React项目搭建基于Karma的CI环境

    简介 在浏览Github的时候是否经常看到这样的CI图标呢? 本文即为介绍如何为基于React的项目配置CircleCI的自动化测试环境 源码在此 本地实现 项目依赖如下: "devDepe ...

  9. React项目搭建(脚手架)

    首先我们需要安装node环境:download nodejs:https://i.cnblogs.com/EditPosts.aspx?opt=1 找到你需要的版本和系统安装包下载并安装. 这时候你可 ...

随机推荐

  1. Java_初入IO流_字符流_Write-Read_小笔记

    package IO; import java.io.FileWriter; import java.io.IOException; class File_Writer { public static ...

  2. zabbix之 自动发现磁盘io util 监控

    一.iostat Zabbix并没有提供模板来监控磁盘的IO性能,所以我们需要自己来创建一个.iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之 ...

  3. LOJ 2292 「THUSC 2016」成绩单——区间DP

    题目:https://loj.ac/problem/2292 直接 DP 很难做,主要是有那种 “一个区间内部有很多个别的区间” 的情况. 自己想了一番枚举 max-min 的最大限制,然后在该基础上 ...

  4. Hbase 与Hive整合

    HBase与Hive的对比 25.1.Hive 25.1.1.数据仓库 Hive的本质其实就相当于将HDFS中已经存储的文件在Mysql中做了一个双射关系,以方便使用HQL去管理查询. 25.1.2. ...

  5. django 获取用户提交的数据 文件 表单

    templates: <div> <form action="/detail" method="post" enctype="mul ...

  6. debian下arp欺骗

    sudo sysctl -w net.ipv4.ip_forward= sudo sysctl -p arpspoof -i eth0 -t 目标ip -r 伪装ip或者ettercap -i eth ...

  7. 涂抹mysql笔记-mysql管理工具

    五花八门的mysql管理工具<>mysql提供的命令行工具 mysql_install_db:mysql建库工具,在源码安装mysql环节我们使用过. mysql_safe:mysql启动 ...

  8. Activiti图表bpmn对应的xml文件

    当我们绘制了一个bpmn图表,实质是创建了一个xml文件, 右键bpmn文件open  with   xml edit <?xml version="1.0" encodin ...

  9. mkimage command not found – U-Boot images will not be built

    ubuntu 14.04 64位系统编译Linux kernel时提示: “mkimage” command not found – U-Boot images will not be built 按 ...

  10. vue+窗格切换+田字+dicom显示_02

    环境:vue+webpack+cornerstone ide:vs code 需求:窗格设置+拼图设置 分析: 由于时间的原因,我也没有Baidu更好的显示窗格的方法,所以使用比较笨的方法,通过组件显 ...