以下只是学习笔记整理。感谢pink老师！

react 基础阶段

react概述

什么是react？

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

- 用户界面:HTML页面(前端)

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

- 如果从 MVC 的角度来看，React 仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。

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

## react的基本使用 ### react的基本使用（常用方法说明） ## react脚手架的基本使用 ### react脚手架的基本使用（细节补充） ### react 脚手架中使用react ## react 基础阶段总结

JSX的学习

JSX的基本使用

1.1 createElement() 的问题

1. 繁琐不简洁。
2. 不直观，无法一眼看出所描述的结构。
3. 不优雅，用户体验不爽

1.2什么是JSX？

1. JSX是JavaScript XML的简写，表示在JavaScript代码中写XML(HTML)格式的代码
2. 优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率

JSX是react的核心

为什么脚手架中可以使用JSX语法

JSX的注意点

在JSX中使用JavaScript表达式

JSX在使用JavaScript表达式的注意点

JSX的条件渲染

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


const isLoaing=true;
//if-else 模式
const loadData =()=>{
if(isLoading){
return <div>数据加载中，请稍后...</div>
}
return(
<div>数据加载完成，此处显示加载后的数据</div>
)
}
// 三元表达式

const  loadData =()=> {
    return  isLoading?(<div>数据加载中，请稍后...</div>):(<div>数据加载完成，此处显示加载后的数据</div>)
}
// 逻辑与运算符：（逻辑中断）
const  loadData =()=> {
    return  isLoading && (<div>数据加载中，请稍后...</div>)
}


const title =(
<h1>
    条件渲染：{ loadData() }
  </h1>
)

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

JSX的列表渲染

JSX的样式处理

JSX阶段总结