react

react的使用
引入.js文件使用react
通过脚手架工具来编码
create-react-app

环境准备

安装好node环境 安装npm
查看安装版本
node -v 
npm -v
安装create-react-app
npm install -g create-react-app

//换源
npm config set registry https://registry.npm.taobao.org
//配置后通过以下方法验证是否成功
npm config get registry

创建一个react-app
create-react-app todolist

工程目录文件简介

index.js是整个程序运行的入口文件

js中可以引入css文件的

import React from 'react';
import ReactDOM from 'react-dom';
// all in js 在js中引入css文件
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

简便工程代码

简化src的代码只留下，index.js,App.js
App.js

import React from "react";
function App() {
   
  return (
    <div>
      hello react
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

react中的组件

这里App.js中的App就是一个组件
低版本react中的App.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 把app组件挂载到id为root的节点下
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

jsx语法

在js中写的html标签称为jsx语法
jsx语法中 如果要使用自己的组件 则用标签包起来，且组件必须以大写开头

react基础知识

使用react编写todolist功能

TodoList.js

import React from "react";
function TodoList() {
   
    return (
        <div>
        <div>
            <input/>
            <button>提交</button>
        </div>
            <ul>
                <li>学英语</li>
                <li>study react</li>
            </ul>
        </div>
    );
}
export default TodoList;

jsx语法要求最外层需要包裹一层div
可以使用Fragment占位符替代，Fragment不会显示出来

import React, {
   Fragment} from "react";
function TodoList() {
   
    return (
        <Fragment>
        <div>
            <input/>
            <button>提交</button>
        </div>
            <ul>
                <li>学英语</li>
                <li>study react</li>
            </ul>
        </Fragment>
    );
}
export default TodoList;

react中的响应式设计思想和事件绑定

操作数据而不是操作dom
TodoList.js

import React, {
   Fragment,Component} from "react";
class  TodoList extends Component{
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            inputValue:'',
            list:[]
        }
    }
    render() {
   
    return (
        <Fragment>
        <div>
        
        <input onChange={
   this.inputChange.bind(this)}
            value = {
   this.state.inputValue}/>
        <button>提交</button>
        </div>
        <ul>
        <li>学英语</li>
        <li>study react</li>
        </ul>
        </Fragment>
        );
    }

    inputChange(e) {
   
        console.log(e.target.value)
        // 设置state中的inputValue的值
        this.setState({
   
            inputValue:e.target.value
        })
    }
    }
export default TodoList;

新增删除列表项

新增列表项
给button绑定事件，在原有数组基础上，将输入框中的值添加到数组中，然后遍历数组中的每一项的值，返回li标签

<input onChange={
   this.inputChange.bind(this)}
            value = {
   this.state.inputValue}/>
        <button onClick={
   this.btnClick.bind(this)}>提交</button>
        </div>

btnClick() {
   
        this.setState({
   
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
<ul>
            {
   
                this.state.list.map( (item,index) =>{
   
                    return <li key={
   index} onClick={
   this.btnDelete.bind(this,index)}>{
   item}</li>
                })
            }
        </ul>

删除列表项
给li标签绑定btnDelete事件，并绑定数组下标index,传入下标，我们一般不去改变原有的state，而是单独拷贝一份出来进行修改
然后通过setState方法设置list的值

btnDelete(index) {
   
        // 不去改变原有的state 而是相当于拷贝一份出来
        const list = [...this.state.list]
      list.splice(index,1)
        this.setState({
   
            list:list
        })
    }

jsx语法细节补充

小写字母开头标签，会作为普通标签。当遇到大写字母开头的标签会认为是组件

jsx中注释写法{/111/}
{
//注释
}

如果要是标签的内容不被转义，使用dangerouslySetInnerHTML

						<li
                            key={
   index}
                            onClick={
   this.btnDelete.bind(this,index)}
                            // {}中一般是一个js表达式，{
   {__html:item}}表达式中又是一个对象
                            dangerouslySetInnerHTML={
   {
   __html:item}}
                        ></li>

使用label能够起到扩大输入的范围

		<div>
            <label htmlFor="insertarea">输入内容</label>
        <input
            id="insertarea"
            className='input'
            onChange={
   this.inputChange.bind(this)}
            value = {
   this.state.inputValue}/>
         </div>

在js中引入index.css

.input {
   
    border: 1px solid red;
}

import './index.css'
<input
            id="insertarea"
            className='input'
            onChange={
   this.inputChange.bind(this)}
            value = {
   this.state.inputValue}/>
        <button onClick={
   this.btnClick.bind(this)}>提交</button>
        </div>

拆分组件与组件之间的传值问题

父组件向子组件传递数据

新建TodoItem.js组件

import React,{
   Component} from 'react';
class TodoItem extends Component {
   
    render() {
   
        return <li>{
   this.props.content}</li>
    }
}

export default TodoItem

修改TodoList.js组件