react学习（1）

1：创建react项目

npx create-react-app react-basic

2：jsx

含义：是javascript和xml（html）的缩写，表示在js代码中编写html模版结构，是react中编写UI模版的方式。
优势：（1）HTML的声明式模版写法；（2）js的可编程能力
本质：jsx并不是标准的js语法，是js的扩展语法，浏览器本身不能识别，需要通过解析工具（babel）解析之后才能在浏览器中运行。

• jsx中可以使用大括号{}来识别javascript中的表达式，比如常见的变量，函数调用，方法调用等。

• jsx中列表渲染需要使用数组的map方法

<ul>
  {list.map(item=><li key={item.id}>{item.name}</li>)}
</ul>

• jsx中的条件渲染:可以通过逻辑与运算符&&或者三目运算符（？：）来实现基础的条件渲染

{flag&&<span>如果falg为true，就会展示这个内容</span>}
{loading?<span>Loading.....</span>:<span>加载完成。</span>}

• jsx中的复杂条件渲染:自定义函数+if判断

<div className='app'>{getArticleTemp()}</div>

function getArticleTemp(){
  if(articleTemp === 0){
      return <div>无图模式</div>
  }else if(articleTemp === 1){
      return <div>单图模式</div>
  }else {
      return <div>多图模式</div>
  }
}