React学习day1

最新推荐文章于 2024-04-23 21:38:50 发布

我在东软打代码

最新推荐文章于 2024-04-23 21:38:50 发布

阅读量140

点赞数

文章标签： reactjs react

本文链接：https://blog.csdn.net/weixin_46758732/article/details/116382428

版权

React

概念：

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

来源：

由Facebook开发，且开源

学习React的重要性：

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

React的特点

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

React高效的原因

使用虚拟DOM，不总是操作页面真实DOM
DOM Diffing算法，最小化页面重绘

用React实现第一个编程
一、环境准备
在浏览器中编写代码：https://codepen.io/gaearon/pen/oWWQNa?editors=0010
二、搭建本地开发环境
推荐：

我用的是WebStrom,参考https://blog.csdn.net/qq_39207948/article/details/79467144

成功创建React项目
在这里插入图片描述
在React项目下新建一个包day1，创建hello_react.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hellow_react</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入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>
<script type="text/babel">
    //创建虚拟DOM
    const VDOM = <h1>Hellow Reacct</h1>
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>
</body>
</html>