1.React基础

最新推荐文章于 2023-02-03 09:36:17 发布

屋顶上的小喵

最新推荐文章于 2023-02-03 09:36:17 发布

阅读量111

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/vivian_1122/article/details/105555190

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是React?

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

2.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）

3.React的安装

安装命令：npm i react react-dom

react包是核心，提供创建元素，组件等功能
react-dom包提供DOM相关功能等

4.React的使用


//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>

屋顶上的小喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
1.React基础

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

扫一扫