学习reactJS笔记
来源:互联网 发布:费迪南德拳击 知乎 编辑:程序博客网 时间:2024/05/16 09:46
<script type="text/jsx">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('a3')
);
</script>
直接用于将基础模板转为 HTML 语言,并插入指定的 DOM 节点。
var names = ['alice','emily','kate'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>hello,{name}!!~~~~</div>
})
}
</div>,document.getElementById('a3')
);
定义一个模板,插入指定的 DOM 节点,这个模板可以是任何模式,但当需要插入的节点有样式时,模板的样式起到了增强效果
在定义模板时,当模板变量为数组或其他时,刚学习时发现有已下两种方式使用模板:
1,定义变量时,可以定义内容并定义html标签也可以不定义html标签,但是在render中必须要用html标签包裹(个人理解为格式规则,类似格式规则也有,在reactJS中html标签以<开头,代码块以{开头。)
2,render中前一个为html格式,后一个必为document代码块格式
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
} 定义组件并设置需求变量
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
); 定义模板,当模板采用组件形式时,也可以设置相关属性,并注意相关格式
</script>
<script type="text/jsx">
var kai = 333; 定义变量
var Yang = React.createClass({ 组件
propTypes:{ propTypes属性验证这个属性为必须,以逗号间隔
title:React.PropTypes.string.isRequired
},
render:function(){
return <small>{this.props.title}</small>;
}
});
ReactDOM.render(
<Yang title={kai}/>,
document.getElementById("a3")
);
</script>
<script type="text/jsx">
var Kai = React.createClass({
getDefaultProps:function(){
return { 定义默认输出
title:'hello'
}
},
render:function(){
return <p>{this.props.title}</p>
}
})
ReactDOM.render(
<Kai/>, 模板中没有定义取值
document.getElementById('a3')
)
</script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('a3')
);
</script>
直接用于将基础模板转为 HTML 语言,并插入指定的 DOM 节点。
var names = ['alice','emily','kate'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div>hello,{name}!!~~~~</div>
})
}
</div>,document.getElementById('a3')
);
定义一个模板,插入指定的 DOM 节点,这个模板可以是任何模式,但当需要插入的节点有样式时,模板的样式起到了增强效果
在定义模板时,当模板变量为数组或其他时,刚学习时发现有已下两种方式使用模板:
1,定义变量时,可以定义内容并定义html标签也可以不定义html标签,但是在render中必须要用html标签包裹(个人理解为格式规则,类似格式规则也有,在reactJS中html标签以<开头,代码块以{开头。)
2,render中前一个为html格式,后一个必为document代码块格式
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
} 定义组件并设置需求变量
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
); 定义模板,当模板采用组件形式时,也可以设置相关属性,并注意相关格式
</script>
<script type="text/jsx">
var kai = 333; 定义变量
var Yang = React.createClass({ 组件
propTypes:{ propTypes属性验证这个属性为必须,以逗号间隔
title:React.PropTypes.string.isRequired
},
render:function(){
return <small>{this.props.title}</small>;
}
});
ReactDOM.render(
<Yang title={kai}/>,
document.getElementById("a3")
);
</script>
<script type="text/jsx">
var Kai = React.createClass({
getDefaultProps:function(){
return { 定义默认输出
title:'hello'
}
},
render:function(){
return <p>{this.props.title}</p>
}
})
ReactDOM.render(
<Kai/>, 模板中没有定义取值
document.getElementById('a3')
)
</script>
0 0
- reactjs学习笔记1
- ReactJs学习笔记
- ReactJS学习笔记:动画
- ReactJS学习笔记:表单
- reactjs学习笔记
- reactjs学习笔记
- 学习reactJS笔记
- ReactJS学习笔记七:表单
- ReactJS学习笔记八:动画
- 个人学习笔记 ReactJS part1
- ReactJS学习笔记六:感想
- ReactJS学习笔记七:表单
- reactjs学习笔记2--组件的介绍
- ReactJs笔记
- ReactJs 学习
- ReactJs学习
- Reactjs相关实例学习【Reactjs】
- ReactJS学习笔记(一)-深入理解ReactJS的面向组件即对象
- Java用循环链表写的约瑟夫环
- 3.25日天梯赛大区赛lv1题解
- 3.0spring框架学习(三)junit单元测试
- centos7第一次安装jdk centos系统为Minimal版本也就是纯净版的
- 高德地图
- 学习reactJS笔记
- linux runtime pm机制的深入理解
- CenteOS6.5下Redis安装踩过的坑
- Linux高级IO
- hihocoder #1153 : Numeric Keypad
- 回溯法解n后问题
- CDR如何将绘图页面指定对象保存为JPG格式
- UIButton高亮(highlighted)下的边框颜色(borderColor)
- 软件性能测试的本质