React 学习01 - React 的基本使用

最新推荐文章于 2024-03-25 13:07:50 发布

大魔王sama

最新推荐文章于 2024-03-25 13:07:50 发布

阅读量87

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_40311523/article/details/107381492

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React 的基本概念

在使用 React 之前，我们先来了解一下，React 和 Vue 一样是一款 JS 库，他们和 jQuery 之类的主要区别是，他们提供了一种解决问题的思路：组件化，而 jQuery 只提供了解决问题的方法。所以我们更倾向于称 React 和 Vue 为框架。

另外，React 和 Vue 的区别是，Vue 对于组件化，推出了自己特有的模板，即 .vue 文件，在文件中，结构、行为、样式被分别拆分到了 template 、script 、style 这三个标签之中。React 不同于 Vue ，React中的结构、行为、样式都会被用 JS 来表示，所以 React 中只有组件的概念，但是没有组件的模板。

React 特点

React 不使用模板，使用组件
React 不是 MVC 框架
响应式，当数据发生变化，利用 render 方法重新渲染
React 是一个轻量级的 JS 库

React 的基本使用

准备

我们知道，在正式编写代码之前，我们需要在我们的项目中引入 React 相关文件：

react.development.js

React 的核心库，必须作为第一位引用，development 说明这个文件时用于开发模式的。
react-dom.development.js

React 中专门用来操作 DOM 的拓展库，FaceBook 在开发 React 的时候，将 React 做了拆分，react-dom.js 专门被用来开发 H5 应用，React 还可以开发真正的移动应用，只不过这部分功能在 react-native 中。
babel.js

babel.js 可以用来将 ES6 的代码降级成 ES5 方便浏览器理解，但是在 React 中，它还有另一种作用。正如我们刚才提到的，React 使用 JS 来表示结构，所以为了方便我们书写 HTML 代码，React 提供了一种名为 JSX 的语法，babel 的另一个作用就是来解析 JSX 语法，将 JSX 的语法转化为 JS 。

我们可以使用两种方法来引用这三个文件，注意：在引入时，react-dom 必须要在 react 之后：

使用 npm 将资源下载到本地

npm install react react-dom babel-standalone --save ，下载完成后得到 node_modules 文件夹，按照下图路径和顺序引入
使用 BootCDN 直接引用网络资源

在 BootCDN 搜索 react 、react-dom、babel 和刚才一样的顺序引入即可。

使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 1. 和 Vue 一样，在 body 中添加一个标签，React 渲染后的内容就放在这个标签中 -->
  <div id="app"></div>
</body>

<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>

<!-- 注意：这里的 script 标签的 type 必须要是 text/babel -->
<!-- 否则的话这个标签中的语法不会被 babel 处理，jsx 语法会出错 -->
<script type="text/babel">
  // 2. 创建虚拟 DOM
  let myDom = <h1>Hello world</h1>  // jsx语法

  // 3. 将虚拟 DOM 渲染到真实 DOM 容器中，即将 myDom 插入到 document.getElementById('app') 中
  ReactDOM.render(myDom, document.getElementById('app'))
  // ReactDOM.render() 方法接收两个参数，第一个参数传入jsx对象，第二个参数传入根节点
</script>

</html>

大魔王sama

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 学习01 - React 的基本使用

React 的基本概念React 是 Facebook 开发出的一款 JS 库React 特点React 不使用模板，使用组件React 不是 MVC 框架响应式，当数据发生变化，利用 render 方法重新渲染React 是一个轻量级的 JS 库React 原理虚拟 DOM...
复制链接

扫一扫