首页 > 其他分享 >react基础知识

react基础知识

时间:2022-08-18 00:00:19浏览次数:69  
标签:dom 基础知识 react https org hello VDOM

react是一个将数据转换为html的js库

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

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

用react渲染一段文字:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello-react</title>
</head>
<body>
  <!-- 准备一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.min.js"></script>
  <!-- 引入react-dom, 用于支持react操作dom, 需要在核心库之后引入 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script>
  <!-- 引入babel.js,用于将jsx转化为js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.18.7/babel.min.js"></script>

  <script type="text/babel">/* 此处一定要写babel */
    // 1.创建虚拟dom
    const VDOM = <h1>hello, react</h1> /* 此处不要写引号,因为不是字符串 */
    // 2.渲染虚拟dom到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>

 

标签:dom,基础知识,react,https,org,hello,VDOM
From: https://www.cnblogs.com/fqh123/p/16597283.html

相关文章

  • React报错之Expected `onClick` listener to be a function
    正文从这开始~总览当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listenertobeafunction"报错。为了解决该报错,请确保只为元......
  • 【2022-08-17】mysql基础知识(四)
    mysql基础知识(四)mysql之操作表的多条SQL语句修改表名普通方法:altertabletest1renametest;进阶方法:renametabletesttotest1;可同时修改多个:renam......
  • python菜鸟学习: 8. 集合基础知识
    #-*-coding:utf-8-*-#列表的特性:1,去重;2.关系测试list1=[1,4,6,8,7,8,9]#集合去重list2=set(list1)print(list2)list4=[1,3,5,7,9,11]list3=set(l......
  • React报错之Type '() => JSX.Element[]' is not assignable to type FunctionComponen
    正文从这开始~总览当我们尝试从函数组件中返回元素组成的数组时,会产生"Type'()=>JSX.Element[]'isnotassignabletotypeFunctionComponent"错误。为了解决该错误......
  • React 高阶组件
    高阶组件(HOC)高阶组件(HeigherOrderComponent)也被称之为高阶函数,容器组件,高阶组件是类组件编程中的一种重要代码逻辑复用技巧。高阶组件的语法接收一个React组件作为入......
  • 前端 | HTML5基础知识
    1HTML定义HTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。<strong>加粗字体</s......
  • React 上下文
    在React中上下文是一种通信方案。上下文的特点在组件树中,是一种自上而下的单向数据流通信方案,数据只能从父组件注入,在子组件中访问。组件关系只要满足“父组件-后代组......
  • 【2022-08-16】mysql基础知识(三)
    mysql基础知识(三)约束条件之主键作用:1、单从约束条件上而言主键相当于notnull+unique(非空且唯一)2、主键的功能目前简单的理解为能够加快数据的查询速度,相当于字......
  • React 项目中配置 `@` 符号来代替 `src` 目录
    1.主要是修改两个配置文件:craco.config.js和tsconfig.json。//craco.config.jsconstpath=require("path");//定义函数resolve,将你想要自定义的路径和js的根路......
  • React自定义组件参数小驼峰命名提示警告 Warning: React does not recognize the `xx
    Warning:Reactdoesnotrecognizethe`xxXxx`proponaDOMelement.IfyouintentionallywantittoappearintheDOMasacustomattribute,spellitaslower......