react入门

官网

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}

posted @ 2021-06-15 23:01 勋染阅读(13) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· node入门教程

· Nuxt.js总结

· 001 React简介

· React入门

· 图文并茂15分钟教你快速入门React

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

公告

微信号：devzhouxun（请备注博客园）

公众号：devszhouxun（回复“电子书”领取）

个人博客：勋染的小窝

CSDN博客：CSDN博客中心

毕业院校：哈尔滨理工大学

昵称：勋染
园龄： 1年2个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

勋染的一千零一夜

专注于开发，一直在从事前端与后端相关工作。

react入门

官网

React是什么？

谁开发的？

为什么要学？

react的特点

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

React高效的原因

React安装

虚拟DOM

JSX

遍历数据（map）

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (2)

随笔分类 (21)

随笔档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<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>

	<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>

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

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