基于React框架进行编写第一个应用组件（函数和类）

1.React设计的核心思想

     一切皆是组件，最小可以化到一个元素 --在react开发中，所有都是基于组件开发和封装（因为react没有html、所有的东西都是js对象；在底层原理是 v层“框架”--仅仅用于视图的库 框架里的虚拟dom和diff算法-实现的视图数据驱动，由内部数据setState使用才能更新页面）

   所有的数据都是数据单向流  -- 单向流，数据改变是可以追溯的，使用复杂  -- state数据、扭转方法；

双向数据流，使用非常简单，数据问题不可追溯。

2.React开发特性

   社区开发 - - react中很多的库都是社区维护（改变性很多，不稳定性更多）；

react只有react核心库是官方维护，其它都是社区维护（就需要独立安装）

3.脚手架的安装

   可以使用本地的脚手架，也可以使用线上的脚手架

   create-react-app 这个脚手架的名字有一个简写：cra

   cra4.x在2021年12月份已经更新用不了，因为5.x版本刚刚发布，

使用5.x版本有硬性要求：1.node.js必须高于或等于14.x（nodejs的单版本号不要使用）

2.webpack不要安装全局的，如果是全局有安装，推荐卸载（npm uninstall -g webpack webpack-cli 和 npm cache clean -f）清除缓存 ，一定要用全局webpack，唏嘘使用5.x这个版本

  本地：cnpm i -g create-react-app

  网络：npx命令->npx create-react-app my-app  (不用全局安装cra脚手架)

3.脚手架的使用

    推荐不要本地安装cra，使用线上：npx create-react-app my-app

4.认知react原生webpack配置

    在react中经常需要些测试代码 -- 单元测试，使用“test” : “react-scripts test” 命令进行单元测试

    “eject”：“react-scripts eject” 释放脚手架的所有集成功能 --只能释放，不能返回（如果有架构师，或则webpack学习非常好，可以释放否则最好不要释放，一般都是使用社区来进行配置 webpack）

     执行释放命令：npm run eject

一、编写第一个react应用

    react开发没有html这样的模板，所有的代码都是js，所有的组件都是js文件（.jsx  - - 这个是以前的老版本的react组件文件，如果是ts开发，文件名为：tsx）

   所有的react文件第一行都是引入React框架

    

//引入react框架
import React from 'react'
//在React项目中，实例入口文件必须调用render(react-dom库)方法把虚拟dom，组件挂载到真实dom
import ReactDom from 'react-dom'
//把组件渲染到页面上 - - 这方法只有两个参数，顺序不能乱
//render(element:React.DOMELement,container:ReactDom.Container)
//element -> 需要传递一个元素
//container->页面容器
ReactDom.render(
  <h1>Hello React</h1>,
  document.getElementById('root')
)

 

还可以创建虚拟dom对象来进行渲染对象

//调用react中的方法来创建一个虚拟dom
//createElement(type:"input",props?:React.InputHTMLAttributes,...children:ReactNode[])
//第一个参数为标签名
//第二个参数为元素的属性
//...children:React.ReactNode[]=>从第三个参数开始为虚拟dom的子节点
//在react中可以使用creactElement来创建虚拟dom
let node =React.createElement(
   'div',
   {style:{background:'#f8f8f8',padding:'16px',border:'solid 1px #ddd'}},
  React.createElement(
   'h1',
   {}，
   'Hello React...'
)
)

//然后在render上渲染node对象就可以了

因为react在开发中只能使用js来编写页面，把页面代码当做js对象来写。(!!!在开发也是经常用对这段页面代码插入 这些是重点)

所以React团队创造了一种语法：JSX（把html代码节点作为一个js对象来进行编写- -JavaScript XML）

const node=<div><h1>好好学习！！！</h1></div>

上例子就是页面代码编写对象，还可以编写样式style只是需要注意对象的命名

 因为在js里声明对象它后面赋值就是一个代码块

 所以可以使用一个圆括号（）来包起来这样简洁好看里面还可以放花括号在放变量定义函数这些使用。

 //[].map(it=>{id:10,name:20})说明花括号不是一个对象，是一个模块

 //[].map(it=>({it:10,name:20}))可以使用（）来声明花括号是一个对象 所以声明对象时可以直接带花括号

//编写对象html的dom代码时或者其他建议加上圆括号来简洁好看
const node=(
  <div>
    <h1>好好爱react</div>
    <h2>天天向上,写写react的js代码</div>
  </div>
)

//因为代码是模块以后也会编写逻辑，所以最起码是一个方法 ，这就是函数方法的函数式jsx的由来

const node=function(){
//也可以这样写 function node(){
//所以这就是一个（函数）组件
//函数组件：在React中一个函数返回了一个JSX对象，那么这个函数就是一个函数组件
//函数组件将是以后的重点发展方法（推荐买一本吃灰的书 -- 函数式编程）
  return (
   <div>
   <h3>编写第一个html的函数对象</h3>
</div>
 )
}
//渲染函数组件时，使用node()这是匿名函数的组件渲染来渲染方法render参数
//组件使用时
//因为在html中的标签都是小写字母，所以组件小写会报错是有一个硬性要求组件
<Node/>
//在react中要求：是所有组件的首字母必须要大写才能使用

在函数组件里打印不了this是为未定义。所以是很简单，别名为：无状态组件

类组件：React一直在用的组件，老系统几乎都是类组件，直到React16.8版本发布，开始有函数组件

 

//起一个类，可以集成组件对象，然后成为一个类组件
//集成（继承）了Component对象，就必须实现它的render方法，在render方法中必须返回一个虚拟dom(JSX对象)
class Node extends React.Component{
   render(){
    console.log(this)
   return(
    <div>
        <h2>我爱编写react类组件this</h2>
     </div> 
)
}

}
//然后渲染类组件对象名就行 <Node/>

//类组件->它有this对象，千万不要把this对象搞丢就好，类组件的一个别名：状态组件

//在其他组件导入直接引入