欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用脚手架创建 React 项目(二)

程序员文章站 2022-07-02 23:20:33
...

使用脚手架创建 React 项目(一)的基础上,继续进行项目的修改。目标:创建简单的todo组件,只为了简单的添加功能

1  npm run eject //将项目的配置信息从默认的依赖包中提取出来,会生成config文件夹

使用脚手架创建 React 项目(二)

2 使用编辑器,此处使用HbuilderX。(westorm sublime等任意一款编辑器)

使用脚手架创建 React 项目(二)

3 创建简单的组件(此处删除了默认生成的无用文件),最终如下

使用脚手架创建 React 项目(二)

src/index.js

import React from 'react';
import ReactDOM,{render} from 'react-dom';
import App from './components/App';//此处使用简写方式,App表示的是App文件夹,会默认加载index.js文件;也可以写成import App from './components/App/index';注意,非index.js不可省略

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

App/index.js

import React, { Component } from 'react';
import Add from '../Add';
import List from '../List';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      todoList : [
        {todo:'name1',commont:'todo1'},
        {todo:'name2',commont:'todo2'}
      ]
    };
  }
  Add = (todo)=>{
    let {todoList} = this.state;//解构赋值
    todoList.unshift(todo);//集合的首位添加
    this.setState({todoList});//同名变量名和值的简写方式
  };
  render() {
    let {todoList} = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">to do list</h1>
        </header>
        <Add Add={this.Add}/>
        <hr/>
        <List todolist={todoList}/>
      </div>
    );
  }
}

export default App;

Add/index.js

import React, { Component } from 'react';

class Add extends Component {
  Add = ()=>{
    let todo = this.refs.todo.value;
    let commont = this.refs.commont.value;
    if(!todo || !commont){
      return;
    }
    this.props.Add({todo,commont});
    this.refs.todo.value = '';
    this.refs.commont.value = '';
  };
  render() {
    return (
      <div className="App">
       name<input ref="todo" />
       commont<input ref="commont"/>
       <button onClick={this.Add}>Add</button>
      </div>
    );
  }
}

export default Add;

List/index.js

import React, { Component } from 'react';

class List extends Component {
  render() {
    let {todolist} = this.props;
    let display = todolist.length>0?'none':'block';
    return (    
      <div className="App">
        <header style={{display}}>
          <h1 className="App-title">empty</h1>
        </header>
        <ul>
          {
            todolist.map((item,index)=>{
              return (
                <li key={index}>
                  <p>{item.todo} ==== {item.commont}</p>
                </li>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

export default List;

4 启动项目 npm start

使用脚手架创建 React 项目(二)