loading...

0

react起航

其他读完大概需要16分钟

  • 发布时间:2017-09-14 15:18 星期四
  • 刘伟波
  • 200
  • 更新于2018-04-25 22:54 星期三

一 安装打包

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 --save

https://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>
);




你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!