React学习笔记【1】

⁡⁡小黑

已于 2023-04-25 16:57:18 修改

阅读量85

点赞数

分类专栏： # React 前端文章标签：学习笔记前端前端框架 reactjs

于 2023-04-25 14:54:57 首次发布

本文链接：https://blog.csdn.net/weixin_50378623/article/details/130365185

版权

React 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

本文介绍了React的基本概念和使用方法，包括jsx语法、组件化开发以及虚拟DOM的优势。通过实例展示了如何创建jsx元素并渲染到页面，同时讲解了列表渲染。文章还探讨了模块化和组件化在软件开发中的重要性。

摘要由CSDN通过智能技术生成

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

英文：https://react.dev/
中文：https://react.docschina.org/

优点：

采用组件化模式、声明式编码，提高组件效率及组件复用率。
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。
在React Native中可以使用React语法进行移动端开发。

第一次尝试编码
1、jsx创建

<!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>Document</title>
</head>

<body>
	<!-- 容器 -->
    <div id="test"></div>
    
    <!-- react核心库 此库引用于react-dom.development.js之前 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- react-dom用于支持react操作dom -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx转成js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.js"></script>
    <!-- type="text/babel"-->
    <script type="text/babel">
        // 创建虚拟DOM
        const VDOM = <h1>Hello,React</h1>;
        // 将虚拟DOM渲染到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>

</html>

2、js创建

<!-- react核心库 此库引用于react-dom.development.js之前 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- react-dom用于支持react操作dom -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- babel.js 可不引入 但是其他两个需要引入 -->
<script type="text/javascript">
	//创建虚拟DOM
	const VDOM = React.creatElement('h1',{id:'ceshi'},'Hello React');
	//将虚拟DOM渲染到页面
	ReactDOM.render(VDOM,document.getElementById('test'));
</script>

jsx（JavaScript XML）语法规则：

定义(创建)虚拟DOM时，不要使用引号包裹。
标签中（使用变量）混入js表达式时要用{}。
样式的类名指定不能使用class，要使用className。
内联样式使用style={{key:value}}的形式。
虚拟DOM必须只有一个根标签。
标签必须闭合。
标签首字母：
（1）、若小写字母开头，则将标签转为Html中的同名元素。
（2）、若大写字母开头，React就去渲染对应的组件，如果找不到该组件，会报错。

列表渲染

<script type="text/babel">
	//定义列表数据 
	let list = ['Vue', 'React', 'angular'];
	//创建虚拟DOM
    const VDOM = (
            <div>
                <h1>列表渲染</h1>
                <ul>
                    {
                        list.map((item, index) => {
                        	//key为唯一标识符，严禁使用同一数据，尽量避免使用index索引，改代码仅供测试
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        );
    //渲染页面
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>