使用脚手架创建 React 项目（二）

在使用脚手架创建 React 项目（一）的基础上，继续进行项目的修改。目标：创建简单的todo组件，只为了简单的添加功能

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

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

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

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

扫描二维码关注公众号，回复： 2594771 查看本文章

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 项目（二）

猜你喜欢