全局安装create-react-app

npm i -g create-react-app

创建一个项目

create-react-app 项目名

---------------------------------

如果不想重新安装

npx create-react-app myapp

编写第一个react程序

JSX：

babel的JSX编译器实现：由2自动转化为1

import React from 'react';
import ReactDOM from 'react-dom'
ReactDOM.render(<div>1111111111</div>, document.getElementById('root'));

import React from 'react';
import ReactDOM from 'react-dom'
ReactDOM.render(React.createElement('div', {
    id: 'aaa',
    class: "bbb"
},"111111111111111"), document.getElementById('root'));

但是该写法在react18中已不再支持：

import React from 'react';
import ReactDOM from 'react-dom/client'
import './01-base/01-class组件'
// ReactDOM.render(React.createElement('div', {
//     id: 'aaa',
//     class: "bbb"
// }, "111111111111111"), document.getElementById('root'));
const root = ReactDOM.createRoot(
    document.getElementById('root')
  );
  root.render(React.createElement('div', {
      id: 'aaa',
      className: "bbb"
  }, "111111111111111"));

组件（复用，页面结构清晰）：

class组件：

import React from "react";
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        );
    }
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom/client'
import  App from  './01-base/01-class组件'
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<App />);

函数式组件：

函数组件16.8组件时没有状态（无状态组件）

16.8之后 react hooks

function App(){
    return(
        <div>
            <h1>Hello World</h1>
        </div>
    )
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom/client'
import  App from  './01-base/02-函数式组件'
const root = ReactDOM.createRoot(
  document.getElementById('root')
);

root.render(<App />);

组件之间的嵌套：

import React, { Component } from 'react'
class Child extends Component{
    render(){
        return(
            <div>Child</div>
        )
    }
}
class Navbar extends Component {
    render() {
        return (
            <div>
                Navbar
                <Child></Child>
            </div>
        )
    }
}
class Swiper extends Component {
    render() {
        return (
            <div>swiper</div>
        )
    }
}
const Tabber=()=><div>tabber</div>
export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar></Navbar>
                <Swiper></Swiper>
                <Tabber></Tabber>
            </div>
        )
    }
}

import React from 'react';
import ReactDOM from 'react-dom/client'
import  App from  './01-base/03-组件的嵌套'
const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(<App />);

组件的样式(需要写成驼峰写法（行内样式）)

import React, { Component } from 'react'
import './css/01-index.css'

export default class App extends Component {
  render() {
    var myname="liuyue"
    var obj={   
        backgroundColor:'red',
    }
    return (
      <div>
        {10+20}-{myname}
        {10>20?'aa':'bb'}
        <div style={obj}>样式</div>
        <div style={{backgroundColor:'yellow',}}>样式</div>
        <div className="active">样式</div>
        <label htmlFor="username">用户名：</label>
        <input type="text" id='username'/>
      </div>
    )
  }
}

事件绑定：

import React, { Component } from 'react'

export default class App extends Component {
    a = '测试A'
    render() {
        return (
            <div>
                <input type="text" />
                <button onClick={() => {
                    console.log(this.a)//this指向render的this，所以可以访问a
                }}>Click Me</button>
                <button onClick={this.handleClick.bind(this)}>Click Me</button>
                <button onClick={this.handleClick1}>Click Me</button>
                <button onClick={() => { this.handleClick2() }}>Click Me</button>
            </div>
        )
    }
    handleClick() {
        console.log('clicked',this.a)//不可访问a,this不指向render，访问a报错,解决方法bind（this）
    }
    handleClick1 = () => {
        console.log('clicked1')//可以访问a
    }
    handleClick2() {
        console.log('clicked2')//可以访问a
    }
}
/*
call,改变this，自动执行函数
apply，改变this，自动执行函数
bind，改变this，不会自动执行
*/

推荐第四种，因为可传参！！！

React并不会真正绑定事件到每一个具体的元素上，而是采用事件代理的模式，通过冒泡和捕获的方式

event对象：和普通浏览器一样，时间handler会被自动传入一个event对象，这个对象和普通浏览器event对象所包含的方法和属性都是基本一致的，不用的是React中的event对象并不是浏览器提供的，而是它自己内部所构建的，它同样具有event.stopPropagation、event.preventDefault这些常用的方法

event.stopPropagation 方法用于阻止事件的传播。当一个事件发生时，它会沿着文档层次结构传播，直到被阻止。使用 event.stopPropagation 方法可以防止事件继续传播到文档的其他部分，从而防止触发其他事件处理程序。

event.preventDefault 方法用于阻止事件的默认行为。当一个事件发生时，浏览器通常会有一些默认的行为，例如点击链接时会导航到链接的目标页面。使用 event.preventDefault 方法可以防止浏览器执行这些默认行为，从而让开发人员可以自己处理事件。

state：

import React, { Component } from 'react'
export default class App extends Component {
    a = 1
    // state = {
    //     mytext:"收藏",
    //     myShow:true
    // } 
    constructor(){
        super()
        this.state = {
            mytext:"收藏",
            myShow:true,
            myname:"kerwin"
        }
    }
    render() {
        // var text="收藏"
        return (
            <div>
                <h1>欢迎来到react开发-{this.state.myname}</h1>
                <button onClick={()=>{
                //    this.state.mytext = "取消" //不用直接修改状态
                    this.setState({
                        // mytext:"取消收藏"
                        myShow:!this.state.myShow,
                        myname:"xiaoming"
                    }) // 间接修改状态
                    if(this.state.myShow){
                        console.log("收藏的逻辑")
                    }else{
                        console.log("取消收藏的逻辑")
                    }
                }}>{this.state.myShow?'收藏':"取消收藏"}</button>
            </div>
        )
    }
}