react 渲染 hello React

╰+哭是因爲堅強的太久メ 2021-07-24 15:47 495阅读 0赞

react为一套为视图准备的js框架
    
    引入
    	四个文件
    <script src="js/libs/browser.min.js"></script> //解析jsx语法
    <script src="js/libs/react.js"></script>
    <script src="js/libs/react-dom.js"></script> //react关于dom的操作
    <script src="js/libs/jquery-3.4.1.js"></script>
    
    (1)存在依赖关系,不能改变位置
    (2)jsx语法:javascript+xml
    (3)将script标签中type改成text/babel,babel能将es6转换成es5,还能解析jsx语法
    
    1、渲染
    	ReactDOM.render(页面添加的内容html语法(即标签等非字符串),通过dom节点获取添加的位置成为其子元素)
    	当state或props改变时,render函数都会重新执行
    	render内只能有一个根容器,使用<></>或<Fragment></Fragment>不破坏页面结构

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script src="js/libs/browser.min.js"></script>
    	<script src="js/libs/react.js"></script>
    	<script src="js/libs/react-dom.js"></script>
    	<script src="js/libs/jquery-3.4.1.js"></script>
    	<style>
    
    	</style>
    	
    </head>
    <body>
      <div class="big">
    
      </div>
    
    	<script type="text/babel">
    
    		ReactDOM.render(<div>hello react</div>,document.querySelector(".big"));
    
    
    	</script>
    	
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，495人围观）

还没有评论，来说两句吧...

相关阅读

相关 React 入门教程系列（二）——Hello React

文章目录 1. 引入相关库文件 2. 输出 Hello React 3. 检查元素 4

迈不过友情╰/ 2023年06月06日 10:35/ 0 赞/ 11 阅读

相关 react 条件渲染

在 `React` 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 `React` 中的条件渲染和 `JavaScript`

朴灿烈づ我的快乐病毒、/ 2022年12月27日 01:42/ 0 赞/ 236 阅读

相关 react 渲染数组_了解如何在React中渲染数组

react 渲染数组介绍 (Introduction) This article will teach you how to render an array in R

忘是亡心i/ 2022年11月28日 15:25/ 0 赞/ 375 阅读

相关 React 延迟渲染

props 改变后如何让组件在1s后才进行渲染呢？？不多说，上代码 shouldComponentUpdate(nextProps: Readonly<{ isLoa

梦里梦外;/ 2022年09月14日 09:55/ 0 赞/ 221 阅读

相关 react 渲染table数据

表格效果如图所示： ![Center][] const headers=['bookName','Author','Language','Published'

古城微笑少年丶/ 2022年06月09日 08:52/ 0 赞/ 452 阅读

相关 React(Hello World)+webpack

建立文件夹 ![文件夹项目][20190320154901703.png] package.json 这是所有的包，直接复制使用`cnpm i`来下载就可以了

迷南。/ 2022年03月02日 13:20/ 0 赞/ 199 阅读

相关 react渲染dom

第一步：导入包运行：cnpm i react react-dom -S ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

╰半橙微兮°/ 2021年12月14日 02:23/ 0 赞/ 314 阅读

相关 React渲染原理

渲染原理渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象 React元素：React Element，通过React.createElement创建

今天药忘吃喽~/ 2021年08月14日 01:47/ 0 赞/ 470 阅读

相关 react 渲染 hello React

react为一套为视图准备的js框架引入四个文件 <script src="js/libs/browser.min.js"></

╰+哭是因爲堅強的太久メ/ 2021年07月24日 15:47/ 0 赞/ 496 阅读

相关 react 条件渲染

1、讲jsx内容放进数组里,然后{}解析,会自动去掉[ ]和",",展现数组内容 2、利用arr.map(function(item,index){return

朱雀/ 2021年07月24日 12:38/ 0 赞/ 477 阅读