前端学习-react基础

react概述

react是用于构建用户界面的javascript库。

用户界面：HTML页面（前端）

react主要是用来编写HTML页面或构建WEB应用。

特点

1、声明式：只需要描述UI看起来是什么样，至于怎么渲染UI,并在数据变化时更新UI都交给react来做

2、基于组件：

组件是react最重要的内容

仅表示页面中的部分内容

组合，复用多个组件时，可以实现完整的页面功能

3、学习一次，随处使用

使用react可以开发web应用，可以开发移动端原生应用，可以开发VR(虚拟现实）应用

react使用

安装

npm i react react-dom

在这里，需要安装两个包，分别是react和react-dom，其中，react包是核心，提供创建元素，组件等功能；react-dom提供了DOM相关的功能。

运行结果贴在这里：

引入

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

创建react元素

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

这里有三个参数，分别表示：

第一个参数：要创建的react元素名称

第二个参数：该react元素的属性

第三个及其以后的参数：该react元素的子节点

渲染到页面中

ReactDOM.render(title,document.getElementById('root'))

这里也有两个参数，分别表示

第一个参数：要渲染的react元素

第二个参数：DOM对象，用于指定渲染到页面中的位置

保存之后，打开浏览器，可以看到元素被成功渲染了出来

react脚手架

意义：是开发现代WEB应用的必备

好处：

1）充分利用webpack,babel,eslint等工具辅助项目开发

2）零配置

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

使用React脚手架初始化项目

初始化项目

npx create-react-app my-app

由于我这边是初次安装并使用react,所以需要安装一些其它的依赖包，

大概有这么多，如果大家也是初次安装的话，耐心等待即可，大概需要5-6分钟。

启动项目

初始化完成之后，会提示你操作以下指令来启动自己的项目：

注意，需要先cd到对应的项目目录下，在执行启动操作。

如果在浏览器上看到这个页面，

说明该项目被成功启动了。

npx命令介绍

是npm v5.2.0引入的一条命令

可以用来提升包内的命令行工具的使用体验

在之前，我们需要先安装脚手架包，再使用这个包中提供的命令，现在，引入npx之后，可以不用安装脚手架包，直接使用这个包提供的命令。

在脚手架中使用react

引入：

import React from "react"
import ReactDOM from "react-dom"

创建react对象

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

渲染

ReactDOM.render(title, document.getElementById('root'))

保存之后，回到浏览器，可以看到如下内容

好啦，以上就是react基础阶段的所有内容，下期文章见~