React框架学习（一）

一丶创建脚手架

1.使用npx create-react-app my-app指令创建脚手架(npx是npm下载工具包中自带，无需单独下载，版本低于@5自行引入)

2.启动npm start

二丶JSX基本使用（JSX就是javascript XML缩写）

1.常规写法（不推荐）

import React from 'react';
import ReactDOM from 'react-dom/client';

// 创建元素 标签/属性/内容
const title =React.createElement("h1",{name:"我是元素h1的属性"},"创建react节点元素")
// 渲染元素 渲染的元素/渲染到那
ReactDOM.render(title,document.getElementById("root"))

2.JSX表达式写法（推荐）

import React from 'react';
import ReactDOM from 'react-dom/client';// JSX写法（推荐使用）

const name="js表达式"
const title=<h1>我写的是JSX写法渲染,我叫{name}</h1>
ReactDOM.render(title,document.getElementById("root"))

注意点：JSX是一个表达式，本质就是React.creatElement()方法的语法糖

1.驼峰命名法 ：JSX 表达式中 class 写作 className

<div className="container"></div>

2.style 接收一个对象：style 接收一个对象，而不是字符串

let style = {
    width: "100px",
    height: "100px",
    background: "red"
};
ReactDOM.render(
    //  写法一
    <div className="box" style={style}></div>,
    //  写法二
    <div className="box" style={{width: "100px", height: "100px",background: "red"}}></div>,
    document.querySelector("#root")
);

3.JSX 表达式只有一个父元素

ReactDOM.render(
    <div>
        <div className="box" style={style} />
        <input type="text" />
    </div>,
    document.querySelector("#root")
);

不想让父级元素渲染就使用React.Fragment

// 标准写法
render() {
  return (
    <React.Fragment>
      Some text.
      <h2>A heading</h2>
    </React.Fragment>
  );
}


// 简化写法
render() {
  return (
    <>
      Some text.
      <h2>A heading</h2>
    </>
  );
}

三丶条件渲染（if else / 三元表达式 / 逻辑与）

import ReactDOM from 'react-dom'

// 条件渲染
// 1 if-else

// 根据某个条件来决定渲染什么内容
const isLoading = true
const loadData = () => {
  if (isLoading) {
    // 加载中...
    return <div>数据加载中....</div>
  } else {
    // 加载完成
    return <div>数据加载完成~</div>
  }
}

const el = (
  <div>
    <h1>条件渲染：</h1>
    {loadData()}
  </div>
)

// 渲染
ReactDOM.render(el, document.querySelector('#root'))

四丶列表渲染（map映射）注意一定要加key值，来作为唯一的标识

import ReactDOM from 'react-dom'

// 列表渲染
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]

// list => [ <li>痴心绝对</li>, <li>像我这样的人</li>, <li>南山南</li> ]
// const lis = songs.map(item => {
//   return <li key={item.id}>{item.name}</li>
// })

// 简化：
const lis = songs.map(item => <li key={item.id}>{item.name}</li>)
const lis1 = songs.map(item => <li key={item.id}>{item.name}</li>)

const el = (
  <div>
    <ul>{lis}</ul>
    <ul>{lis1}</ul>
  </div>
)

// 渲染
ReactDOM.render(el, document.querySelector('#root'))

五丶React组件

1.函数组件（无状态组件，只会静态显示数据）

import ReactDOM from "react-dom";

1.普通函数式组件
function Hello() {
  return <h1>Hello 组件</h1>
}

2.箭头函数
const Hello = () => {
  return <h1>箭头函数创建的组件</h1>
}

3.不渲染任何内容
const Hello = () => {
  return null
}

渲染组件
ReactDOM.render(<Hello />, document.querySelector("#root"));

2.class类组件（有状态组件，可以动态显示ui数据）

import ReactDOM from 'react-dom'
import React, { Component } from 'react'

1.class 需要继承React.Component父类所以需要单独导入React
2.必须有render方法且必须有返回值

1.标准写法
class Hello extends React.Component {
  render() {
    // return null
    return <div>Hello class component</div>
  }
}
2.简写
class Hello extends Component {
  render() {
    // return null
    return <div>Hello class component</div>
  }
}

// 渲染组件
ReactDOM.render(<Hello />, document.querySelector('#root'))

3.组件抽离

 六丶React事件绑定

1.点击事件

import { Component } from "react";
import ReactDOM from "react-dom";

1.直接写处理函数
class Hello extends Component {
  render() {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        {/*
          onClick 用来绑定点击事件
          花括号中的 () => {} 就是事件处理程序
        */}
        <button
          onClick={() => {
            console.log("你点了");
          }}
        >
          +1
        </button>
      </div>
    );
  }
}


2.调用处理函数
class Hello extends Component {
  // 创建一个方法， 作为 按钮 的事件处理程序
  handleClick() {
    console.log('独立的函数，你点了')
  }

  render() {
    return (
      <div>
        <h1>计数器：</h1>
        <button onClick={this.handleClick}>+1</button>
      </div>
    )
  }
}
const Hello = () => {
  // 事件处理程序
  const handleClick = () => {
    console.log("函数组件中绑定事件");
  };

  // 直接将 事件处理程序的名称 传递给 onClick 即可
  return <button onClick={handleClick}>+1</button>;
};

// 渲染组件
ReactDOM.render(
  <>
    <Hello />
  </>,
  document.querySelector("#root")
);

2.事件对象event

import { Component } from "react";
import ReactDOM from "react-dom";

class Hello extends Component {
  handleClick(e) {
    // 阻止浏览器默认行为
    e.preventDefault();
    console.log("独立的函数，你点了", e);
  }

  render() {
    return (
      <div>
        <h1>计数器：</h1>
        <a href="http://itcast.cn/" onClick={this.handleClick}>
          程序员
        </a>
      </div>
    );
  }
}

// 渲染组件
ReactDOM.render(
  <>
    <Hello />
  </>,
  document.querySelector("#root")
);