React17 系统精讲结合TS打造旅游电商平台 react.js

引入准绳：

body区域

实践上线用babel停止转换
bable src --out-dir build
ReactDOM.render()
示例：
ReactDOM.render(
hello world!,
document.getElementById('example');
)
JSX语法
var names =['Alice','Emily','Kate'];
ReactDOM.render(

{

names.map(function(name){ return Hello,{name}! })

}
,
document.getElementById('example')
);
JSX允许在模板中直接插入JavaScript变量
var arr = [
Hello world!,
React is awesome
];
ReactDOM.render(
{arr},
document.getElementById('example')
);
组件
React.createClass用于生成一个组件类
var HelloMessage = React.creatClass({

render:function(){ return Hello {this.props.name}; }

});
ReactDOM.render(
,
document.getElementById('example')
);
组件的第一个字母必需大写
组件只能包含一个顶层标签
class属性需求写成className
this.props.children
this.props.children 表示组件一切的子节点
var NoteList = React.createClass({
render:function(){

return( { React.Children.map(this.props.children,function(child){ return {child} }) } ); }

});
ReactDOM.render(

hello World

,
document.body
);
运用React.Children.map来遍历子节点，不用担忧this.props.children的数据类型
PropTypes
考证实例的属性能否契合请求
var MyTitle = react.createClass({
propTypes:{

title:React.PropTypes.string.isRequired, },

render:function(){

return {this.props.title} }

});
var data = https://www.it610.com/article/123;
ReactDOM.render(
,
document.body
);
getDefaultProps能够用来设置组件属性的默许值
getDefaultProps:function(){
return {

title: 'Hello World' };

}
获取真实的DOM节点
有时需求从组件中获取真实的DOM节点，需求用到ref属性。
var MyComponet = React.CreatClass({
handleClick:function(){

this.refs.myTextInput.focus();

},
render:function(){

return ( ); }

});
ReactDOM.render(
,
document.getElementById('example')
);
指定click事情回调函数，确保DOM真实渲染后触发，除此还支持KeyDown等事情
this.state
组件视为状态机，用户互动，状态变化，重新渲染UI。
var LikeButton = React.CreatClass({
getInitialState:function(){

return {liked:false}; },

handleClick:function(event){

this.setState({liked: !this.state.liked}); },

render:function(){

var text = this.state.liked? 'like':'haven\'t liked'; return(You {text} this. Click to toggle. ); }

});
ReactDom.render(
,
document.body
);
this.props表示一旦定义不再更改的属性，this.state表示随用户互动产生变化的特性。
表单
var Input = React.createClass({

getInitialState:function(){ return {value:'Hello!'}; }, handleChange:function(event){ this.setState({value:event.target.value}); }, render:function(){ var value = https://www.it610.com/article/this.state.value; return ({value} ); }

});
ReactDOM.render(,document.body);
这里获得输入框的值没有运用this.props.value,选用了event.target.value。
组件的生命周期
Mounting: 已插入真实DOM
Updating: 正在被重新渲染
Unmounting:已移除真实DOM
var Hello = React.createClass({

getInitialState:function() return { opacity:1.0 } },compontentDidMount:function(){ this.timer = setInterval (function() { var opacity = this.state.opacity; opacity -= .05; if(opacity < 0.1){ opacity = 1.0; } this.setState({ opacity:opacity }); }.bind(this),100); }, render: function(){ return (Hello {{this.props.name}); }

});
ReactDOM.render(
,
document.body
);
bind(this)——原生JS写法。
Ajax
运用compontentDidMount办法设置Ajax恳求
var UserGist = React.createClass({

getInitialState:function(){ return { username:'', lastGistUrl:'' } },componentDidMount: function(){ $.get(this.props.source,function(result){ var lastGist = result[0]; if(this.isMounted()){ this.setState({ username:lastGist.owner.login, lastGistUrl:lastGist.html_url }); } }.bind(this)); },render:function(){ return ({this.state.username}'s last gist is here.); }

});
ReactDOM.render(

, document.body

);
把其他途径获取的对象传入组件
ReactDOM.render(

, document.body

);
var RepoList = React.createClass({

getInitialState: function(){ return { loading:true, error : null , data : null} },componentDidMount(){ this.props.promise.then( value => this.setState({loading:false,data:value}), error => this.setState({loading:false,error:error})); },render:function(){ if(this.state.loading){ return Loading… } else if(this.state.error !== null){ return Error: {this.state.error.message}; } else{ var repos = this.state.data.items; var reposList = repos.map(function(repo){ return ( {repo.name} ); }); return ( Most Popular JavaScript Projects in Github {repoList} ); } }

【React17 系统精讲结合TS打造旅游电商平台】});