React基础讲解

最新推荐文章于 2024-09-27 09:30:00 发布

Q♛

最新推荐文章于 2024-09-27 09:30:00 发布

阅读量153

点赞数

分类专栏： react基础文章标签： react

本文链接：https://blog.csdn.net/weixin_52139966/article/details/119116589

版权

react基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一. 简介:

(一). 官网:

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

(二). 介绍:

React起源于Facebook的内部项目。React的出现是革命性的创新，React的是一个颠覆式的前端框架.一个用于构建用户界面的 JavaScript 库.

(三). 特点:

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

二.基础使用:

(一). 引入react库:

 //引入react核心库
<script type="text/javascript" src="./js/react.development.js"></script>

//引入react-dom，用于支持react操作DOM 
<script type="text/javascript" src="./js/react-dom.development.js"></script>

(二). 使用:

<div id="test"></div>

<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script>
	ReactDOM.render(
         '王俊凯',
  		document.getElementById('test')
  	)
</script>

<div id="test"></div>

<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script>
	let h1 = React.createElement('h1',null,'我是一个标题')
	ReactDOM.render(
        h1,
  		document.getElementById('test')
  	)
</script>

(三). JSX语法:

全称: JavaScript XML
注:它可以作为值使用,它并不是字符串,它也不是HTML, 它可以配合JavaScript 表达式一起使用

1. jsx语法规则：

(1).定义虚拟DOM时，不要写引号。

(2).标签中混入JS表达式时要用{}。

(3).样式的类名指定不要用class，要用className。

(4).内联样式，要用style={{key:value}}的形式去写。

(5).只有一个根标签

(6).标签必须闭合

(7).标签首字母

若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

2.使用:

<div id="test"></div>

<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>

//引入babel，用于将jsx转为js
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel"> //必须写bable
	const Dom = <h1>王俊凯</h1>
	ReactDOM.render(
    	Dom,
		document.getElementById('test')
	)
</script>

注:引入bable.js作用:

(1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
(2)只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

3.内联样式和class:

class要用className
内联样式要用style={{key:value}}

<style>
	#ant{
     	color: blue;
   	}
</style>
<div id="test"></div>
<script type="text/babel">
	const myId = 'ANT'
	const content = '刘宇宁'
	const Dom = (
      <div id={myId.toLowerCase()} style={{fontSize:"30px"}}>{content}</div>         
 	)
 </script>

3.动态展示列表:

<div id="test"></div>
<script type="text/babel">
	const arr = ['王俊凯','刘宇宁','白敬亭']
	const Dom = (
     	<ul>
           {
               arr.map((item,index)=>{
                  	return <li key={index}>{item}</li>
           		})  
         	}
     	</ul>        
 	)
 </script>