React笔记01：react基础、react脚手架、JSX

1 React概述

1.1 什么是react

React 是一个用于构建用户界面的 JavaScript 库。

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

React 主要用来写HTML页面，或构建Web应用

若是从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并不是提供了

完整的 M 和 C 的功能。

React 起源于 Facebook 的内部项目，后又用来架设 Instagram 的网站，并于 2013 年 5 月开源

1.2 react特色

• 声明式

你只须要描述 UI（HTML）看起来是什么样，就跟写HTML同样

React 负责渲染 UI，并在数据变化时更新 UI

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

• 基于组件

• 学习一次，随处使用:能够开发web、移动端(React-native)、AR(React360)等等。

2 React基本使用

2.1 react的安装

npm i react react-dom

react 包是核心，提供建立元素、组件等功能

react-dom 包提供 DOM 相关功能等

2.2 react的使用

• 第一步：引入依赖

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

• 第二步：建立react元素

• 第三步：渲染react元素到页面中

<div id="root"></div>

<script>
    //建立react元素
const title = React.createElement('h1', null, 'Hello React');
    //渲染react元素
ReactDOM.render(title, document.getElementById('root'))
</script>

2.3 方法说明

• React.createElement() 说明（知道）

// 返回值：React元素
// 第一个参数：要建立的React元素名称
// 第二个参数：该React元素的属性
// 第三个及其之后的参数：该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')

• ReactDOM.render()说明 (掌握)

// 第一个参数：要渲染的React元素
// 第二个参数：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))

3 React脚手架的使用

3.1 脚手架意义

脚手架是开发 现代Web 应用的必备。

充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。

零配置，无需手动配置繁琐的工具便可使用。

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

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

第一步：初始化项目

npx create-react-app my-app

第二步：启动项目

npm start
或者 yarn start

3.3 npx命令介绍

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

• 目的：提高包内提供的命令行工具的使用体验

• 原来：先安装脚手架包，再使用这个包中提供的命令

• 如今：无需安装脚手架包，就能够直接使用这个包提供的命令

3.4 补充说明

推荐使用：npx create-react-app my-app

npm init react-app my-app
yarn create react-app my-app

yarn 是 Facebook 发布的包管理器，能够看作是 npm 的替代品，功能与 npm 相同
yarn 具备快速、可靠和安全的特色
初始化新项目：yarn init
安装包： yarn add 包名称
安装项目依赖项： yarn
其余命令，请参考yarn文档

3.5 在脚手架中使用react

第一步：导入 react 和 react-dom 两个包

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

第二步：调用 React.createElement() 方法建立 react 元素。

第三步：调用 ReactDOM.render() 方法渲染 react 元素到页面中。

4 jsx的基本使用

4.1 jsx简介

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。

优点：声明式语法更加直观、与HTML结构相同，下降了学习成本、提高开发效率

JSX 是 React 的核心内容

4.2 使用步骤

第一步：使用 JSX 语法建立 react 元素

let h1 = <h1>hello React</h1>;

第二步：使用 ReactDOM.render() 方法渲染 react 元素到页面中

ReactDOM.render(h1,document.getElementById("root"));

4.3 注意点

• React元素的属性名使用驼峰命名法

• 特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。

• 没有子节点的React元素能够用 /> 结束 。

• 推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。

// 使用小括号包裹 JSX 
const dv = (
	<div>Helo JSX</div>
)

问题：为何脚手架中可使用 JSX 语法？

JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展
须要使用 babel 编译处理后，才能在浏览器环境中使用
create-react-app 脚手架中已经默认有该配置，无需手动配置
编译 JSX 语法的包为：@babel/preset-react

5 jsx使用js表达式

5.1 嵌入表达式

数据存储在JS中

语法：{js表达式}

注意：语法中是单大括号，不是双大括号

const name = 'Jack'
const dv = (
<div>你好，我叫：{name}</div>
)

5.2 注意点

单大括号中可使用任意的 JavaScript 表达式

JSX 自身也是 JS 表达式

const h1 = <h1>我是JSX</h1> 
const dv = (
<div>嵌入表达式：{h1}</div>
)

注意：JS 中的对象是一个例外，通常只会出如今 style 属性中

注意：不能在{}中出现语句（好比：if/for 等）

6 jsx条件渲染

场景：loading效果

条件渲染：根据条件渲染特定的 JSX 结构

可使用if/else或三元运算符或逻辑与运算符来实现

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

let isLoading = true;

let load = () =>{
  if(isLoading){
    return <h2>加载中。。。</h2>
  }
  return <h2>加载成功</h2>
}

// let load = () => {
//   return isLoading ? <h2>加载中。。。</h2> : <h2>加载成功</h2>;
// };

let el = <div>{load()}</div>;

ReactDOM.render(el, document.getElementById("root"));

7 列表渲染

若是要渲染一组数据，应该使用数组的 **map() **方法

注意：渲染列表时应该添加 key 属性，key 属性的值要保证惟一

原则：map() 遍历谁，就给谁添加 key 属性

注意：尽可能避免使用索引号做为 key

import React from "react";
import ReactDOM from "react-dom";
//定义数据
const songs = [
  { id: 1, name: "痴心绝对" },
  { id: 2, name: "像我这样的人" },
  { id: 3, name: "南山南" },
];
//生成react元素
let arr = songs.map(v=><p key={v.id}>{v.id+"---"+v.name}</p>);
let el = <div>{arr}</div>;
//渲染
ReactDOM.render(el, document.getElementById("root"));

8 jsx样式处理

8.1 行内样式

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}> JSX的样式处理</h1>

注意：属性名称驼峰命名,而且属性值要用引号包裹起来

8.2 类名

// 导入样式文件
import './index.css'
//使用
<h1 className="title"> JSX的样式处理</h1>