【React基础】安装使用、JSX及React组件基础

一、React基础

1.1 React概述

• React是一个用于构建用户界面的JavaScript库。
• 用户界面：HTML页面(前端）
• React主要用来写HTML页面，或构建Web应用
• 如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。
• React起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源

1.1.1 React的特点

1. 声明式
   • 你只需要描述Ul ( HTML)看起来是什么样，就跟写HTML一样
   • React负责渲染UI，并在数据变化时更新Ul

const jsx = <div className='app'>
	<h1>Hello React! 动态变化数据:{
   count}</h1>
</div>

2. 基于组件
   • 组件是 Reac t最重要的内容
   • 组件表示页面中的部分内容
   • 组合、复用多个组件，可以实现完整的页面功能
3. 学习一次，随处使用
   • 使用React可以开发Web应用
   • 使用React可以开发移动端原生应用( react-native )
   • 使用React可以开发VR(虚拟现实)应用( react 360 )

1.2 React的基本使用

1. React的安装
   • react包是核心，提供创建元素、组件等功能
   • react-dom包提供DOM相关功能等

npm i react react-dom

2. 引入js文件

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

3. 创建React元素并渲染到页面中

<div id="root"></div>
<script>
	// 参数1：元素名称，参数2：元素属性，参数3：元素的子节点
    var title = React.createElement('h1',null,'Hello React')
    
    //参数1：要渲染的react元素
    //参数2：挂载点
    ReactDOM.render(title,document.getElementById('root'))
</script>

1.3 React脚手架的使用

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

1. 初始化项目

npx create-react-app my-app

2. 启动项目
   • 在项目根目录执行命令

npm start

• 补充：
  • npx命令介绍：
    • npm v5.2.0引入的一条命令
    • 目的∶提升包内提供的命令行工具的使用体验
    • 原来︰先安装脚手架包，再使用这个包中提供的命令
    • 现在∶无需安装脚手架包，就可以直接使用这个包提供的命令

1.3.2 在脚手架中使用React

• 打开src目录中的index.js

1. 导入 react 和 react-dom 两个包

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

2. 调用 React.createElement() 方法创建 react 元素
3. 通过 ReactDOM.render() 方法渲染 react 元素到页面中

var title = React.createElement('h1',null,'Hello React!!!')
var root = ReactDOM.createRoot(document.getElementById('root'))
root.render(title)

二、JSX

2.1 JSX的基本使用

• JSX是JavaScript XML的简写，表示在JavaScript代码中写XML (HTML）格式的代码。
• 优势∶声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
• JSX是 React 的核心内容

2.1.1 使用步骤

1. 使用JSX语法创建react元素

var title = <h1>Hello JSX</h1>

2. 渲染 react