这是一次系统学习react的记录，github有原作者，感兴趣的同学可以前往(github.com/Asabeneh/30…)
之前有在B站看过完整的react教程，但工作中并没有用到react来搭建项目就基本忘光了，开设本次记录专栏的目的是为了记录学习的成果，让学习有输出加深记忆，为学习的时间添加标记。
本次记录为day02的学习内容，具体如下：
-
什么是react？
-
JSX
- JSX元素
- JSX中的样式和类名
- 将数据注入JSX元素
什么是React？
react是由Fecebook开发，于2013年5月发布的，是一个用于构建可重用用户界面的JS库；react和vue一样都是用于构建单页面应用的。
JSX
JSX其实是JavaScript XML；JSX允许使用JS代码编写HTML元素。在react中创建元素可以不使用createElement()，只使用JSX元素。使得在react中编写HTML元素更方便简洁。由于浏览器不能直接编译JSX，需要使用babel将JSX转译为js。
JSX元素
const jsxEle = <h1>这是一个JSX元素</h1>
这个看起来像js又像html的就是JSX元素
const title = <h2>标题</h2>
const content = <h2>内容</h2>
上面是两个JSX元素。
当真实的工作场景需要有多个html元素的组件时，要怎么写呢
const header =(
<header>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>小标题</h3>
<p>内容</p>
<small>日期</small>
</header>
)
上面代码就是创建了一个包含多个html元素的JSX元素。
展示JSX元素
由于是一个循序渐进的过程，这里并没有直接使用脚手架创建react项目，而是使用CDN。详见原作者文档
const rootElement = document.querySelector('.root')
const app = (
<div>
{header}
{main}
{footer}
</div>
)
ReactDOM.render(app, rootElement)
这里的document.querySelector('.root')获取根元素，并分配给rootElement变量名。这里就是唯一直接与DOM交互的地方。
JSX设置样式
第一种是直接行内样式
<header style={{ border: '2px solid orange', color: 'black', fontSize: '18px' }}></header>
第二种是将样式注入对象
const style = { border: '2px solid orange', color: 'black', fontSize: '18px' }
<header style={style}></header>
还有一种是使用类选择器，需要注意由于class是js的保留字所以不能使用html标签的class属性，而是用className代替
<header className='header-wrapper'></header>
JSX填充数据
//定义数据
const welcome = 'react Challenge Day 2'
const title = 'Getting Started'
const subtitle = 'JavaScript Library'
const author ={
firstName:'张',
lastName: '三'
}
const date = 'Jan 3, 2023'
//填充数据
const header = (
<header>
<div className='header-wrapper'>
<h1>{welcome}</h1>
<h2>{title}</h2>
<h3>{subtitle}</h3>
<p>Instructor: {author.firstName}·{author.lastName}</p>
<small>Date: {date}</small>
</div>
</header>
)
JSX列表数据的key
const techs = ['HTML','CSS','JavaScript']
const techsFormatted = techs.map((tech) => <li>{tech}</li>)
这样写是没有问题，页面也能展示，但是控制台会出现红色报错，原因是循环生成的多个组件缺少key的标识
解决如下：
const techs = ['HTML','CSS','JavaScript']
const techsFormatted = techs.map((tech)=><li key={tech}>{tech}</li>)
需要注意的是，这个key必须是唯一的，有相同的值，则这个属性不能作为key使用。
第二天挑战的内容记录结束。
