React入门3

Posted 2022-11-28 临风而眠

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React入门3相关的知识，希望对你有一定的参考价值。

React入门3

一.React单页应用

1.脚手架使用

标准框架用户不用操心过多

安装

之前在学习官方的井字棋的那个教程的时候已经安装过啦

新建两个项目来学习

npx create-react-app react-demo-2
npx create-react-app react-demo-3

建好啦，来看一看目录层级
- node_modules 自动安装插件
- public静态目录
  - index.html 工程入口
  - manifest.json 缓存
- src 项目源码
  - index.js 项目打包执行入口
- gitigonre
  
  忽略哪些文件来提交到git
package.json
- start 启动
- build 打包
- test 单元测试
- eject 内置webpack
  
  可以使用yarn run eject来显示隐藏的配置信息，但这个是不可逆操作

2.编写Hello World

启动项目

用npm start或者yarn start都可以，启动之后修改代码只需要按下ctrl+s就会自动热加载

启动后在localhost:3000可以看到：

修改App.js

原本的App.js:

修改

import logo from './logo.svg';
import './App.css';
import React from 'react';
function App() 
  return (
    <div className="App">
      <h1>hello world</h1>
    </div>
  );


export default App;

效果

修改样式

样式和脚本是分离的

在index.css中修改
```
h1
  font-size: 15em;
  color: cornflowerblue;
```

修改为sass

改为App.scss

SCSS的简介 - 简书 (jianshu.com)

并在App.js中改为import './App.scss'，会报错，

在终端中输入：

  yarn add node-sass -S

在安装这个插件的时候最好先把项目终止掉，不然对安装可能有影响

修改示例

App.js

import './App.scss';
import React from 'react';
function App() 
  return (
    <div className="App">
      <p>哈哈哈哈哈哈哈哈</p>
      <h1>hello world</h1>
    </div>
  );

App.css

div 
  text-align: center;
  font-size: 1.5em;
  h1 
    font-size: 3em;
    color: cornflowerblue;

效果

3.单页面todo demo

这里遇到了问题，在key和value我设置为不一样时,解构时候会有问题,应该是ES6解构的一些规范之前没有了解过…

一开始用的和之前一样的

在setState里面key和value都用的一样的

import './App.scss'
import React from 'react';

class App extends React.Component 

  state = 
    val: '',
    list:[]
  
  handleChange = (event) => 
      let val = event.target.value;
      this.setState(
        val
      )
      
    

    handleClick = () => 
      let  val, list  = this.state;
      list.push(val);
      this.setState(
        list
      )
    
  render() 
    const  val, list  = this.state;
    
    return (
    <div>
        <p>嘿嘿</p>
        <h1>Hello React!</h1>
        <input type="text" value=val onChange=this.handleChange />
        <button onClick=this.handleClick>添加Todo事项</button>
        <ul>
          
            list.map((item)=>
            return <li>item</li>;
           )
          
          
        </ul>
    </div>);

改成key和value不一样,下面这段代码是没问题的：

import './App.scss';
import React from 'react';
class App extends React.Component 

  constructor(props)   
    super(props);
    this.state = 
      val: '',
      list:[]
    
  

  handleChange = (event) => 
    let val_C = event.target.value;
    this.setState(val: val_C);
  
  
  handleAdd = () => 
    let val_A = this.state.val;
    let list_A = this.state.list;
    list_A.push(val_A);
    this.setState(list: list_A);
  

  render() 
    const  val, list  = this.state;

    return (
      <div>
        <p>试一试</p>
        <h1>Todo清单</h1>
        <input type="text" value=val placeholder="请输入" onChange=this.handleChange />
        <button onClick=this.handleAdd>添加todo事项</button>
        <ul>
          
            list.map((item, index) => 
              return <li key=index>item</li>
            )
          
        </ul>
      </div>);
  


export default App;

但当我把下面的变量使用解构语法来定义的时候

就会出现如下报错：

想了半天才想到是解构是不是有啥问题

果真…

参考这篇文章：JavaScript基础之ES6对象解构赋值 - SegmentFault 思否

所以改成…👇

handleAdd = () => 
    let  val:val_A, list:list_A  = this.state;
    list_A.push(val_A);
    this.setState(list: list_A);

就好了

😭😭😭

另外最后return那里可以先定义个新的数组

修改后的完整代码：

import './App.scss';
import React from 'react';
class App extends React.Component 

  constructor(props)   
    super(props);
    this.state = 
      val: '',
      list:[]
    
  

  handleChange = (event) => 
    let val_C = event.target.value;
    this.setState(val: val_C);
  
  
  handleAdd = () => 
    let  val:val_A, list:list_A  = this.state;
    list_A.push(val_A);
    this.setState(list: list_A);
  

  render() 
    const  val, list  = this.state;
    const liItem =list.map((item, index) => 
              return <li key=index>item</li>
            )
    return (
      <div>
        <p>试一试</p>
        <h1>Todo清单</h1>
        <input type="text" value=val placeholder="请输入" onChange=this.handleChange />
        <button onClick=this.handleAdd>添加todo事项</button>
        <ul>
          
            liItem
          
        </ul>
      </div>);
  


export default App;

所以没啥基础来学框架…咳就会有各种基础不牢导致的时间浪费,想了半天没想到是那个问题，console控制台报错也没法一下子看出来是解构语法的问题

注意：

如果没有给每个列表中的元素绑定key，console控制台会报warning

4.AntD UI框架使用

Ant Design of React

👉[官方文档](Ant Design of React - Ant Design)

在刚刚那个项目中安装插件
```
yarn add antd -S
```
- 安装完成可以发现package.json里面
在App.js里面引入组件和样式
```
import Input,Button from 'antd'
import 'antd/dist'
```
将input改为Input button改为Button 重新加载先前的页面

上面是把整个antd导进来了,会导致加载时间较长，
按需加载需要使用babel-plugin-import

[babel-plugin-import](前端工程化 - 插件 babel-plugin-import 使用指南 - 掘金 (juejin.cn))

上面的框框太长了

给Input和Button都加一些属性

const wl =  width: 300 ,height: 30;
    return (
      <div>
        <p>试一试</p>
        <h1>Todo清单</h1>
        <Input type="text" style=wl  value=val placeholder="请输入" onChange=this.handleChange />
        <Button type="primary" onClick=this.handleAdd>添加todo事项</Button>
        <ul>
          
            liItem
          
        </ul>
      </div>);

效果：

看看别的Input输入框样式

试一试下面这个：

先在class App 上面取子组件

Search是Input下的子组件

const Search  = Input.Search
//或者
const Search = Input;

拿了官方文档里面两个组件来试试

代码

import './App.scss';
import React from 'react';
import  Input, Button  from 'antd';
import 'antd/dist/antd.css';


const Search = Input.Search;

class App extends React.Component 

  state = 
      val: '',
      list:[]
    
  handleChange = (event) => 
    let val_C = event.target.value;
    this.setState(val: val_C);
  
  
  handleAdd = () => 
    let  val:val_A, list:list_A  = this.state;
    list_A.push(val_A);
    this.setState(list: list_A);
  

  //Search不用像文本框那样变化的时候先获取一个值
  //(UI内部已经封装好，获取了handleChange那个步骤的值
  handleSearch = (value) => 
    let  list: list_S  = this.state;
    list_S.push(value);
    this.setState( list: list_S );
  
  render() 
    const  val, list  = this.state;
    const liItem = list.map((item, index) => 
      return <li key=index>item</li>
    );
    const wl =  width: 300 ,height: 30;
    return (
      <div>
        <p>试一试</p>
        <h1>Todo清单</h1>
        <Input type="text" style=wl  value=val placeholder="请输入" onChange=this.handleChange />
        <Button type="primary" onClick=this.handleAdd>添加todo事项</Button>
        <ul>
          
            liItem
          
        </ul>
        <div>
          <Search placeholder="input something" style=width:300 onSearch=this.handleSearch/>
          <Search enterButton="Search" style=width:300 onSearch=this.handleSearch/>

        </div>
      </div>);
  


export default App;

注意这个
效果

试试Select组件

取其子组件

在循环里实现

    const op = [];
    const liItem = list.map((item, index) => 
      op.push(<Option key=index>item</Option>)
      return <li key=index>item</li>
    );

完整代码

import './App.scss';
import React from 'react';
import  Input, Button,Select from 'antd';
import 'antd/dist/antd.css';

const  Option  = Select;
const Search = Input.Search;

class App extends React.Component 

  state = 
      val: '',
      list:[]
    
  handleChange = (event) => 
    let val_C = event.target.value;
    this.setState(val: val_C);
  
  
  handleAdd = () => 
    let  val:val_A, list:list_A  = this.state;
    list_A.push(val_A);
    this.setState(list: list_A);
  

  //Search不用像文本框那样变化的时候先获取一个值
  //(UI内部已经封装好，获取了handleChange那个步骤的值
  handleSearch = (value) => 
    let  list: list_S  = this.state;
    list_S.push(value);
    this.setState( list: list_S );
  
  render() 
    const  val, list  = this.state;
    const op = [];
    const liItem = list.map((item, index) => 
      op.push(<Option key=index>item</Option>)
      return <li key=index>item</li>
    );
    const wl =  width: 300 ,height: 30;
    return (
      <div>
        <p>试一试</p>
        <h1>Todo清单</h1>
        <Input type="text" style=wl  value=val placeholder="请输入" onChange=this.handleChange />
        <Button type="primary" onClick=this.handleAdd>添加todo事项</Button>
        <ul>
          
            liItem
          
        </ul>
        <div>
          <Search placeholder="input something" style=width:300 onSearch=this.handleSearch/>
          <Search enterButton="Search" style=width:300 onSearch=this.handleSearch/>
          <Select style=width:300>op</Select>
        </div>
      </div>);
  


export default App;

效果

以上是关于React入门3的主要内容，如果未能解决你的问题，请参考以下文章

Javascript入门弹出方框

MFC编程中Edit框的操作

React入门概述 - 虚拟DOM与原生DOM - JSX语法 - React基本使用

react入门

React16.4 开发简书项目从零基础入门到实战

右边那个透明的小框框怎么去掉？