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:'你好，世界！'
       }