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基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！