实习12.3（antd）

使用create-react-app方式引入antd样式

由于create-react-app构建React App的方式推荐zero-configuration（零配置），所以只能通过 npm run eject 的方式来讲所有的配置项暴露出来。要注意的eject操作是不可逆转的。
安装完 antd , 默认所有的组件都会被引入，那项目将会变得很庞大，antd提供了按需加载的方式
引入方法：进入create-react-app目录，然后npm install antd

标签

虽然 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

a标签

 <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>

rel标签

定义和用法
标签的 rel 属性用于指定当前文档与被链接文档的关系。

用于 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 标签中同时使用。
翻译：collapse-崩溃

animation表示动画（css3中的属性）

定义和用法
animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值： none 0 ease 0 1 normal
继承性： no
版本： CSS3
JavaScript 语法： object.style.animation=“mymove 5s infinite”
语法
animation: name duration timing-function delay iteration-count direction;

值与对应描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

meta标签

定义和用法

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

@keyframes

定义和用法
通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 描述
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。

合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。

例如：
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

或者

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

翻译：infiinate-线性

noscript标签

定义和用法
noscript 元素用来定义在脚本未被执行时的替代内容（文本）。

此标签可被用于可识别

提示和注释：
注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。

注释：无法识别

单页面显示

就是多个页面放在一个页面显示

antd中组件button的部分使用

首先要引入antd：
在js中和css中都要引用

翻译：dashed-虚线
primary-主要的
mount：安装
node：节点

antd中input组件的基础使用

ReactDOM.render( ______, mountNode);
______上填：<Input placeholder=“随便填” /
再加一个>

form表单

Form表单定义
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

我们为 form 提供了以下三种排列方式：

水平排列：标签和表单控件水平排列；（默认）
垂直排列：标签和表单控件上下垂直排列；
行内排列：表单项水平行内排列。

组件传值

state={
test:‘test’,
}

render() {
const { test } = this.state;
this.setState({
test: ‘hello’
})

 <Test test1={test} 
 加/>

const { test1 } = this.props;