【一起来学React】- 基础知识

版权声明：本文为原创文章，转载请注明出处！ https://blog.csdn.net/Fakin/article/details/85061894

说一千道一万，不如直接动手，你是否还在为学习react看官方文档而烦恼呢？和我一起来动手，从实践中领悟理论吧！
ps：本系列文章只适合新手（但是不适合没有js基础的尤其是this指向问题，这玩意不搞清楚，基本学不会）
本文为系列文章首发于我的博客：https://www.fakin.cn

安装React

这个就不说了，太简单了

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

JSX

React使用JSX来替代JavaScript。看起来很像XML的JavaScript 语法扩展。

const fakin = <h1>fakin</h1>

反正你得记住，JSX在React中到处都是（当然你也不使用JSX，甚至你可以不用ES6呢，但是JSX和ES6更加方便）。

组件

三大框架中组件都是很关键的，React和Vue不一样，Vue有.vue文件作为组件，而React由函数或者类定义组件的，如下所示：

function Fakin(props) {
  return <h1>fakin</h1>
}

或者

class Fakin extends React.Component {
  render() {
    return <h1>fakin</h1>
  }
}

State

状态，通过this.state定义(其实我个人觉得叫数据好点)

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
        }
    }
    //xxxx
}

嗨呀，难受，就是你可以通过this.state来修改render渲染的数据。这时候你可能会问render又是啥，问的好！

render() {
	return return (<div id="box"></div>)
}

简单todoList

如果你有一定的js基础，或者说其他mvvm框架的基础，那么这些东西都挺简单的，那么咱们就来动手实现一个简单todoList吧！

import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            inputValue: ''
        }
    }
    handleBtnClick() {
        if (!this.state.inputValue) {
            return
        }
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }
    handleChange(event) {
        this.setState({
            inputValue: event.target.value
        })
    }
    handleItemClick(index) {
        let list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list
        })
    }
    render() {
        return (
            <div id="box">
                <input onChange={this.handleChange.bind(this)} value={this.state.inputValue} className="input"/>
                <button onClick={this.handleBtnClick.bind(this)} className="btn">add</button>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return <li key={index}>{item}
                                <button onClick={this.handleItemClick.bind(this, index)} className="btnDel">X</button>
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default App;

第一章到此就结束了，其实react上手还是很简单的，下一章咱们来说说react中组件的生命周期！