一 安装打包
1.npm install yo -g
yo --version
2.npm install generator-react-webpack -g
yo react-webpack demo
3.webpack编译
二 组件传值
1.父向子传值
父组件
import BodyChilld from './bodychild'
handleChildValueChange(event){
this.setState({age:event.target.value});
}<BodyChilld handleChildValueChange={this.handleChildValueChange.bind(this)}/>子组件
render(){
return(
<div>
<p>子页面输入：<input type='text' onChange={this.props.handleChildValueChange} /></p>
</div>
)
}2.子向父传值
父组件
<ComponentBodyIndex userId={123456} />子组件
<p>userId:{this.props.userId}</p>3.不传值
constructor(){
super();//调用基类的所有的初始化方法
this.state={username:'Parry',age:20};//初始化赋值
}<p>username:{this.state.username} </p>
<p>{this.state.age}</p>4.设定接受的值
BodyIndex.propTypes = {
userId: React.PropTypes.number //接受number类型
}BodyIndex.propTypes = {
userId: React.PropTypes.number.isRequired //这个值是必须的5.设定默认值
const defaultProps = {
username:'这是一个默认的用户名'
}BodyIndex.defaultProps = defaultProps;
6.子组件向子子组件传递父组件所有值
<BodyChilld {...this.props} id={4} />// {...this.props} 为子组件的所有值 id={4}为自定义三 refs
不可滥用，要用在render之后
<input id="submitButton" ref="submitButton" type='button' value='提交' />
// 第一种方式
// var mySubmitButton = document.getElementById('submitButton');
// console.log(mySubmitButton); <input type="button" id="submitButton" value="提交" style="color: red;">
// ReactDOM.findDOMNode(mySubmitButton).style.color='red';
// 第二种方式
console.log(this.refs.submitButton); <input type="button" id="submitButton" value="提交" style="color: red;">
this.refs.submitButton.style.color='red';
四 mixin
外部mixin.js文件
const MixinLog = {
log(){
console.log('这是mixins文件');
}
}
export default MixinLog其他组件导入
import ReactMixin from 'react-mixin'
import MixinLog from './mixins'
ReactMixin(BodyIndex.prototype,MixinLog);
MixinLog.log(); //具体在哪里可以调用
五 样式
1.行内样式
render(){
const styleComponentHeader = {
header:{
backgroundColor:'#333',
color:'#fff',
'padding-top':'15px', //不推荐，有错误警告
paddingBottom:'15px'
}
}
return (
<header style={styleComponentHeader.header}>
<h1 >头部</h1>
</header>
)
}2.外联样式
新建style.css
.smallFontSize h1{ //:local(.smallFontSize)默认为不污染全局 :global(.smallFontSize)为全局
font-size: 12px;
color: pink;
}引用
<header className="smallFontSize" >
<h1 >头部</h1>
</header>
首页
<link rel="stylesheet" href="./src/style/style.css">
3.样式表达式
export default class ComponentHeader extends React.Component{
constructor(){
super();
this.state={
miniHeader:false //默认加载的时候是高的头部
}
}
switchHeader(){
this.setState({
miniHeader: !this.state.miniHeader //点击的时候进行样式切换
})
}
render(){
const styleComponentHeader = {
header:{
backgroundColor:'#333',
color:'#fff',
paddingTop: (this.state.miniHeader) ? '3px' : '15px',
paddingBottom:(this.state.miniHeader) ? '3px' : '15px'
}
}
return (
<header style={styleComponentHeader.header} className="smallFontSize"
onClick={this.switchHeader.bind(this)}
>
<h1 >头部</h1>
</header>
)
}
}3模块化
下载这三个包
"babel-plugin-react-html-attrs":"^2.0.0", //解决react样式不能用原始的class而要用className
"style-loader":"^0.13.1",
"css-loader":"^0.25.0"
webpack.config.js
query: {
presets: ['react','es2015'],
plugins:['react-html-attrs'] //天假组件的插件配置
}//下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' //这里模块化 webpack对class进行了哈希处理
},
页面的调用
var footerCss = require("../../style/footer.css");render(){
console.log(footerCss);
return (
<footer className={footerCss.minFooter}>
<h1>页脚，版权信息</h1>
</footer>
)
}create-react-app脚手架需要手动 npm run eject开启默认不显示的webpack隐藏配置文件
在webpack.config.dev.js
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true, // 新增对css modules的支持
localIdentName: '[name]__[local]__[hash:base64:5]', //
},
},
4.ant-design的使用
取消webpack.config.dev.js 的css modules的支持;
antd 和 css modules 不能混用，看知乎大神说 可以; https://segmentfault.com/a/1190000011225917
https://ant.design/components/input-cn/
webpack.config.js
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react','es2015'],
plugins:['react-html-attrs'] //添加组件的插件配置
}
},
//下面是使用 ant-design 的配置文件
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
]
父组件index.js
import 'antd/dist/antd.css';
子组件按需加载
import { Input } from 'antd'<Input type="text" placeholder="basic usage"/>
四 路由
1.安装react脚手架
cnpm install -g create-react-app
npm config set registry https://registry.npm.taobao.org -- 配置后可通过下面方式来验证是否成功 npm config get registry -- 或npm info express
2.create-react-app my-app
3.页面跳转 react-router 3.0.0
import { Router,Route,hashHistory } from 'react-router'
import List from './js/components/list'
import Detail from './js/components/detail'return(
// 这里替换了之前的Index变成了程序的入口
<Router history={hashHistory}>
<Route component={App} path="/">
<Route component={Detail} path="detail"></Route>
</Route>
<Route component={List} path="/list/:id"></Route> //接受id参数
</Router>
);
4.点击跳转
import {Link} from 'react-router'<ul>
<li>
<Link to={'/'}>
首页
</Link>
</li>
<li>
<Link to={'/detail'}>
嵌套的详情页
</Link>
</li>
<li>
<Link to={'/list/1234'}> //页面传递参数
列表页
</Link>
</li>
</ul>
list.js
import React from 'react'
export default class List extends React.Component{
render(){
return(
<div>
<h2>这里是列表页面 Id: {this.props.params.id}</h2> //展示传递的id
</div>
);
}
}
移动端适配
npm install react-responsive --savehttps://github.com/contra/react-responsive
import MediaQuery from 'react-responsive'; const Example = () => ( <div> <div>Device Test!</div> <MediaQuery query="(min-device-width: 1224px)"> <div>You are a desktop or laptop</div> <MediaQuery query="(min-device-width: 1824px)"> <div>You also have a huge screen</div> </MediaQuery> <MediaQuery query="(max-width: 1224px)"> <div>You are sized like a tablet or mobile phone though</div> </MediaQuery> </MediaQuery> <MediaQuery query="(max-device-width: 1224px)"> <div>You are a tablet or mobile phone</div> </MediaQuery> <MediaQuery query="(orientation: portrait)"> <div>You are portrait</div> </MediaQuery> <MediaQuery query="(orientation: landscape)"> <div>You are landscape</div> </MediaQuery> <MediaQuery query="(min-resolution: 2dppx)"> <div>You are retina</div> </MediaQuery> </div> );
发表评论：