react学习笔记--一--移动端项目搭建
一，初始项目搭建
npx create-react-app my-app
cd my-app
npm start
二，项目的目录结构设计
1，新建项目后把src下的东西全删除
2，然后创建相关的目录结构：
三，初始化配置移动端项目文件
1，引入antd-mobile
官网：https://mobile.ant.design/docs/react/introduce-cn
安装：
npm install antd-mobile --save
2,index.html配置移动端参数
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
3，移动端300毫秒问题的插件引入
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}if(!window.Promise) {document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');}</script>
4，实现antd组件的按需打包（使用到哪个组件了，才会打包编译这个组件）
参看文章：https://blog.csdn.net/zwkkkk1/article/details/88823366
具体介绍可以看下官方手册
(1)引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。
npm install react-app-rewired customize-cra --save-dev
修改package的配置：
/* package.json */
"scripts": {- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
(2)然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {// do stuff with the webpack config...return config;
};
(3)使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
+ const { override, fixBabelImports } = require('customize-cra');- module.exports = function override(config, env) {- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {+ libraryName: 'antd-mobile',
+ style: 'css',
+ }),
+ );
于是就可以在下一步使用了：
四，在应用中使用antd组件
1，入口文件：
import React from 'react'
import ReactDOM from 'react-dom'
import {Button} from 'antd-mobile'
ReactDOM.render(<Button type="primary">Test</Button>,document.getElementById('root'))
然后npm run start
2，安装less,为了修改antd-mobile的默认样式
npm install --save-dev babel-plugin-import less less-loader@5.0.0 style-loader css-loader
值得注意的是，目前less-loader只支持到@6.0.0，高于6版本的，会报这个错：
所以这里的less-loader最好指定一下版本，我用的5.0.0
主题定制的官网：https://mobile.ant.design/docs/react/customize-theme-cn
主题样式文件：https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
定制主题，也是在config-overrides.js文件进行更改：
const { override, fixBabelImports , addLessLoader } = require('customize-cra')
const theme = require('./antd-theme.json')module.exports = override(addLessLoader({javascriptEnabled: true,modifyVars: theme,}),fixBabelImports('import', {libraryName: 'antd-mobile',libraryDirectory: 'es',style: true,}),
);
样式文件antd-theme.json新建在根目录下：
{"brand-primary": "#000000","brand-primary-tap": "#ffccbc"
}
使用addLessLoader插入less-loader，修改style为true，确保加载less文件。
然后重启项目，样式文件就生效了：
五，引入路由
1，下载路由依赖包react-router-dom：
官方文档：https://reactrouter.com/web/guides/quick-start
npm install --save react-router-dom
2，新建三个页面组件
3，在入口文件index中映射路由和文件
六，引入redux
1,安装下载相关的包
npm install --save redux@3.7.2 react-redux redux-thunk
npm install --save-dev redux-devtools-extension
2，创建多个仓库，然后合并起来
3，在项目中使用并指定仓库
七，创建登陆和注册组件
1，登陆
// 用户登陆的路由组件import React from 'react'
import {NavBar,WingBlank,List,InputItem,WhiteSpace,Button
} from 'antd-mobile'
import Logo from '../../components/logo/logo'
export default class Login extends React.Component{state={username:'',password:''}//处理输入框的变化，收集数据到statehandleChange(name,value){this.setState({[name]:value})}//跳转到注册路由toRegister=()=>{this.props.history.replace('/register')}//登陆login=()=>{console.log(this.state)}render(){return (<div><NavBar>硅谷直聘</NavBar><Logo></Logo><WingBlank><List><InputItem placeholder="输入用户名" onChange={val=>this.handleChange('username',val)}>用户名：</InputItem><WhiteSpace></WhiteSpace><InputItem type='password' placeholder="输入密码" onChange={val=>this.handleChange('password',val)}>密 码</InputItem><WhiteSpace></WhiteSpace><Button type="primary" onClick={this.Login}>登 陆</Button><WhiteSpace></WhiteSpace><Button onClick={this.toRegister}>还没有账号</Button></List></WingBlank></div>)}
}
2，注册
/*用户注册的路由组件
*/
import React from 'react'
import { NavBar, WingBlank, List, InputItem, WhiteSpace, Radio, Button } from 'antd-mobile'
import Logo from '../../components/logo/logo'export default class Register extends React.Component {state = {username: '',password: '',passwors2: '',type: 'dashen',}//处理输入框/单选框的变化，收集数据到statehandleChange = (name, value) => {this.setState({ [name]: value })}//跳转到login路由toLogin = () => {this.props.history.replace('/login')}//注册register = () => {console.log(JSON.stringify(this.state))}render() {const { type } = this.statereturn (<div><NavBar>硅谷直聘</NavBar><Logo/><WingBlank><List><InputItem placeholder="输入用户名" onChange={val=>this.handleChange('username',val)}>用户名：</InputItem><WhiteSpace></WhiteSpace><InputItem placeholder="输入密码" type="password" onChange={val=>this.handleChange('password',val)}>密 码：</InputItem><WhiteSpace></WhiteSpace><InputItem placeholder="输入确认密码" type="password" onChange={val=>this.handleChange('password2',val)}>确认密码</InputItem><WhiteSpace></WhiteSpace><List.Item><span style={{marginRight:30}}>用户类型</span><Radio checked={this.state.type==='dashen'} onClick={()=>{this.handleChange('type','dashen')}}>大神</Radio> <Radio checked={this.state.type==='laoban'} onClick={()=>{this.handleChange('type','laoban')}}>老板</Radio></List.Item><WhiteSpace></WhiteSpace><Button type='primary' onClick={this.register}>注 册</Button><WhiteSpace></WhiteSpace><Button onClick={this.toLogin}>已经有账号</Button></List></WingBlank></div>)}
}八，封装axios
npm install --save axios
完成ajax的封装
import axios from 'axios'
export default function ajax (url='',data={},type='GET'){if(type=== 'GET'){let dataStr=''Object.keys(data).forEach(key=>{dataStr +=key+'=' +data[key]+'&'})if(dataStr !==''){dataStr=dataStr.substring(0,dataStr.lastIndexOf('&'))url=url+'?'+dataStr}return axios.get(url)}else{return axios.post(url,data)}
}
react学习笔记--一--移动端项目搭建相关推荐
- 「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析 前言 一.我的开发环境 二.使用 Vue CLI (Vue 脚手架)快速搭建项目 三.初始项目的目录结构 ...
- react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
- 魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息（meta）、开发准备、移动端项目搭建（模拟器调试）、APICloud（APICloud 前端框架，获取服务端API接口）
一.移动端开发相关概念 1.APP类型 ①.Native APP Native APP又称原生APP,就是我们平时说的手机应用软件. 原生APP 是针对IOS.Android.Windows等不同的手 ...
- nginx学习笔记-01nginx入门，环境搭建，常见命令
nginx学习笔记-01nginx入门,环境搭建,常见命令 文章目录 nginx学习笔记-01nginx入门,环境搭建,常见命令 1.nginx的基本概念 2.nginx的安装,常用命令和配置文件 3 ...
- React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
- 华芯微特SWM181学习笔记--GPIO应用与环境搭建
华芯微特SWM181 系列 32 位 MCU(以下简称 SWM181)内嵌 ARM® CortexTM-M0 内核, SWM181 支持片上包含精度为 1%以内的 24MHz.48MHz 时钟,并提供 ...
- 迪文屏幕T5L平台学习笔记一：开发环境搭建注意事项
前面一直用T5UID3平台的屏幕开发,但是吐槽下<DWIN C Compiler 1>编译器bug太多,项目能不能做好,全靠运气:售后说T5L平台支持keil开发,我感觉挺好,于是从新学习 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
- React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升 假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步 好,下面我们先来封装一个输入框组件 ...
最新文章
- 复旦教授：在一般院校里，我可能连当副教授都不够格
- TiP：湖大于峰组综述病原体分泌的宿主模拟物在植物病害发展中的新作用！...
- sublime的安装
- 【收藏】docker安装redis
- 学习Python的几个必要条件，你具备吗？
- mysql备份时候事务日志_SQLSERVER备份事务日志的作用
- Ubuntu18.04 安装Nvidia驱动
- 会声会影背景轨中的所有效果和素材导出为html5格式导入不,如何解决会声会影导入导出的格式问题？...
- 20190501-整数翻转
- PHP100个知识点之2 日期时间(一)
- 转：全栈工程师的知识栈列表
- [2018.11.03 T2] 执行任务
- jdk下载和安装教程
- Git客户端Tower for Mac 8.2
- VB对象的事件和方法
- Hackthebox入门
- 新生代公链再攻「不可能三角」
- OpenCASCADE 读写STEP文件
- u盘在电脑上读不出来？不一定是坏了
- 全局zomm缩放后echarts鼠标偏移的问题(鼠标触发提示框位置有偏差)