官网: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>