abandon

React_Webpack_alias&&vscode_use_alias

发表于 2020-02-06 更新于 2024-11-28 分类于 other

今天看react的项目目录里view和components是分开的，但是view里面有引用components的组件，然后from'../../xxxx'这种丑陋的引用路径就冒出来了。

之前使用laravel的时候记得里面的js资源（laravel里面的前端资源真是一条龙。全栈工具箱。。。），有用@代替路径，于是进行了查找react 别名 react alias ，查找的结果是customize-cra、react-app-rewired 这两个库，一个用于更改webpack的alias ，一个用于代替react-scripts,

具体使用比较简单，引入上述包后，创建config-overrides.js在项目根目录下

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
const resolve = dir => path.join(__dirname, '.', dir)

module.exports = override(
    addWebpackAlias({
        ['@']: resolve('src')
    })
)

这样就可以稍微美化一下引用路径

然后问题就来了，vscode不知道你这个别名的路径了

(○´･д･)ﾉ fuck

不过这种东西查一下总是有办法的，而且办法超乎寻常的简单。。

在项目目录下创建一个jsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "build"
    ]
}

万事大吉 🐂🍺

阅读全文 »

jsx

发表于 2020-02-05 更新于 2024-11-28 分类于 other

首先看一段原生php代码（不了解php没关系，下面就是一个原生html内嵌了一段php代码，在服务端，php的解释器会将php代码转换成html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<?php
foreach(['a','b','c'] as $content){
    echo "
    <div>
    {$content}
    </div>
    ";
}
?>
</body>
</html>

客户端接收源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div>
    a
    </div>
    
    <div>
    b
    </div>
    
    <div>
    c
    </div>
    </body>
</html>

虽然现如今的php项目很少有这种代码了，但是过去，还有现在的一些单页面用php写的工具仍然有这种写法，一段html文本中内嵌了php代码，php或php-fpm将其中的<?php xxx ?>解析运行然后返回客户端。

接下来我们在看一下react的public/index.html和src/index.js

1	<div id="root"></div>

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

其中

1	<h1>Hello, {name}</h1>

这一段就是js和html的混合体，从是现实上感觉更像模板引擎，从使用上更像是html的增强，或者js的增强，就好比内嵌<?php xxx ?>既像html的增强，也像php增强。编码上更加的方便直观。

jsx

确实挺不错。

代码合久必分分久必合?

阅读全文 »

React[008]:ajax

发表于 2020-01-31 更新于 2024-11-28 分类于 other

http://jsonplaceholder.typicode.com/

阅读全文 »

React[007]:生命周期

发表于 2020-01-31 更新于 2024-11-28 分类于 web

文档图

阅读全文 »

React[006]:事件

发表于 2020-01-31 更新于 2024-11-28 分类于 web

this.xxx.bind(this,pram) 方法的传递

App.js


···
constructor() {
    super()
    this.state = {
      title: '待办事项',
      desc: '今日是，今日比',
      article: '<div>asdasd<i>asdasdasdasd</i></div>',
      todos: [
        {
          id: 1,
          title: '吃饭',
          assignee: 'leo',
          isCompleted: true
        }, {
          id: 2,
          title: '睡觉',
          assignee: 'xiaoming',
          isCompleted: false
        },
      ]
    }
  }

  addTodo = (todoTitle) => {
    console.log(todoTitle)
    this.setState({
      // push 返回的是数组长度，非数组
      // todos: this.state.todos.push({
      //   id: Math.random(),
      //   title: todoTitle,
      //   assignee: 'xxx',
      //   isCompleted: false
      // })
      todos: this.state.todos.concat({
        id: Math.random(),
        title: todoTitle,
        assignee: 'xxx',
        isCompleted: false
      })
    
    })
  }
···
        <TodoInput
          btnText="Add"
          addTodo={this.addTodo}
        />
···

input.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class TodoInput extends Component {
    static propTypes = {
        btnText: PropTypes.string
    }
    static defaultProps = {
        btnText: '添加todo'
    }
    constructor() {
        super();
        this.state = {
            inputValue: 'asdas'
        }
        // this.handleAddClickUseBind = this.handleAddClickUseBind.bind(this)
    }
    handleInputChange = (e) => {
        console.log(e.currentTarget.value);
        this.setState({
            inputValue: e.currentTarget.value
        })
    }

    handleAddClickUseBind() {
        console.log(this.state)
    }

    handleAddClickTest = (id) => {
        console.log(id)
        console.log(this.state)
    }

    handleAddClick = () => {
        this.props.addTodo(this.state.inputValue)
    }

    render() {
        return (
            <div>
                <input type="input" value={this.state.inputValue} onChange={this.handleInputChange}></input>
                <button onClick={this.handleAddClick}>{this.props.btnText}</button>
                <br />
                other test
                <button onClick={this.handleAddClickTest}>{this.props.btnText}</button>
                <button onClick={this.handleAddClickUseBind.bind(this, 123)}>{this.props.btnText}:usebind</button>
                <button onClick={() => { console.log(this.state) }}>{this.props.btnText}:use()->{'{'}{'}'}</button>
                <button onClick={this.handleAddClickTest.bind(this, 1234)}>{this.props.btnText}:use()->{'{'}{'}'}</button>


            </div>
        )
    }
}

阅读全文 »

React[005]01-如何显示定界符

发表于 2020-01-30 更新于 2024-11-28 分类于 web

结论如果在jsx中打印{}写法是这样的{'{'}{'}'},相当于{'{'}加一个{'}'}

jsx的语法是嵌套{}，所以今天我想打印{}这时候我按照其他语言默认实现都是加'\'转义，结果发现不管用，当时试了一下声明变量没问题，{}也不存在html转义码，当时有点懵。因为光想这是个特殊字符忘了以字符串的形式展示，具体实现上面已经说过，所以并没有在网上找到什么有用的信息。最后找到一个 html转jsx。这个定界符的做法算是一个和其他语言小小的差异吧，

php代码比较,php所有的字符都可以用，js所有的字符串都可以以字符串变量方式打印，总结上蛮奇怪的。蛤蛤

php -a
php > $a = 0;
php > echo "{$a}";
0
php > echo "\{$a}";
\{0}
php > echo "\{\$a}";
\{$a}
php > echo "\{\$a}";

阅读全文 »

React[005]传值给子组件

发表于 2020-01-30 更新于 2024-11-28 分类于 web

index.js 外部老生畅谈主要是循环用到了array.map 组件需要一层层传递如果需要透传可以使用{...todo}

TodoItemList

import React, { Component } from 'react'
import TodoItem from "./TodoItem";

export default class TodoList extends Component {
    render() {
        console.log(this.props)
        return (
            <ul>
                {
                    this.props.todos.map(todo => {
                        return (
                            <TodoItem
                                key={todo.id}
                                {...todo}
                            />
                            // <TodoItem
                            //     key={todo.id}
                            //     id={todo.id}
                            //     title={todo.title}
                            //     isCompleted={todo.isCompleted}
                            // />
                        )
                    })
                }
            </ul>
        )
    }
}

TodoItem

import React, { Component } from 'react'

export default class TodoItem extends Component {
    render() {
        return (
            <li>
                {this.props.title}{this.props.isCompleted ? '已完成' : '未完成'}
            </li>
        )
    }
}

数据改变

import React, { Component } from 'react'

export default class Like extends Component {
    constructor() {
        super()
        this.state = {
            isLiked: false
        }
    }

    handleLikedClick = () => {
        // 这种方式再react中是不允许的，这种方式会改变数据但是不会改变展示
        // this.state.isLiked = !this.state.isLiked;
        // 要修改数据就是用setState的方法

        // 方法一
        // this.setState({
        //     isLiked: !this.state.isLiked
        // })

        console.log('setstate外部先驱的this.state.isLiked:', this.state.isLiked)
        // 方法二
        this.setState((prevState) => {
            console.log(prevState)
            console.log('setstate内部的this.state.isLiked:', this.state.isLiked)
            return {
                isLiked: !prevState.isLiked
            }
        }, () => {
            // 由于setState 是异步的，所以要获取最新的state需要在回调中获取
            console.log(this.state)
        })
        console.log('setstate外部后续的this.state.isLiked:', this.state.isLiked)

    }

    render() {
        return (
            <div>
                <span onClick={this.handleLikedClick}>
                    {this.state.isLiked.toString()}: {this.state.isLiked ? '取消❤️' : '喜欢'}
                </span>
            </div>
        )
    }
}

React[004] Component+数据传递

发表于 2020-01-30 更新于 2024-11-28 分类于 web

src/components/Header/index.js

import React from 'react'

export default function Header() {
    return (
        <h1>
            待办事项列表
        </h1>
    )
}

src/components/index.js

1	export {default as Header} from './Header'

src/App.js

import React, { Component } from 'react'
import {
  Header
} from './components'

export default class App extends Component {
  render() {
    return (
      <>
        <h1>app</h1>
        <Header />
      </>
    )
  }
}

src/index.js

import React from 'react'
import {render} from 'react-dom'

import App from './App'

render(
    <App/>,
    document.querySelector('#root')
)

阅读全文 »

React[002]:jsx

发表于 2020-01-29 更新于 2024-11-28 分类于 web

js/jsx/js=>jsx

src/index.js

import React, { Component} from "react";

import { render } from 'react-dom';


// 表示一个虚拟DOM树的方式
// const app = {
//     tag: 'div',
//     attrs: {
//         className: 'app',
//         id: 'appRoot'
//     },
//     Children: [
//         {
//             tag: 'h1',
//             attrs: {
//                 className:'title'
//             },
//             Children:[
//                 'js原理'
//             ]
//         },
//         {
//             tag:'p',
//             attrs:null,
//             Children:[
//                 '类组件时继承React.Comopnent的'
//             ]
//         }
//     ]
// };

// 使用类的形式创建的组件
// class App extends Component {
//     render() {
//         console.log(this.props)
//         return (
//             <div className="app" id="appRoot">
//                 <h1 className="title">!!!</h1>
//                 <p>{this.props.desc}</p>
//             </div>
//         )
//     }
// }
// const app = new App({
//     desc: '类组件时继承React.Comopnent的'
// }).render()


// 所以react在真正渲染的时候会把z真正的react代码生成js代码
class App extends Component { 
    render(){
        // React.createElement 用于创建元素
        return React.createElement(
            'div',
            {
                className:'app',
                id:'appRoot'
            },
            React.createElement(
                'h1',
                {
                    className:'title'
                },
                'jsx原理'
            ),
            React.createElement(
                'p',
                null,
                '类组件时继承React.Comopnent的'
            )
        );
    }
}


render(
    <App desc="类组件时继承React.Comopnent的" />,
    document.querySelector('#root')
)

React[003]样式

发表于 2020-01-29 更新于 2024-11-28 分类于 web

1
2
3

npm i classnames -S
npm i styled-components  -S
npm install -S prop-types

阅读全文 »