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

2024-08-12 42

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

前言

记录下react的学习过程

内容

React简介

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

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

React

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

特点

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

React基本使用

hello react

目录结构

├─01_hello_react
│      hello_react.html
│
└─js
        babel.min.js  #将JSX语法转JS代码的库
        react-dom.development.js #react扩展库
        react.development.js #react核心库

hello_react.html

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

学无止境,谦卑而行.

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

前言

内容