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学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升 假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步 好,下面我们先来封装一个输入框组件 ...
最新文章
- TensorFlow 等“开源陷阱，会掐住中国 AI 企业的命门吗？
- 基于Pytorch再次解析使用块的现代卷积神经网络（VGG）
- Java递归基础案例-汉诺塔
- JS 清空table
- SVN快速入门3——整合eclipse（1）
- HTML5 — 知识总结篇《V》【a元素】
- ocr常用数据集介绍
- echarts柱状图渐变色
- 常见笔记本CPU型号参数和性能对比一览表
- BUCK电源芯片做升压电源的方法（1）
- python大数据需要什么技术有前途_大数据就业前景好不好 一般要掌握哪些技术...
- ttlink无线打印服务器,TTLINK TT-180U1打印机服务器 TCP/IP添加打印机的教程
- vs2015不使用方向键移动光标快捷键
- 【概率图与随机过程】25 从有向到无向：谈谈条件随机场
- 微信服务号前端页面开发总结
- 小猿圈分享免费自学编程的10个网站
- Tigo Energy通过Stark Renováveis安装案例向巴西安装商展示优化技术
- JS中的函数概念和C语言的概念是类似的,c语言和JavaScript的区别有哪些？
- 活性氧Propiconazole-d3 (nitrate)，CAS No. 2699607-26-4
- 用计算机搞音乐,用电脑键盘做音乐