一：react入门安装
CDN引入方式： www.bootcdn.cn/ 此处可以找到相对应到cdn资源，只截了一小块，有兴趣到可以进去查看
推荐使用npm 方式：
npm i -g create-react-app mac版本 会遇到权限问题 前面加个sudo即可 全局安装 安装好 create-react-app -V 看版本
构建项目 create-react-app 项目名
对于package.json中的配置：
"scripts": {
"start": "react-scripts start", 启动项目
"build": "react-scripts build", 打包项目
"test": "react-scripts test", 单元测试
"eject": "react-scripts eject"
此作用为把(react-scripts)内置的webpack暴露出来 webpack.config.js 重新做配置可以利用eject
⚠️ 此行为不可逆
},
二：react部分语法解释
/**
* 构建视图，返回值是一个用来描述视图到虚拟dom
* React.createElement 参数：type props children
* type 节点类型
* props 属性 本身是一个对象
* children 内容或子节点
*/
// let header = React.createElement("header",{className: "hhhhh"},"页面头部");//创建虚拟节点
// ReactDOM.render('Hello', document.getElementById('app'),()=>{console.log('回调函数')});
/**
* 将构建好的视图渲染到真实dom
* ReactDOM.render 参数：inner container callback
* inner 要渲染的内容
* container 要渲染的内容存放容器
* callback 回调函数
*/
/**
* jsx react到一个语法糖 JavaScript+xml
*/
let header = <header className="header div" id="header">
<h1 id="logo">kkkkk</h1>
<nav>
<a href="#">a1</a>
</nav>
</header>
ReactDOM.render(header, document.querySelector('#app'),()=>{console.log('回调函数')});
jsx的一些注意事项：
jsx并不是字符串，他是一个值，此时的<header></header> 就是值
想要多个值在这里必须有一个顶层父级
不想要在dom结构上显示可以使用fragement包裹或空标签 <></>
fragement是一个组件，需要引入react
jsx区分大小写 元素全部小写 组件首字母大写
let header = <Fragement><header className="header div" id="header">
<h1 id="logo">kkkkk</h1>
<nav>
<a href="/index">a1</a>
</nav>
</header>
<h2></h2>
</Fragement>
jsx 的插值表达式
1 插入表达式 let str = 2 {str}
2 插入注释 {/** */}
不同类型在插值中输出：
只有number和字符串OK，boolean，null，undefined，symbol输出会被忽略
普通对象是不能作为内容输出的
构建组件
1:创建一个js
react 组建分两种，一种是函数组件 一种是类组件
以上图片就是类组件创建方式：
类组件中注意事项：
类组件必须继承component
组件名字必须大写
类组件中必须要有一个render方法，该方法返回值是当前组件要构建到视图
2: 去到入口文件index.js把新建到文件引进来
总结
今天主要学习了一些基础，如何安装react和安装的方式；
学习了一些基础语法：更多的是要掌握如何使用jsx；
最后学习了一下如何构建一个简单的组件
