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. [随笔][Life][咖啡][咖啡分类]

    转载自:https://www.chalook.net/doc/201607/4710.shtml

  2. jQuery 点击后退(返回)执行函数

    <html> <head> <meta charset="UTF-8"> <meta name="viewport" ...

  3. 记一次nginx403错误

    同事开发微信小程序,小程序通过API接口调用我们的人脸比对API,但是一直是提示403,通过查看查看nginx日志,发现请求并没有转发出去,转发出去的请求,应该是301,重定向, 然后就开始在ngin ...

  4. 搜狗浏览器总是打开123.sogou.com-记搜狗浏览器遭遇劫持一例

    昨日,因从网上下载了office2010破解工具,压缩包中有个文件为名为[office 2010激活工具\为保证永久激活,要先点击这个配置,再点击KMSELDIYI激活.exe],单击之后没有反应.后 ...

  5. [转][C#]文件流读取

    { internal static class FileUtils { public static string GetRelativePath(string absPath, string base ...

  6. UE4:四种加载资源的方式

    转自:https://blog.csdn.net/zhangxsv123/article/details/79707686 第一种: 如果该蓝图有C++类(或者说是从C++类创建的蓝图),直接进行加载 ...

  7. Python-实列

    """题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再 ...

  8. ubuntu18.04 安装mysql server

    mysql 5.7支持的最高版本是Ubuntu17 ,即使安装成功后,也会出现各种妖蛾子,本人就被这种问题困扰了好一会.在Ubuntu 18.04下安装mysql,建议安装8.0以上版本! 1. 配置 ...

  9. SQLServer数据库镜像配置

    目录 一.目标...2 二.前提条件.限制和建议...2 三.设置概述...2 四.安装Sql Server 2008 enterprise X64.3 4.1.安装.NET3.5.3 4.2.安装时 ...

  10. leetCode27.移除元素

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...