React入门(1)

今天继续来学习react

首先,先写几个小demo来感受一下什么是react,以及react的语法规则,来建立对react的一个总体认识

   上demo:

demo01:

demo01涉及的知识点有:

1.1 渲染根组件
ReactDOM.render(a,b) 将第一个参数渲染到第二个参数所指定的元素
1.2 babel 编译器
将es6 jsx等高级语法转换为多数浏览器能识别的语法
具体参考:https://www.babeljs.cn/repl

 demo02:

demo02涉及的知识点:

2.1jsx语法

(1)什么是jsx?

将 HTML 直接嵌入了到JS 代码里面,这个就是 React 提出的一种叫 JSX 的语法,这应该是最开始接触 React 最不能接受的设定之一,因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。

 (2)jsx语法:

1、允许在js中写标签
2、允许通过花括号来执行表达式

注意:
1、在jsx中,渲染内容,不允许直接渲染多个,可以放在一个容器中(如第一个参数中的div容器)
2、每个元素都得有开始和结束标记(有点类似于xml语法,纯属个人观点)

为了巩固一下刚刚学习的知识点,再写一个小demo

demo04: 使用react,向视图中渲染一个无序列表,3个列表项

      

运行效果:

接下来讲讲react的核心重点------组件

 创建方法:

var Test = React.createClass({
render:function(){
return 渲染的元素
 }
})
 调用方法:
<Test></Test>

看一下demo04:

组件在创建和使用时的注意事项:
①组件类的名称要遵循全驼峰(大驼峰)式的命名方式
②组件类的模板中,render渲染时,第一个标签不建议换行,否则是会报错的(解决方案:可以写个圆括号括起来)
③如果渲染多个元素,放在同一个容器中

再来一个小练习demo05:

运行结果:

好了,今天先学到这里,明天继续学习。加油!

猜你喜欢

转载自www.cnblogs.com/yjiangling/p/10187043.html
今日推荐