首页 > 其他分享> 文章详细

React基础

2022-02-21 00:01:19 阅读：158 来源： 互联网

标签：react 渲染元素基础 React 脚手架页面

一、学习目标

1.能够说出React是什么

2.能够说出React的特点

3.能够掌握React的基本使用

4.能够使用React脚手架

二、React概述

2.1 什么是React？

React是一个用于构建用户界面的JavaScript库。

用户界面：HTML页面(前端)

React主要是用来写HTML页面，或建构Web应用。

如果从MVC的角度看，React仅仅是视图层(V),也就是只负责视图的渲染，而并非提供了M和C的功能。

2.2 React的特点?

声明式：你只需要描述HTML看起来是什么样，React负责渲染UI（HTML页面），并在数据变化时更新UI（HTML页面）。

基于组件：组件是React中最重要的内容。组件表示页面中的部分内容。

学习一次，随处使用：使用React可以开发Web应用、移动端原生应用、VR(虚拟实现)应用。

三、React的基本使用

3.1 React的安装

安装命令：npm i react react-dom

react包是核心，提供创建元素、组件等功能

react-dom包提供DOM相关功能等

3.2 React的使用

（1）引入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>

（2）创建React元素

（3）渲染React元素到页面中

<div id="root"></div>
<script>
    //创建React元素，使用createElement进行创建
    //第一个元素：元素名称
    //第二个元素：元素属性
    //第三个及其以后的元素：元素的子节点
    const title = React.createElement('h1',null,'Hello React')
    //渲染React元素到页面中，使用render进行渲染
    //第一个元素：要渲染的元素
    //第二个元素：挂载点(要渲染到的地方)
    ReactDom.render(title,document.getElementById('root'))
</script>

四、React脚手架的使用（推荐使用）

4.1 React脚手架意义

（1）脚手架是开发现代Web应用的必备。

（2）充分利用Webpack、Babel、ESLint等工具辅助项目开发。

（3）零配置，无需手动配置繁琐的工具即可使用

（4）关注业务，而不是工具配置

4.2 使用React脚手架初始化项目

（1）初始化项目，命令：npx create-react-app my-app

（2）启动项目，在项目根目录执行命令：npm start

4.2.1 npx命令介绍

（1）npm v5.2.0引入的一条命令

（2）目的：提升包内提供的命令行工具的使用体验

（3）无需安装脚手架包，就可以直接使用这个包提供的命令

4.3 在脚手架中使用React

（1）导入react和react-dom包

import React from 'react'
import ReactDom from 'react-dom'

（2）调用ReactCreateElement()方法创建react元素

（3）调用ReactDOM.render()方法渲染react元素到页面中

学到现在，React基础我们已经学完啦，接下来我们一起进入React的正式学习吧！！

标签：react,渲染,元素,基础,React,脚手架,页面
来源： https://blog.csdn.net/L1021953338/article/details/123037547

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React基础