React——React简介和基本使用【一】

2024-08-16 14:06:47 浏览数 (2)

前言

记录下react的学习过程

内容

React简介

英语官网 : https://reactjs.org/

中文官网 : https://react.docschina.org/

React

React是由Facebook开源的,用于动态构建用户界面的 JavaScript 库(只关注于视图)。

特点

  1. 采用组件化模式、声明式编码,提高开发效率和组件复用率。
  2. React Native 中使用React语法进行移动端开发。
  3. 使用虚拟DOM和Diffing算法,尽量减少与真实DOM的交互。

React基本使用

hello react

目录结构
代码语言:javascript复制
├─01_hello_react
│      hello_react.html
│
└─js
        babel.min.js  #将JSX语法转JS代码的库
        react-dom.development.js #react扩展库
        react.development.js #react核心库
hello_react.html
代码语言:javascript复制
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--创建"容器"-->
 <div id="test">

 </div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel,用于将jsx转js-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*一定要以text/babel来声明*/
    //1. 创建虚拟DOM
    const VDOM = <h1>Hello, React</h1>/*此处一定不要写引号*/
    //2. 渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>

0 人点赞