从阮老师的13个demo开始
demo
- 说明:
上面代码一共用了三个库。它们必须首先加载。
react.js是react的核心库;react-dom.js提供和dom相关的功能;browser.min.js是把jsx语法翻译成js语法用的,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。
ReactDOM.render()
- 说明:ReactDOM.render是React最基本的方法。
- 作用:把模板转为 HTML 语言,并插入指定的 DOM 节点。
ReactDOM.render(dom节点,容器) ==> 整合在一起,变成完整的html。
- PS: 记住,DOM全大写!!方法名不要写错了!
JSX语法
- 说明: JSX语法允许 HTML 语言直接写在 JavaScript 语言之中,不加任何引号,混合写。
- 语法规则:遇到
<
就用HTML 规则解析;遇到{
就用 JavaScript规则解析;
组件
说明:组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构。叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。
- 注意:
1、组件的命名必须用大驼峰!不然用不了。
2、组件里面只允许出现1个html标签!不然会报错。
3、如果要用到html的class和for属性,要写成className、htmlFor(因为class和for是js的保留字,你们懂得。)
this.props.children
- 说明:代表 组件的 所有子节点
- 注意:
若当前组件没有子节点则,它就是undefined
若.....有一个子节点,它就是object
若.....有多个子节点,它就是array
我们可以用 React.Children.map 来遍历子节点。用法参考官方文档
组件的PropTypes属性
- 作用:验证 组件实例的属性是否符合要求
- 更多使用查看官方文档
组件的getDefaultProps属性
this.state
demo09:
定义一个 onChange 事件的回调函数,event.target.value 读取用户输入的值.
优质内容筛选与推荐>>
1、如何向犬发号施令2、【ecshop---新增包邮卡功能】3、触发器-- 肖敏_入门系列_数据库进阶 60、触发器(三) --youku4、Layui使用table展示数据5、My 2D Sketch-Based 3D Shape Retrieval