重温react-01

创建react项目

// 第一步
npm install create-react-app -g
// 第二步
create-react-app my-app

目录介绍

my-app/
  README.md
  # 项目第三方依赖包
  node_modules/
  
  package.json
  # 一般用来存放静态依赖
  public/
    index.html
    favicon.ico
  # 存放项目源代码，注意只有放在scr目录下的文件才会被webpack打包
  src/
    App.css
    App.js
    App.test.js
    index.css
    # 入口文件
    index.js
    logo.svg

二次封装webpack

运行下面指令之后,会出现一个config.js文件,

npm run eject

配置路径别名@

在webpack.config中添加 , 即可完成路径别名的配置

 alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        // 添加路径
        '@': path.resolve(__dirname, '../src')
      },

项目创建一个HelloWorld

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

learnReact.js

import React from "react";

// 创建一个名为LearnReact的React函数组件

export default function LearnRcact() {
    return (
        <div>
            <h1>Hello, world!66</h1>
            <p>This is a paragraph.</p>
        </div>
    )
}

什么是jsx?

设想 

const element = <h1>Hello, world!</h1>

他既不是html也不是字符串，他是什么呢？它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

// 可以在变量后面直接跟html，但是注意不能换行
const jsx = <div></div>
      
// 如果想换行则可以加一个括号,注意只能有一个根元素
const jsx2 = (
  <div>
    <div>你好，jsx</div>
  </div>
)

// 在jsx中使用变量用 {} 括起来，里面就是我们在外部声明的变量
const hello = '你好'
const jsx3 = (
  <div>{hello}</div>
)


// 在jsx中做判断是否显示，一般用 三元运算
const is = true
const jsx5 = (
  <div>
    {is ? <div>你好，我显示了</div> : null}
    { is && <div>你好，我显示了</div> }
  </div>
)

jsx中使用css

import React, { Component } from 'react'
// import './learnReact.sass'
export default class LearnReact extends Component {
  render() {
    const is = true
    const hello = "helloworld~~!"
    return (
      <div>
        {
          is ? <div style={{ color: 'red' }}>{hello}</div> : null
        }
        {
          is && <div>{hello}</div>
        }
      </div>
    )
  }
}

react中的点击事件和数据的修改和存储数据一系列基础知识

import React, { Component } from 'react'
export default class onClickReact extends Component {
    constructor(props) {
        super();
        this.state = {
            number: 1,
            book: ['js', 'css', 'html']
        }
    }
    hello() {
        console.log(this);
    }
    add() {
        console.log(66666);
    }
    addNumber() {
        // 点击可以获取最新的值,jsx的回调函数
        this.setState({
            number: this.state.number + 1
        }, () => {
            console.log(this.state, '这个是最新的值');
        })
    }
    changeArrMessage() {
        this.setState(pre => ({
            // book: [...pre.book, 'react'] //展开往后面添加一条数据
            book: ['react']
        }))
    }
    render() {
        console.log(this);
        return (
            <div>
                {/* 普通点击事件 */}
                <div onClick={this.hello}>onClickReact</div>
                {/* 箭头函数点击事件 */}
                <div onClick={() => this.add()}>箭头函数点击事件</div>
                {/* 加法的点击事件 */}
                <button style={{ background: 'green', color: 'white' }} onClick={() => this.addNumber()}>点击会增加number的值</button>
                {/* number的值 */}
                <div>
                    {this.state.number}
                </div>

                {/* 下面这个是数组的值 */}
                <div onClick={() => this.changeArrMessage()}>
                    点击改变数组
                </div>
                <div>
                    666{this.state.book}
                </div>
                <hr />
                <div>
                    {this.state.book.map((item, index) => {
                        return <div style={{ margin: '10px' }} key={index}>
                            {item}
                        </div>
                    })}
                </div>
            </div>
        )
    }
}

import React, { Component } from 'react'
export default class variable extends Component {
    constructor(props) {
        super();
        this.state = {
            name: '张三',
            age: 18,
            sex: '男',
            show: false
        }
    }
    updateUserinfo() {
        this.setState({
            name: '李四',
            age: 20,
            sex: '女',
            show: true
        })
    }
    render() {
        return (
            <div>
                <div>
                    这是原来的: {this.state.name}---{this.state.age}---{this.state.sex} --{this.state.show ? '显示' : '不显示'}
                </div>
                <div>
                    <button onClick={() => this.updateUserinfo()}>点击修改之后的数据</button>
                </div>
                <div>
                    {this.state.show ? <div>这是修改之后的数据: {this.state.name}---{this.state.age}---{this.state.sex}</div> : ''}
                </div>
            </div>
        )
    }
}

react中的循环

import React, { Component } from 'react'
export default class mapElement extends Component {
    state = {
        infos: [
            {
                name: '张三',
                age: 18,
                sex: '男'
            },
            {
                name: '李四',
                age: 20,
                sex: '男'
            },
            {
                name: '王五',
                age: 22,
                sex: '男'
            }
        ]
    }
    render() {
        return (
            <div>{
                this.state.infos.map((item, index) => {
                    return <div key={index}>姓名：{item.name}，年龄：{item.age}，性别：{item.sex}</div>
                })}</div>
        )
    }
}

以上所有代码的效果图