开始react

慎H

于 2020-12-24 22:12:43 发布

阅读量189

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_44743897/article/details/111643376

版权

React 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、React简介

1、官网

英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/

2、介绍

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

3、react的特点

声明式编码
组件化编码
React Native 编写原生应用
高效（优秀的Diffing算法）

2、react的基本使用

引入react核心库，提供DOM操作的核心库，解析JSX语法的代码转换成纯js的语法代码的库。
创建虚拟DOM
将虚拟DOM渲染到页面上

<div id="test"></div>
<!--react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--提供DOM操作的核心库-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--解析JSX语法的代码转换成纯js的语法代码的库-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*告诉babel去解析*/
    //1.创建虚拟DOM元素对象
   var vDom = <h1>Hello React!</h1>
    // 2.将虚拟DOM渲染到页面DOM容器中
    ReactDOM.render(vDom, document.getElementById('test'))

    var vd=<h2>wode1</h2>
    ReactDOM.render(vd,document.getElementById('test1'))
</script>

jsx语法：1、定义虚拟dom不写引号
2、标签中混有js表达式时要用{}
3、样式的类名指定不要用class，要用className
4、内联样式，要用style={{color:‘blue’}}
5、虚拟DOM只能有一个根标签
6、标签必须闭合
7、标签首字母
（1）若首字母小写则将该标签转为html匹配，若无就报错
（2）若首字母大写，则去compent组件里面找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态展示列表</title>
</head>
<body>
<h2>前端js列表</h2>
<div id="example"></div>
<div id="qw"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/babel">
    /*
    * 动态展示列表*/
    //创建一个数组存列表
    const  names=['jquery','zepto','angular','react','vue']
    //创建虚拟DOM
   const ul=(
       <ul>
           {
               names.map((names,index)=><li key={index}>{names}</li>)
           }
       </ul>
   )

    //渲染虚拟DOM
    ReactDOM.render(ul,document.getElementById('example'))

    const age=[13,12,34,45]

    const ul1=(
        <ul>
            {
                age.map((age,index)=><li key={index}>{age}</li>)
            }
        </ul>
    )
    ReactDOM.render(ul1,document.getElementById('qw'))
</script>
</body>
</html>