react入门

最新推荐文章于 2023-12-22 16:26:19 发布

勋染

最新推荐文章于 2023-12-22 16:26:19 发布

阅读量633

点赞数 3

分类专栏：学习文章标签： react

本文链接：https://blog.csdn.net/dev_zx/article/details/117934042

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

官网

React是什么？

react用于构建用户界面的JavaScript库。
react是一个将数据渲染为HTML视图的开源JavaScript库

谁开发的？

由Facebook开发，且开源。

起初由Facebook的软件工程师Jordan Walke创建。
于2011年部署于Facebook的newsfeed。
随后在2012年部署于Instagram。
2013年5月宣布开源。
近十年 “陈酿” React正在被腾讯、阿里等一线大厂广泛使用。

为什么要学？

原生JavaScript操作DOM繁琐、效率低（DOM-API 操作 UI）。
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
原生JavaScript没有组件化编码方案，代码复用率低。

react的特点

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

学习React之前你要掌握的JavaScript基础知识

判断this的指向
class(类)
ES6语法规范
npm包管理器
原型、原型链
数组常用方法
模块化

React高效的原因

使用虚拟(virtual)DOM，不总是直接操作页面真实DOM。
DOM Diffing 算符，最小化页面重绘。

React安装

React 可以直接下载使用，你可以在官网 https://reactjs.org/ 下载最新版。
你也可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

实例如下：

<!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>
    <!-- 引入react核心库 -->
    <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.min.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="app"></div>
</body>

<script type="text/babel"> //此处一定要写babel
    // 创建虚拟DOM
    const VDOM = <h1 id="text">hello react!</h1>  //此处一定不要写引号，因为不是字符串
    // 渲染虚拟DOM到页面上
    ReactDOM.render(VDOM, document.getElementById("app"))
</script>

</html>

引入库解析：

react.development.js - React 的核心库
react-dom.development.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

通过 npm 使用 React

如果你的系统还不支持 Node.js 及 NPM 安装包及源码下载地址为：https://nodejs.org/en/download/。
如果使用 npm 速度慢的话，你可以使用淘宝镜像 cnpm 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

使用 create-react-app 快速构建 React 开发环境
执行以下命令创建项目：

cnpm install -g create-react-app
//全局安装 create-react-app
create-react-app my-app
//创建项目 my-app
cd my-app/
//进入my-app文件夹
npm start
//运行项目

虚拟DOM

本质是object类型的对象(一般对象)。
虚拟DOM比较 “轻”，真实DOM比较 “重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

JSX

JSX介绍

全称：JavaScript XML
React定义的一种类似于XML的JS扩展语言：JS+XML
本质上React.createElement(component,props,children)方法的语法糖
作用：用来简化创建虚拟DOM
a. 写法：var VDOM=< h1>Hello JSX!</ h1>
b. 它不是字符串，也不是HTML/XML标签
c. 它最终产生的就是一个JS对象
标签名任意：HTML标签或者其它标签

实例如下：

<!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>
    <!-- 引入react核心库 -->
    <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.min.js"></script>
</head>
<style>
    .title {
        background-color: pink;
    }
</style>

<body>
    <!-- 准备一个容器 -->
    <div id="app"></div>
</body>

<script type="text/babel">
    const id = 'Title'
    const data = 'Hello,REact'
    // 创建虚拟DOM
    const VDOM = (
        <div>
            <h1 className="title" id={id.toLowerCase()}>
                <span style={{ color: "white", fontSize: "30px" }}>{data.toLocaleLowerCase()}</span>
            </h1>
            <input type="text" name="" id="" />
            <text>123</text>
            <Text>123</Text>
        </div>
    )
    // 渲染虚拟DOM到页面上
    ReactDOM.render(VDOM, document.getElementById("app"));

</script>

</html>

JSX语法规定

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用 {} 。
样式的类名指定不要用class，需要使用className 。
内联样式，要用style={{key:value}}的形式去写。
只有一个根标签。
标签必须闭合。
标签首字母
a. 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
b. 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

遍历数据（map）

实例如下：

<!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>
    <!-- 引入react核心库 -->
    <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.min.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="app"></div>
</body>

<script type="text/babel">
    const list = ["Angular", "React", "Vue"]
    const obj = [{ id: 1, name: 'Angular' }, { id: 2, name: "React" }, { id: 3, name: "Vue" }]
    // 创建虚拟DOM
    const VDOM = (
        <div>
            <ul>
                <h1>前端框架列表</h1>
                {list.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
            <ul>
                {
                    obj.map(item => (
                        <li key={item.id}>{item.name}</li>
                    ))
                }
            </ul>
        </div>
    )
    // 渲染虚拟DOM到页面上
    ReactDOM.render(VDOM, document.getElementById("app"));

</script>

</html>

Js表达式与JS语句

表达式：一个表达式可以产生一个值，可以放在任何一个需要的地方
下面这些都是表达式：
a. a
b. a+b
c. fn(1)
d. arr.map(item=>{})
e. function fn(){}
语句：
下面这些都是表达式：
a. if(){}
b. for(){}
c. switch(){case:xxx}

勋染

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
8
评论
react入门

官网英文官网中文官网React是什么？react用于构建用户界面的JavaScript库。react是一个将数据渲染为HTML视图的开源JavaScript库谁开发的？由Facebook开发，且开源。起初由Facebook的软件工程师Jordan Walke创建。于2011年部署于Facebook的newsfeed。随后在2012年部署于Instagram。2013年5月宣布开源。近十年 “陈酿” React正在被腾讯、阿里等一线大厂广泛使用。为什么要学？原生Jav
复制链接

扫一扫