赞助

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

 

React 起源于 Facebook(脸书) 的内部项目,它是一个用于构建用户界面的 javascript 库,Facebook用它来架设公司的Instagram网站,并于2013年5月开源。

 

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。

  • 声明式

你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI

  • 基于组件

组件时React最重要的内容,组件表示页面中的部分内容

  • 学习一次,随处使用

使用React可以开发Web应用(ReactJs),使用React可以开发移动端(react-native),可以开发VR应用(react 360)

React与传统MVC的关系

React用于构建用户界面的 JavaScript 库,它不是一个完整的MVC框架,最多可以认为是MVC中的V(View),甚至React并不非常认可MVC开发模式;React 构建页面 UI 的库。可以简单地理解为,React 将将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。

浏览器扩展与vscode开发扩展安装

Chrome 浏览器扩展:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN

 

 

vscode安装react开发扩展

 

 

react开发需要引入多个依赖文件,其中react.js、react-dom.js这两个文件是我们创建react应用程序必须要引入的依赖文件。

react.js 是核心,提供创建元素,组件等功能

https://unpkg.com/react@16/umd/react.development.js

react-dom.js 提供DOM相关功能

https://unpkg.com/react-dom@16/umd/react-dom.development.js

下载对应的react.js和react-dom.js的开发版本的js类库文件到本机中后,通过script引入到当前的网页中

// React 的核心库

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

//DOM 相关的功能

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

 

html中定义reactjs渲染容器id和进行React实例化相关操作,完成helloworld显示

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hell world</title>
</head>

<body>
  <!-- 用于内容显示容器 挂载点 -->
  <div id="app"></div>

  <!-- react核心类库 -->
  <script src="./js/react.development.js"></script>
  <!-- dom操作 -->
  <script src="./js/react-dom.development.js"></script>
  <script>
    const app = document.querySelector('#app')

    // 虚拟dom
    const el = React.createElement

    const vnode = el(
      'div',
      null,
      el('h1', { id: 100 }, 'hello world'),
      el('h1', { id: 100 }, 'hello world'),
    )

    // 把虚拟dom转为真实的dom并挂载到页面中
    ReactDOM.render(vnode, app)


  </script>


</body>

</html>

 

posted on 2021-02-25 15:59  Tsunami黄嵩粟  阅读(267)  评论(0编辑  收藏  举报