1. 删除模板文件

删除public,src中所有文件

2. 创建App.js和index.js和index.html

先创建一个简单的页面文件 index.html

<!DOCTYPE html>
<html lang="en"><head><title>React App</title></head><body><div id="root"></div><div>测试</div></body>
</html>

创建应用根组件js App.js

/*** 应用根组件(简单的组件用函数定义,复杂的用类定义)*/import React, {Component} from 'react';export default class App extends Component {render() {return (<div>App---demo</div>)};
};

创建入口js index.js

/*** 入口js  渲染app标签*/
// 引入模块js
import React from 'react'
import ReactDom from 'react-dom'
// 引入自定义js
import App from './App'
//将app组件标签渲染到index页面的div上
ReactDom.render(<App/>, document.getElementById('root'));

3. 添加Ant Design模块

参考文档:Ant Design文档

下载antd 模块

yarn add antd

下载打包依赖模块

yarn add react-app-rewired customize-cra babel-plugin-import

定义加载配置的 js 模块: config-overrides.js

在项目根目录创建js文件

// 针对应用模块按需打包js
const {override, fixBabelImports} = require('customize-cra');module.exports = override(//针对antd 实现按需打包 根据impot引用来打包(需下载babel-plugin-import模块)fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: 'css',}),
);

修改package.json引用config-overrides.js 启动项目

原使用react-scripts模块(启动项目不引用config-overrides.js)
使用react-app-rewired(启动项目引用config-overrides.js)

4. 自定义 antd 主题

下载模块

yarn add less less-loader

修改配置文件config-overrides.js

// 针对应用模块按需打包js
const {override, fixBabelImports,addLessLoader} = require('customize-cra');module.exports = override(//针对antd 实现按需打包 根据impot引用来打包(根据babel-plugin-import模块)fixBabelImports('import', {libraryName: 'antd',libraryDirectory: 'es',style: true, //自动打包相关的样式}),addLessLoader({javascriptEnabled: true,modifyVars: {'@primary-color': '#00ffff'},}),
);

源码

2.React学习笔记----修改模板并使用Ant Design相关推荐

react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
OpenCV 学习笔记（模板匹配）
OpenCV 学习笔记(模板匹配) 模板匹配是在一幅图像中寻找一个特定目标的方法之一.这种方法的原理非常简单,遍历图像中的每一个可能的位置,比较各处与模板是否"相似",当相似度足够 ...
react学习笔记一：入门级小白到脚手架（create-react-app）开发项目
文章目录前言一.helloworld 二.React jsx 2.1 jsx 2.2 动态展示列表数据 2.3 虚拟dom创建的两种方式 2.4 代码实例 2.5 步骤 2.6 技术点三.组件化 ...
React学习笔记八-受控与非受控组件
此文章是本人在学习React的时候,写下的学习笔记,在此纪录和分享.此为第八篇,主要介绍非受控组件与受控组件. 目录 1.非受控组件 1.1表单提交案例 1.2案例的总结 2.受控组件 2.1受控组件 ...
Symfony2 学习笔记之模板使用
我们知道,controller负责处理每一个进入Symfony2应用程序的请求.实际上,controller把大部分的繁重工作都委托给了其它地方,以使代码能够被测试和重用.当一个controller需 ...

2.React学习笔记----修改模板并使用Ant Design

1. 删除模板文件

2. 创建App.js和index.js和index.html

先创建一个简单的页面文件 index.html

创建应用根组件js App.js

创建入口js index.js

3. 添加Ant Design模块

下载antd 模块

下载打包依赖模块

定义加载配置的 js 模块: config-overrides.js

修改package.json引用config-overrides.js 启动项目

4. 自定义 antd 主题

下载模块

修改配置文件config-overrides.js

2.React学习笔记----修改模板并使用Ant Design相关推荐

最新文章

热门文章