react--学习笔记1（react简介和简单的hello world）

React初探：构建用户界面

最新推荐文章于 2025-02-24 17:01:17 发布

原创最新推荐文章于 2025-02-24 17:01:17 发布 · 5.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 专栏收录该内容

15 篇文章

订阅专栏

本文介绍React，一个由Facebook开源的JavaScript库，用于构建用户界面，采用声明式编码和组件化编码方式，支持客户端与服务器渲染。文章详细讲解了React的特点，包括其高效的虚拟DOM操作和单向数据流，以及基本的使用方法，如创建虚拟DOM元素和将其渲染到真实DOM中。

一、react简介：

用于构建用户界面的JavaScript库，（JavaScript是一个函数库，react只关注view）。
react是由facebook开源的。

react特点：

Declarative(声明式编码) ; eg:命令式：model open（）；声明式：< Model open={true}>不用操作dom，只操作数据。
Component-Based(组件化编码)；
Learn Once, Write Anywhere(支持客户端与服务器渲染)；
高效----因为操作的是虚拟的dom，DOM Diff算法，最小化页面重绘。
单向数据流

react的基本使用：

首先了解：

react.js: React的核心库
react-dom.js: 提供操作DOM的react扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

简单代码测试：

在HBuilder中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>react</title>
		<script type="text/javascript" src="js/react.development.js"></script>
		<script type="text/javascript" src="js/react-dom.development.js"></script>
		<script type="text/javascript" src="js/babel.min.js"></script>
	</head>
	<body>
        <div id="test"></div>
        <script type="text/babel">
            //1.创建虚拟DOM元素对象
			var vDom = <h1>hello react!</h1>
            //2.将虚拟DOM渲染到页面真实DOM容器中
			ReactDOM.render(vDom, document.getElementById('test'))
		</script>
     </body>
</html>

在vscode中编写：

编写子组件：test1.js

import React from 'react'

export default class Testone extends React.Component{
    render(){
        return(
            <div>
                <h1>hello world</h1>
            </div>
        )
    }
}

引入到父组件中App.js

//1.先引用文件位置
import Testone from './demo/test1'
//2.在引用组件
< Testone />

这里下载React开发者工具调试，方便以后使用。

我下载的是谷歌浏览器的扩展文件，