React框架基础

编程语言 2023-07-21 02:17:55 阅读次数: 0

一、react简介

网址：React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

1.1、概述

React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。

1.2、特点

  •  声明式

你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI

  • 基于组件

组件时React最重要的内容，组件表示页面中的部分内容

  • 学习一次，随处使用

使用React可以开发Web应用(ReactJs)，使用React可以开发移动端(react-native)，可以开发VR应用(react 360)

1.3、React与传统MVC的关系

React用于构建用户界面的JavaScript库，它不是一个完整的MVC框架，最多可以认为是MVC中的V（view），甚至React并不非常认可MVC开发模式。

React构建页面UI库。可以简单地理解为，React将界面分成各个独立的小块，每一个块就是组件，这些组件可以组合、嵌套，就成了我们的页面。

1.4、浏览器扩展与VSCode开发扩展安装

1.4.1、Chrome浏览器扩展

打开Chrome 浏览器设置，点击更多工具，点击扩展程序，点击加载已解压的扩展程序，找到fmkadmapgofadopljbjfkapdkoienihi-4.15.0-8112021-Crx4Chrome.com.crx文件（我会上传），然后选择该文件即可。

 1.4.2、VSCode安装react开发扩展

1.5、使用react打印出hello world

附代码： 

<!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>
    <!-- 1、引入react js文件 -->
    <!-- react.js 核心包  react-dom.js 相关dom操作的包 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 2、挂载点 -->
    <!-- 解释：react渲染之后的内容统一挂在到当前#app元素中-->
    <div id="app"></div>
    <!-- 3、创建 -->
    <script>
        ReactDOM.render(
            //在js中有：document.createElement(节点名,属性,子元素)
            //在react有：React.createElement(节点名,属性,子元素)
            React.createElement('p','','hello world'),
            document.querySelector('#app')
        )
        /* 
          react渲染过程：
          1、拿到react组件中state中的数据，通过object.defineperoprty进行监听
          2、通过render函数，把组件渲染成vdom
          3、通过patch函数，把vdom挂载到真实的dom上
        */
    </script>
</body>
</html>

二、JSX

2.1、简介

由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。React不一定非要使用JSX，但它有以下优点：

  • JSX执行更快，因为它在编译为JavaScript代码后进行了优化

  • 它是类型安全的，在编译过程中就能发现错误

  • 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速

  • jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行

jsx本质是什么？

jsx等同于vue模板，vue模板不是html，jsx不是js

2.2、使用JSX打印出hello world

附代码：

<!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>
    <!-- 1、引入react js文件 -->
    <!-- react.js 核心包  react-dom.js 相关dom操作的包 -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <!-- 2、挂载点 -->
    <!-- 解释：react渲染之后的内容统一挂在到当前#app元素中-->
    <div id="app"></div>
   
    <!-- 
        什么是jsx?
        react的模板叫jsx jsx不是js，是react的模板，既可以放react语法，又可以放html元素

        如何使用jsx?
        1、引入babel
        2、type="text/babel"
        3、jsx提取出来一个变量
     -->

    <!-- 3、创建 -->
    <script type="text/babel">
        //jsx提取出来一个变量
        var mydiv = <div>hello world</div>
        ReactDOM.render(
            mydiv,
            document.querySelector('#app')
        )
    </script>
</body>
</html>

 2.3、插值表达式

附代码：

<!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>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="app"></div>

    <!-- 
        react插值语法：{} 可以放变量 表达式 函数调用
     -->

    <script type="text/babel">
        var name = '王昭没有君啊';
        var flag = false;
        var myJsx = (
            //jsx必须要有一个根节点
            <div>
                <h3>插值表达式案例:</h3>
                <p>{name}</p>
                <p>{flag ? '王昭没有君啊' : '王昭君'}</p>
            </div>
        )
        //进行渲染
        ReactDOM.render(
            myJsx,
            document.querySelector('#app')
        )
    </script>
</body>

</html>

2.4、动态属性

附代码：

<!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>
    <style>
        .bgcolor{
            color: palevioletred;
        }
    </style>
</head>
<body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="app"></div>

    <!-- 
        动态属性
        react动态属性 直接在属性后面加{} 就可以，
        里面可以放变量，表达式函数调用
        jsx中没有class 用className来替代
     -->

    <script type="text/babel">
        var mycolor = 'bgcolor';
        var myJsx = (
            <div>
                <h3>动态属性案例</h3>
                {/* 静态属性 */}
                <p className="bgcolor">王昭没有君啊</p>
                {/* 动态属性 */}
                <p className={mycolor}>王昭没有君啊</p>
                {/* 需求：把某个html片段插入某个标签中 */}
                <p dangerouslySetInnerHTML={
   
   {__html:'<a href="http://baidu.com">百度一下</a>'}}></p>
            </div>
        );
        ReactDOM.render(
            myJsx,
            document.querySelector('#app')
        )
    </script>
</body>
</html>

2.5、循环数组

附代码：

<!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>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="app"></div>

    <!-- 
        工作中常用的数组循环方式
        arr.map() map是对当前数组进行遍历，处理每个元素，之后返回处理之后的数组。

        key的作用？
        简单的说就是为了提高渲染性能，底层使用diff算法来进行更新比较，
        相同的key diff是直接复用的，这样可以提高性能。
        
        工作中使用唯一主键作为key的值，不建议使用index来作为可以

     -->

    <script type="text/babel">
        var arr = [
            {id:1,name:'王昭',age:23},
            {id:2,name:'王昭君',age:24},
            {id:3,name:'王昭没有君啊',age:25}
        ]
        var myJsx = (
            <div>
               <h3>循环数组案例</h3> 
               {arr.map(item=>{
                   return <p key={item.id}>姓名：{item.name} ， 年龄：{item.age}</p>
               })}
            </div>
        )
        ReactDOM.render(
            myJsx,
            document.querySelector('#app')
        )
    </script>

</body>
</html>

2.6、循环对象

 附代码：

<!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>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <div id="app"></div>

    <!-- 
        循环对象的方法：
        先把对象转化为数组，然后循环数组
     -->

    <script type="text/babel">
        var obj ={
            name: '王昭没有君啊',
            age: 23,
            address:'北京'
        }
        var myJsx = (
            <div>
                <h3>循环对象案例</h3>
                {Object.keys(obj).map(item=>{
                    return <p key={item}>属性：{item} ，属性值：{obj[item]}</p>
                })}
            </div>
        )
        ReactDOM.render(
            myJsx,
            document.querySelector('#app')
        )
    </script>
</body>
</html>

三、脚手架创建项目

3.1、React脚手架

React团队主要推荐使用create-react-app来创建React新的单页应用项目的最佳方式。

create-react-app会配置你的开发环境，以便使你能够使用最新的 JavaScript特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的电脑上安装 Node >= 8.10 和 npm >= 5.6。

3.2、创建React项目

全局安装

不需要考虑路径，打开cmd输入：

npm install -g create-react-app

构建一个项目

在你想要创建项目的路径下，输入：

create-react-app my-test（my-test为项目名称，不能是中文）

出现如下信息，就表示reactjs项目创建成功

 还需要注意的是，3月底发布了React18.0.0版本，我们工作一定要选一个稳定的版本去使用，因为它刚出的版本bug很多，还需要一段时间去维护，我们就需要回到项目中，安装一个稳定的版本，输入如下指令：

cnpm i -S  [email protected] [email protected]

猜你喜欢

转载自blog.csdn.net/weixin_58448088/article/details/124106569
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022