react项目搭建
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项目搭建的更多相关文章
- React项目搭建与部署
React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...
- 基于webpack的React项目搭建(一)
前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...
- react项目搭建及webpack配置
1,配置webpack npm install -g webpack webpack的cli环境 npm install -g webpack-dev-se ...
- React项目搭建及依赖安装
一.前提 首先保证node.js已安装完成... 安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成. 二.安装react脚手架 在cmd命令行中输 ...
- 基于webpack的React项目搭建(三)
前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...
- 基于webpack的React项目搭建(二)
前言 前面我们已经搭建了基础环境,现在将开发环境更完善一些. devtool 在开发的过程,我们会经常调试,so,为了方便我们在chrome中调试源代码,需要更改webpack.config.js,然 ...
- react 项目搭建
1.首先运行环境-node是必须的,需要下载安装node的运行环境: 2.安装好了node之后,自然的就有了npm: 3.npm install -g creact-react-app/全局安装cre ...
- React项目搭建基于Karma的CI环境
简介 在浏览Github的时候是否经常看到这样的CI图标呢? 本文即为介绍如何为基于React的项目配置CircleCI的自动化测试环境 源码在此 本地实现 项目依赖如下: "devDepe ...
- React项目搭建(脚手架)
首先我们需要安装node环境:download nodejs:https://i.cnblogs.com/EditPosts.aspx?opt=1 找到你需要的版本和系统安装包下载并安装. 这时候你可 ...
随机推荐
- js有哪些变态的语法?
JS这个语言好是好,但是很多时候写起来太丑了,每次看大牛的代码的时候,妈妈都问我为什么跪着读代码,随着 ES 2015的普及我们可以写出很多可读性强且漂亮的代码,那么接下来就带着大家一块学习一下可以把 ...
- Python Django orm操作数据库笔记之外键和表关系
外键 在MySQL中,表有两种引擎,一种是InnoDB,另外一种是myisam.如果使用的是InnoDB引擎,是支持外键约束的. 外键的使用 使用外键前需要先确保相应外键已存储在数据库中(flask中 ...
- C166 -MDH
Writing a C logic for moving MDH register contents after MUL instruction http://www.keil.com/forum ...
- Lucene的基本使用
1.了解搜索技术 2.搜索引擎的原理 索引:类似于书的目录 3.实现搜索技术的方式 方式1:数据库搜索 利用SQL语句进行模糊搜索: select * from items where title l ...
- 如何增加黑客通过ssh入侵的难度--保护ssh的三把锁
源文档:https://blog.csdn.net/cnbird2008/article/details/6130696 简介 如果需要远程访问计算机并启用了 Secure Shell (SSH) 连 ...
- Flask--(一对多)模型渲染表单数据
模型建立一一对多模型: 多表添加外键,建立两张表之间的关系 一表关联多表的属性,可以方便快速访问多表的数据 模板一层循环渲染一表数据,二层循环渲染多表的数据 代码展示: from flask impo ...
- windows配置远程桌面连接到ubuntu
最近在用nodejs开发项目,同时也在做一些区块链相关的工作,公司给配的办公电脑着实不错,都是自家品牌的工作站,市场价都是15K+了.但是在win10上装虚拟机,还是不太顺畅的.因为公司电脑是五年到期 ...
- python网页爬虫开发之五-反爬
1.头信息检查是否频繁相同 随机产生一个headers, #user_agent 集合 user_agent_list = [ 'Mozilla/5.0 (Windows NT 6.1; WOW64 ...
- PHP chdir函数:改变当前的目录
PHP chdir函数的作用是改变当前的目录,这里主机吧详细介绍下chdir函数的用法,并列举使用chdir函数的例子. chdir定义和用法: chdir() 函数改变当前的目录. chdir实例: ...
- 竖直的ViewPager,上下滑动的ViewPager,VerticalViewPager ;
直接看代码吧,重写Viewpager,改变了手势和切换效果:和正常的Viewpager使用一模一样: /** * ChenboCui 竖向的Viewpager */ public class Vert ...