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. 为git服务器配置gitosis管理权限

    yum install python-setuptools git clone https://github.com/tv42/gitosis.git cd gitosis sudo python s ...

  2. 以Windows服务方式运行ASP.NET Core程序【转载】

    我们对ASP.NET Core的使用已经进行了相当一段时间了,大多数时候,我们的Web程序都是发布到Linux主机上的,当然了,偶尔也有需求要发布到Windows主机上,这样问题就来了,难道直接以控制 ...

  3. Java面向对象 第4节 类的多态性

    一.多态的概念 在面向对象语言中,多态是指在一棵继承树中的类中可以有多个同名但不同方法体及不同形参的方法.通常有两种途径实现多态:方法的重载和覆盖. 多态性允许以统一的风格处理已存在的变量及相关的类. ...

  4. Vue 表单校验 vee-validate

    gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...

  5. Linux内核分析第九次作业

    理解进程调度时机跟踪分析进程调度与进程切换的过程 一.基础知识 Linux系统的一般执行过程 一般情况:正在运行的用户态进程X切换到运行用户态进程Y的过程 1. 正在运行的用户态进程X 2. 发生中断 ...

  6. py-day2-5 python 百分号字符串拼接

    #### 字符串格式化. # %s 代替任何的元素 (数字,字符串,列表··) print('I live %s crty' %'my') print('I live %s crty' %'[6,8, ...

  7. windows time-wait 问题处理记录

    问题描述:有一段时间,服务器启动了好多程序,做的是 obd监听服务,连接好多个服务器,由于程序的本身的问题造成大量的wait-time,一番百度后找到找到方案1 设置一由于wait-time 需要经过 ...

  8. 总结:Java 集合进阶精讲1

    知识点:Java 集合框架图 总结:Java 集合进阶精讲1 总结:Java 集合进阶精讲2-ArrayList 集合进阶1---为集合指定初始容量 集合在Java编程中使用非常广泛,当容器的量变得非 ...

  9. 2th Dec 2018

    北京的冬天越来越冷了,是那种钻进骨头里的冷.果,爸爸又走了.每次离开都格外的难受,这种感觉是加剧的,一次比一次强烈.走的时候,你一脸的不高兴,能感觉出来你的不开心,你勉强让爷爷从我怀里面接过去.3个半 ...

  10. lumbda表达式初探

    一.表达式格式定义 (parameters) -> expression 或 (parameters) ->{ statements; } 注意点:左边是输入参数,就相当于我们定义方法中的 ...