zoukankan      html  css  js  c++  java
  • 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:

    运行结果:

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

  • 相关阅读:
    pdf工具类之合并pdf文件
    Java 处理不可见特殊字符的坑
    将本地的jar包加到maven中,pom添加依赖
    SQLServer常用个技巧(一):根据某字符截取后面的字符串,String转int
    java下载文件写的工具类
    使用SWFTools将pdf转成swf
    使用openOffice将office文件转成pdf
    poi处理excel基本操作时写的工具类
    poi处理excel的合并单元格写的工具类,支持xlsx和xls
    java有关正则表达式的工具方法集合1
  • 原文地址:https://www.cnblogs.com/yjiangling/p/10187043.html
Copyright © 2011-2022 走看看