零基础入门一文带你了解前端React的概述以及基本使用

目录

一、React概述

1. React的概念

2. React的特点

二、React的基本使用

1. React的安装

2. React的使用

三、React脚手架的使用

1. React 脚手架意义

2. 使用React 脚手架初始化项目

3. 在脚手架中使用React

---

一、React概述

1. React的概念

• React 是一个用于构建用户界面的JavaScript库。
• 用户界面：HTML页面（前端)
• React主要用来写HTML页面，或构建Web应用
• 如果从MVC的角度来看，React仅仅是视图层（ V ），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。

2. React的特点

1. 声明式：只需要描述UI ( HTML）看起来是什么样，就跟写HTML一样React负责渲染Ul，并在数据变化时更新UI。
2. 基于组件：组件是 React最重要的内容，组件表示页面中的部分内容，组合、复用多个组件，可以实现完整的页面功能
3. 学习一次，随处使用使用：React可以开发Web 应用，使用React 可以开发移动端原生应用( react-native )，使用React可以开发VR（虚拟现实)应用( react 360 )。

二、React的基本使用

1. React的安装

安装指令：npm i react react-dom

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

2. React的使用

1.  引入 react 和 react-dom 两个 js 文件创建

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

2.  React元素
3.  渲染React元素到页面中

<div id="root"></div>
<script>
       //参数一：元素名称
       //参数二：元素属性
       //第三个及其以后的参数：元素的子节点
       const title = React.createElement('h1',null,'Hello React')
       //参数一：要渲染的react元素
       //参数二：挂载点
       ReactDOM.render(title,document.getElementById('root'))
</script>

三、React脚手架的使用

1. React 脚手架意义

• 脚手架是开发现代Web 应用的必备。
• 充分利用Webpack、Babel、ESLint等工具铺助项目开发。
• 零配置，无需手动配置繁琐的工具即可使用。
• 关注业务，而不是工具配置。

2. 使用React 脚手架初始化项目

• 初始化项目：命令：npx create-react-app my-app
• 启动项目，在项目根目录执行命令：npm start

注意：npx命令目的时提升包内提供的命令行工具的使用体验。

补充说明：一般情况下初始化项目使用上面命令，同时也可以使用npm init react-app  my-app 或者 yarn create react-app my-app. 

3. 在脚手架中使用React

• 初始化项目时，自动导入react 和 react-dom 两个包。

  import React from 'react'
  import ReactDOM from 'react-dom'

• 调用 React.createElement() 方法创建react元素。
• 调用 ReactDOM.render() 方法渲染react元素到页面中。

// 1、导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 2、创建react元素
const title = React.createElement('h1',null,'Hello React!')

// 3、渲染react元素
ReactDOM.render(title,document.getElementById('root'))