react学习总结
原文链接：https://blog.csdn.net/weixin_41154636/article/details/97820873
前言
前端可以做到读写数据、切换视图、用户交互，这意味着，网页其实是一个应用程序，而不是信息的纯展示。这种单张网页的应用程序称为 SPA（single-page-application）。
2010年后，前端工程师从开发页面（切模板），逐渐变成了开发“前端应用”（跑在浏览器里面的应用程序）。目前，最流行的前端框架 Vue、Angular、React 等等，都属于 SPA 开发框架。
react脚手架建立工程
1、安装
npm install create-react-app -g
2、创建
create-react-app react-demo (react-demo项目名)
3、初始化
cd react-demo
npm install or cnpm install or yarn install
4、运行
yarn start
创建一个helloWorld Demo
引入模块
//第一步 导入react
import React,{Component} from 'react';
import '../assets/css/index.css'
import logo from '../assets/images/logo.svg';
import '../assets/css/App.css';
/**
* 绑定原生属性注意：
* class 要换成className
* for 要换成htmlFor
* style 要用{}包裹成对象
*/
//第二步，编写组件类并继承React.Component
class Home extends Component{
constructor(){
super();
//定义数据
this.state={
msg:'你好，世界！'
}
}
//第三步，重写render()方法，用于渲染页面
render(){
return (
<div>
<h1>{this.state.msg}</h1>
<img src={logo} width='500px'></img>
</div>
);
}
}
//第四步，导出该类
export default Home;
然后启动工程即可完成一个简单的demo
yarn start
react是面向组件的，通过JSX语法来操作虚拟dom节点，如果state的数据发生了变化则会触发对应的dom的刷新。JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。所有标签必须闭合
注意在本地引用img等资源时，需要通过{xx}对象形式引用。如果是网络图片，直接用url引用即可。
JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。所有标签必须闭合
react 通过state来定义和绑定数据，但这种绑定并不是MVVM那种双向数据绑定，在JSX中要使用时通过 this.state.xxx来使用
知识点
1、目录结构分析
用脚手架创建的工程的目录是有些不完整的，需要补全（为了方便归档）
component文件主要放组件，model放数据模型，App.js是默认的根组件，index.js是入口文件，相当于main，yarn.lock是项目生成的临时文件，package.json是依赖管理文件（类似maven的pom文件），nodel_modules是存放依赖包的文件夹
2. 创建组件
第一步 导入react
第二步，编写组件类并继承React.Component
第三步，重写render()方法，用于渲染页面
第四步，导出该类
3. JSX注意事项
如果要在模板中嵌套多个HTML标签，需要使用一个父元素对其进行包裹
<div>
<h1>{this.state.msg}</h1>
<img src={logo} width='500px'></img>
</div>
4.绑定数据或对象
js中定义对象用{},其实就是restful风格的东东。
类似于
{
title:"xxx",
content:"xxxx"
}
数据的定义用[ ]，一对方括号即可。
在react中绑定对象只需要在state中定义即可
this.state={
msg:'你好，世界！'
}