Javascript

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