React 自学（一）

上班快一年，公司项目的技术栈一直是vue，平时也基本是vue搬砖。某天突然需要使用别的部门开发的视频解析组件，而这个组件的bug多少有点影响使用，领导便让我在原组件的基础上进行修改，在部门项目中使用自己修改之后的组件。当将组件代码克隆下来后发现是用React写的。我在React上真是属于小白中的小白，只是会一些简单的使用，于是痛定思痛，决定从头开始学习React（ps：黑马视频来一波，下文为简单笔记）。

首先，就不啰嗦React是什么了，直接开始初始化React项目。一般使用三种方式：

1. npx create-react-app my-app
2. npm init react-app my-app
3. yarn create react-app my-app

创建之后便开始JSX的学习，哦不，是复习了😭 直接进入src文件夹下的index.js删除全部内容后：

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'))）

完成之后就可以开始在第二部分中开始练习JSX啦

简单例子1

const name =()=>'Jack'
const age = <div>hhh</div>

const title=(
<h1> 
<p>Hello JSX , {name()}</p> 
{age} 
</h1>)

简单例子2（简单条件渲染）

const isLoading=true;
// const isLoading=false;

//if-else
const loadDate =()=>{
if(isLoading){
return <div>loading...</div>
}
return<div>数据加载完成啦1，2，3，4....</div>
}

//三元表达式
//const loadDate =()=>{
//return isLoading?<div>loading...</div>:<div>数据加载完成啦1，2，3，4....</div>
//}

//逻辑与或
// const loadDate =()=>{
// return isLoading && <div>loading...</div> || <div>数据加载完成啦1，2，3，4....</div>
// }

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

简单例子3（简单列表渲染）

const songs=[
{ id:1,name:'两只老虎'},
{ id:2,name:'老鼠爱大米'},
{ id:3,name:'爱如火'}
]

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

样式有className 和style两种方式，跟vue差不多，就不过多赘述。

下一节就开始学习React中最重要的部分--组件啦！