React基础知识

React基础知识
1、React组件基础
1、React虚拟dom概念，这是React性能高效的核心算法
2、React组件，理解什么叫做组件化
3、React多组件的嵌套
4、JSX内置表达式
5、生命周期，纵观整个React的生命周期
2、React属性和事件
1、State属性，控制着React的一切
2、Props属性
3、事件与数据的双向绑定，包含了父子页面之间的参数互传
4、可复用组件，真正让React开发快速、高效的地方
5、组件的Refs
6、独立组件间的共享Mixins
3、React样式
1、内联样式
2、内联样式的表达式
3、css模块化，学习如何使用require进行样式的引用
4、JSX样式与CSS的互传
5、一个非常好用的样式框架Ant Design样式框架的介绍
6、Ant Design样式框架的使用
4、ReactRouter
1、Router概念
2、Router参数传递


5、项目实战部分
1、开发环境的初始化->logo的选择->样式库的选择->数据接口API的定义->页头页脚的响应式开发
->登陆注册模->首页列表详情模块->评论收藏模块->个人中心的实现
https://github.com/enaqx/awesome-react //开源的能量
https://facebook.github.io/react/blog/all.html //博客的地址（这里面会有每一个版本的一个一个介绍）
https://facebook.github.io/react/docs/installation.html
https://babeeljs.io //es6/es5的学习
http://kangax.github.io/compat-table/es5/ //学习兼容性的一个网站


http://tool.chinaz.com/tools/unicode.aspx //unicode转码
https://cdnjs.com/libraries/react/ //react的版本




一、环境的搭建（用nodejs的npm包来管理（现在前端比较好的技术都是会基于nodejs里面的npm包来弄的）
1、node --version/npm --version(看看有没有安装成功)


2、装淘宝镜像：输入cmd，然后输入npm install cnpm -g --registry=https://registry.npm.taobao.org回车，
然后下载的时候就用cnpm淘宝源和npm的区别是npm用户可以读写的，但是淘宝原只能够读不能够写


3、 npm init (创建package.json这个文件)
cnpm i react react-dom babelify babel-preset-react babel-preset-es2015 babel-loader --save


4、webpack热加载的配置:全局的安装webpack  和webapck-dev-server(这个是开发的服务器)
cnpm i webpack -g   cnpm i webpack-dev-server -g
全局安装完成之后，还需要在当前的项目中文件夹安装一次
cnpm i webpack -save   cnpm i webpack-dev-server -D


先配置webpack.config.js文件，然后在命令行输入webpack然后会打包出来一个bunddle.js文件


开启服务的几种方法：
1、然后执行webpack命令后就可以在浏览器中看到页面，但是很不好的是每一次改变之后都需要
去重新在命令行里输入webpack编译一次

2、webpack --watch(作用是用来盯着数据变化的，但是不实用，因为还需要手动的刷新浏览器)


3、自动给你跟新的方式是命令行书写webpack-dev-server
然后在浏览器里面访问http://localhost:8082/webpack-dev-server/


4、上面的访问后面有一个尾巴，而且页面顶端还有一个app.ready的样式，不好调试，所有也不用


5、webpack 


（weback:bundle is now VALID）




5、react的脚手架https://www.rails365.net/articles/kai-fa-react-ying-yong-zui-hao-jiao-shou-jia-create-react-app

react环境的搭建（1019这个目录下）
http://www.cnblogs.com/zamhown/p/6428050.html?utm_source=itdadao&utm_medium=referral




二、开发工具atom： https://atom.io https://github.com/atom/atom
react开发的必要插件配置  atom-ternjs（对es5/es6的相关支持）
atom-beautify(自动格式化好)
file-icons open in browser   emmet(快捷键)  highlight-line  highline-selected


三、react基础概念：
1、虚拟dom的结构：app---react virtual Dom---dom(在app的源码和dom之间多采用了一部虚拟dom)


2、为什么快：原生的获取dom的速度比较的慢，而通过虚拟dom就可以比较快


3、如何实现的：虚拟dom通过diff然后path，使得浏览器只是更改了相应的一个dom
（只是对自己需要的模块或者组件更新，所以速度更加的快了）
------------------------------------------------------------------------------------
四、react的基础：
0.1注意只能有一个根元素
0.2组件首字母需要大写???好像不用大写
0.3外部调用的组件需要export default导出export default class Header extends React.componebt{...}
1、react组件的写法
class IndexComponent extends React.Component{
//如果是别的页面引用组件，那么需要在前面加export default class Index.....
render (){
var login=true; //已经登陆了
var header;   
if(login){
header=<Header/> //如果登陆了，加载<Header/>组件
}else{
header=<LogoutHeader/>
}
return(
<div>
{header}
<App />
    <Footer/>
</div>  
)  
}
}
ReactDOM.render(
<IndexComponent />,
document.getElementById('app')
); //这是唯一的出口


1.1三元运算符：
<p>{username==" "?"用户没有登录" : "用户名为：" + username}</p> //有点像vue里的计算属性
当用户名为空，显示用户没有登录，登陆了，就把用户名显示到页面

1.2当为传参数的时候，不需要加引号，
例如<input type="text disabled="true"/>
var boolInput=false; <input type="text disabled={boolInput}/> //传参数的时候不需要引号

1.3
在后台写html的时候需要进行unicode转码 var html="mst jy" //中间的空格需要变成unicode码
第二种方法就是<p dangerouslySetInnerHTML={{__html:html}}> //这种需要主要xxs攻击



2、生命周期：在render之后会执行下面的钩子函数
componentWillMount(){} 组件将要加载 componentDidMount 组件加载完成
componentWillUpdate 组件将要更新 componentDidUpdate() 组件更新完成
componentWillUnmount() 组件销毁



3、state：（state是组件自己的自身的属性，他不污染其他的组件）---state的更改会立即使得页面刷新
state改变的时候会自动的传给virtual dom 然后再传给dom(在chroom中console有个render方法里面有一个paint flashing)
1、先要在constructed(){ }这个函数里面  初始化state
class xxx extends React.Component{
  constructor() {
    super(); //超类/父类(调用基类的所有的初始化方法)必须要有的
    this.state = ({ height: 1006,user:'mst}}) //这里面可以传json，还有其他的的
    }
  render(){
setTimeout(()=>{ //写es5的function()会报错，但是es6语法没事
this.setState({ height: '123' })
},1500);
return (
<div>
<p>我是头部</p>
{this.state.height} //1006
</div> 
)
  }
}
修改属性的方法：this.setState({ height: event.target.value })


4、props属性（当其他的组件想传属性值给当前的组件时，就需要用到props）
传递参数：在index中调用组件<Footer/>组件的时候传参数userid={xxx}
<Footer userid={123456}/> 在调用组件的地方，写上需要传的参数或者属性
Footer组件中接收参数：<p >{this.props.userid}</p> 在组件内部用的时候的方法就是这个


可以通过传进来不同的参数来显示不同的布局
总结是：props是外来的参数，state是自己组件的参数




5、事件：this.fn.bind(this)
<input type="button" value="按钮" onClick={this.ckickfn.bind(this)} />
ckickfn（）{ alert(123) }
<input type="button" value="按钮" onClick={this.ckickfn.bind(this，99)}/>//传参数
（刚开始的时候值为99.当点击后执行clickfn这个函数）

6、props其实也就是父组件像子组件传递参数而，子组件像父组件传递参数的方法
事件：this.fn.bind(this)
<input type="button" value="按钮" onClick={this.ckickfn.bind(this)} />


6.1子组件像父组件传递参数：通过函数传参
子组件里面写<input type="text" onChange={this.props.handChidren}/> //子组件调用父页面的props的handChidren函数


父组件写handChidren函数
handChidren(event){
this.setState({ age:event.target.value})
}

父组件在调用子组件的时候的写法
<Children handchildren={this.handchildren.bind(this)}/ > //把事件传给子组件
这个时候父页面的state就会的到这个子页面的input的值

7、可复用组件（使得代码更加健壮）---比如传过来的属性是int型，其他型的就不行
在在页面的组件定义完之后进行验证
class children extends React.component{...}

属性的验证：
children.propTypes={ //验证传过来的props的值的类型
  userids:React.PropTypes.number, //父组件传的useriids是数字类型的
  req: React.PropTypes.string.isRequired //req是string的类型的，而且是必须有
}

//假如没有传userid过来，我们设置一个默认的值
const defatProps={useriids:"我是默认的值"}

children.defaultProps= defatProps;

这个时候<p>{this.props.useriids}</p>


假如父组件传了userid={aaa}给子组件了，然后子组件又要传给他的子组件则可以直接用{...this.props}
// <Children {...this.props } id={222}/ > 这个就是把父页面的所有的props属性都传给了children组件，
这个可以把爷爷的属性传给孙子，还可以自己传一些属性


8、获取ref原生的html节点（不要滥用ref）---ref是一个获取原生dom唯一比较可靠的方法
第一种原生的方法：
var myppp=document.getElementById('ppp');
  ReactDOM.findDOMNode(myppp).style.color='red'
<p id="ppp">2565</p>

第二种方法--ref：
<p id="ppp" ref="subp>2565</p>
console.log(this.refs.subp) //这就是获取了p标签



需要注意的点：  refs会自动销毁对子组件的引用
不要在render或者render之间对Refs进行调用


9、独立组件之间事件的共享Mixins(组建间的事件的共享---有一些共同的函数，希望在很多组件之间共享)
下载npm i react-mixin --save（在es6下使用需要安装mixin插件）
// import ReactMixin from 'react-mixin'
// import mixins from '../minxins.js' //这里面是定义的公共的事件的js文件
const MixinsLogFn={ //minxins.js里面定义的函数
mst(){
alert('mixins);
}
}
ReactMixin(Header.prototype,mixins) //在需要用到mix的组件写上这个

然后在需要的地方引用就可以了
MixinsLogFn.mst(); //这样就在组件里面调用了mst()函数了

10、css的写法
css命名的规范：dialog_confirm-button-highlight
模块_按钮或者属性-功能

1、写成变量的方式：------这种是加的内联样式（而且动画和伪类不能用）---不常用，写在业务逻辑部分，不好看
render(){ //写在render里面
const ComponentHeder={
header:{
backgroundColor:'red', //驼峰
color:(this.state.cssValue)?'white':'green'
}
}

return(
<div  style={ComponentHeder.header}>
)
}

第一种在react-native中会用到，但是在网页中一般不这样用，用第二种

2、在外部写css,然后在import './header.css'引入，然后在需要用的地方加className
在index.html中全局引入 <link rel="stylesheet" type="text/css" href="./src/css/style.css"/>
在header组件中使用的时候，注意是 className 不是 class
<h1 className="smallfontsize">123456</h1>


3、内联样式中的表达式
可以和状态state配合三元运算来使用
render(){ //写在render里面
const ComponentHeder={
header:{
backgroundColor:'red', //驼峰
color:(this.state.cssValue)?'white':'green' //cssValue为true的时候为white
}
}
return(
<div  style={ComponentHeder.header}>
)
}

4、css的组件化（保证自己模块的样式，不影响其他的模块）
1、哪一块的需要改变样式的时候只是引入这一部分的css
2、同命名的情况下也不会相互影响
解决了问题：
1、css全局污染
2、命名混乱
3、依赖管理不彻底
4、无法共享变量
5、代码压缩不彻底

优点： 1、所有的样式都是local的，解决了命名的冲突和全局污染的问题
2、class名生成规则配置灵活，可以以此来压缩class名
3、只是需要引用组件的js就可以搞定组件的所有的js和css
----------------------------------------------------------------------
首先需要先加载三个包，css-loader style-loader babel-plugin-react-html-attrs(这个是使得我们可以用class而不是clsaaName)
之后在webpack.config.js中配置
query: {
                    presets: ['react', 'latest'],
                    presets:['react-html-attrs'] //添加组件的配置插件----配置这个会报错？？？
                }

//下面是添加的 css 的 loader，也即是 css 模块化的配置方法，大家可以拷贝过去直接使用
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
//后面这一部分是css的一个规则
},


在需要用到样式的地方引入
const headerCss = require ("../css/header.css")
然后在我们的组件或者标签里面使用
<h2 class={headerCss.minheader}>css模块化开发</h2>
//但是这个class会报错Invalid DOM property `class`. Did you mean `className`?
//改成了className 也会报错


4.1 jsx样式与css的互相转换
有一个网站可以快速转换，把css写在render里面，就像第一种
http://staxmanade.com/CssToReact/

5、Ant Design样式框架的介绍（对）
1、Material-UI(www.material-ui.com谷歌出的，主要是做react的样式管理)

2、Ant Design（https://ant.design/index-cn阿里出的）
cnpm i antd --save然后在需要使用的组件里面引入 import 'antd/dist/antd.css';
查官方文档，调用他的代码就行啦，其他的需要改样式
//webpack里面的配置
{
test: /\.css$/,
loader: 'style!css-loader' //使用ant-design的配置文件
},

6、react-router的用法http://uprogrammer.cn/ https://github.com/ReactTraining/react-router
npm i react-router --save
定义路由
<Router history={hashHistory}> //history的作用是返回的意思
<Route path="/" component={Header}>

<Route path="header " component={Header}></Route>//嵌套

</Route>

<Route path="list" component={List}></Route>

<Route path="footer" component={Footer}></Route>
</Router>

//在子页面定义路由（比如在header页面中写相应的路由）
import {Link} from 'react-router'
<ul>
<li> <Link to={'/'}>首页</Link> </li>
<li> <Link to={'/header'}>header页</Link> </li>
<li> <Link to={'/footer'}>footer页</Link> </li>
<li> <Link to={'/list'}>list页</Link> </li>
</ul>


这里面的底层的机制是：
React：state/props的变更--->component组件的变化--->ui改变
router:location,hash的变更--->router的变更--->ui改变

router的参数的传递：
<Router history={hashHistory}>
<Route path="list" component={List/:id}></Route>
</Router>

然后在List组件里面就可以使用this.props.id来获取的route传过来的参数了


----------------------------------------------------------------------------------------------------
项目开始
1、安装插件postman  https://www.getpostman.com/
2、图标的网站  www.iconfinder.com http://699pic.com/?r=3


3、ant design的用法
4、react-responsive适配移动端的写法
import MediaQuery from 'react-responsive';
<MediaQuery query='(min-device-width:1224px)'>
<Pcheader />
</MediaQuery>



<MediaQuery query='(max-device-width:1224px)'>

<Mobileheader/>

</MediaQuery>


5、cnpm i fetch -D
fetch(ajax)http://www.cnblogs.com/huilixieqi/p/6494380.html
npm i fetch --save


头条新闻免费测试数据（http://v.juhe.cn/toutiao/index?type=top&key=492734cac609c4d0181cf4e7e29c3154）

https://www.juhe.cn/docs/api/id/235 //除此之外还有快头条、极速数据、网易


postman是谷歌浏览器的一个调试插件，用来请求模拟的数据用的












图片地址是从src往下找的<img src="src/images/logo.png" alt="NewsLog" /> src='../../images/logo.png'










react报错http://blog.csdn.net/liangklfang/article/details/53694994