码迷,mamicode.com
首页 > 其他好文 > 详细

01.React

时间:2020-01-27 22:04:39      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:挂载   document   更新   device   需要   charset   ble   null   描述   

1.1React基础

1-11什么是React

React 是一个用户构建用户界面的JavaScript库。
用户界面:HTML页面(前端)
React主要用来写HTML页面,或构建web应用
如果从MVC 的角度来看,React 仅仅是视图层(v),也就是只负责视图的渲染,而并非提供了完整的M 和C 的功能。
起源于Facebook的内部项目,后又用来架设Instagram的网站,并于2013年5月开源

1-12.React的特点

  • 声明式
  • 基于组件
  • 学习一次,随处使用

声明式

//只需要描述UI(HTML)看起来是什么样,就跟写HTML 一样
//React 负责渲染UI,并在数据变化时更新UI
const jsx = <div className = 'app'>
    <h1>Hello React! 动态变化数据:{count}</h1>
</div>

基于组件

//组件是React最重要的内容
//组件表示页面中的部分内容
//组合,复用多个组件,可以实现完整的页面功能

学习一次,随处使用

使用React可以开发web应用
使用React可以开发移动端原生应用(react-native)
使用React可以开发VR(虚拟现实)应用(react 360)

2.1React的安装

安装命令:npm i react react-dom
react包是核心,提供创建元素,组件等功能
react-dom包提供DOM相关功能等

2.2React的使用

A.引入react和react-dom 两个js文件

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

B.创建React 元素

 const title =React.createElement('h1',null,'Hello React')

C.渲染React 元素到页面中

<!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>
    <!-- 1 引入js文件 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules//react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
    //2.创建react元素
    //参数一:元素名称
    //参数二:元素属性
    //参数三:元素的子节点
    const title =React.createElement('h1',null,'Hello React')
    //3.渲染react元素
    //参数一:要渲染的react元素
    //参数二:挂载点
    ReactDOM.render(title,document.getElementById('root'))
</script>
    
</body>
</html>

01.React

标签:挂载   document   更新   device   需要   charset   ble   null   描述   

原文地址:https://www.cnblogs.com/foreverLuckyStar/p/12236782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!