React-基础1

React 学习笔记

创建项目

命令行创建react项目

npx create-react-app react-demo
cd react-demo
npm start

环境介绍

node_modules: 非常大

public: 入口文件

src: 源码文件

React 基础知识

JSX语法介绍

jsx语法：JavaScript + XML语法

解读jsx语法：遇到 <> 按照HTML语法解析，遇到 {} 按照JS语法

元素渲染

如果存在标签结构，并且标签结构要换行，需要用 () 括起来

function tick() {
  const element = (
    <div>
      <h1>Hello world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  )
  ReactDOM.render(element, document.getElementById('root')
  );
}
setInterval(tick, 1000)

组件

组件的后缀可以是js，也可以是jsx

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default App;

props属性

组件的复用性很重要

父组件：

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

class App extends Component {
    render() {
        const nav1 = ['a1', 'a2', 'a3']
        const nav2 = ['b1', 'b2', 'b3']
        return (
            <div>
                dddddd
                <Nav nav={nav1} title="aaa" />
                <Nav nav={nav2} title="bbb" />
            </div>
        );
    }
}

export default App;

子组件

import React, { Component } from 'react';

class Nav extends Component {
    render() {
        return (
            <div>
                <h2>{this.props.title}</h2>
                <ul>
                    {
                        this.props.nav.map((element, index) => {
                        return <li key={index}>{ element }</li>
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Nav;

State

import React, { Component } from 'react';

class StateComponent extends Component {
    /**
     * 组件中的状态：state
     * 页面元素的改变使用state进行改变
     */
    constructor(props){
        super(props)
        //定义
        this.state = {
            count: 10
        }
    }
    increment() {
        this.setState({
            count: this.state.count += 1
        })
    }
    decrement() {
        this.setState({
            count: this.state.count -= 1
        })
    }
    // 箭头函数可以不用绑定this
    restore = () => {
        this.setState({
            count: this.state = 10
        })
    }

    render() {
        return (
            <div>
                <h4>组件的state</h4>
                <p>{this.state.count}</p>
                <button onClick={this.increment.bind(this)}>增加</button>
                <button onClick={this.decrement.bind(this)}>减少</button>
                <button onClick={this.restore}>还原</button>
            </div>
        );
    }
}

export default StateComponent;