처음부터 2부 반응.

이것은'처음부터 반응'시리즈의 두 번째 부분이다.이번에는 1부의 설정을 사용하여 업무 응용 프로그램을 만들 것입니다!

선결 조건

2부는 1부가 끝나는 곳부터 시작한다.만약 네가 아직 없다면, 계속 완성하거나, 거기서부터 시작해라.

내 재구매에서 복제 새 부서

업무 응용 프로그램을 만들기 전에, 우리는 css 라이브러리로 bootstrap을 추가하여 우리의 생활을 더욱 쉽게 하고, 루트 도구를 제공할 것입니다.

$ npm i bootstrap react-router react-router-dom

: 응답성 웹 응용 프로그램을 구축하는 css 라이브러리입니다.

bootstraps:react의 핵심 루트 기능.

react-router: react 라우터의 DOM 바인딩

다음은 색인으로 안내합니다.파일 상단에 다음 행을 추가합니다.

@import "~bootstrap/scss/bootstrap";

그 후, 우리는 src 폴더에 두 개의 새 디렉터리를 만들었습니다. 하나는 우리의 구성 요소에 사용되고, 다른 하나는 우리의 용기에 사용됩니다.

$ mkdir containers
$ mkdir components

반응 공유기dom 컨테이너 및 구성 요소

나는 용기와 구성 요소를 명확하게 구분하는 것을 좋아한다.

컨테이너는 우리가 제공하는 기능을 사용하여 UI를 표시하는 데만 사용됩니다.그것들은 기능을 실현하지 못한다.

구성 요소는 응용 프로그램의 논리를 포함하고 어떤 용기를 표시할지 결정합니다.그들은 용기에 전달함으로써 용기의 기능을 제공한다.

이제 첫 번째 용기를 작성하겠습니다.

import React from 'react';
import Routes from '../Routes';

const Root = () => (
    <Routes />
);

export default Root;

이 용기의 유일한 임무는 우리의 응용 프로그램 루트로 돌아가는 것이다.이러한 라우팅은 서로 다른 모든 라우팅 구성 요소 쌍을 추적합니다.
src 폴더에 Routes라는 새 파일을 만듭니다.js, 내용은 다음과 같습니다.

import React from 'react';
import { Switch, HashRouter } from 'react-router-dom';
import { Route } from 'react-router';
import TodoPage from './components/Todo';

export function Routes() {
  return (
    <HashRouter>
      <Switch>
        <Route path='/' component={TodoPage} />
      </Switch>
    </HashRouter>
  );
}

export default Routes;

보시다시피, 우리는 이 함수에 새로 추가된 의존항을 사용했습니다.
스위치에는 이 응용 프로그램에서 선언할 모든 라우팅이 포함되어 있습니다.
현재 우리는 이 주소 를 가리키는 노선만 발표했다.
TodoPage 구성 요소가 이 주소에 표시됩니다.
이제 TodoPage를 구현해야 합니다.따라서 Todo라는 새 파일을 만듭니다.js는components 폴더에 있습니다.
파일은 다음과 같습니다.

import React, { Component, Fragment } from 'react'
import TodoListContainer from '../containers/TodoList';

export class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        {
          id: 1,
          title: 'Create Part 1',
          text: 'Starting with project setup'
        },
        {
          id: 2,
          title: 'Create Part 2',
          text: 'creating the UI with components and containers'
        },
        {
          id: 3,
          title: 'Create Part 3',
          text: 'To be decided'
        }
      ],
    };
  }

  render() {
    return (
      <Fragment>
        <div className="container-fluid">          
          <TodoListContainer 
            todos={this.state.todos}
          />
        </div>
      </Fragment>
    );
  }
}

export default Todo;

이 파일에서 우리는 가상 todo를 만들었다.
그 다음에 Todo는 다음에 작성할 TodoListContainer에 전달됩니다.
이를 위해 containers 폴더에 TodoList라는 파일을 만들고 다음을 추가해야 합니다.

import React, { Fragment } from 'react';

const TodoListContainer = ({todos}) => (
  <Fragment>
    {
      todos.map(({id, title, text}) => (
          <div className="mb-3 card" key={id}>
            <div className="card-header">
              <h5>{title}</h5>
            </div>
            <div className="card-body">
              <p className="card-text">{text}</p>
            </div>
            <div className="card-footer">
              <button className="btn btn-primary w-25">Edit</button>
              <button className="btn btn-success ml-2 w-25">Check</button>
            </div>
          </div>
        )
      )
    }
  </Fragment>
);

export default TodoListContainer;

이 용기에서, 우리는 todo 구성 요소에서 전달된 모든 todo를 순환했다.
그것들을 훑어보는 동시에, 우리는 제목과 텍스트를 표시하기 위해 모든 업무 항목을 안내하는 카드를 만듭니다.
다음은 배경색을 빨간색보다 더 적합한 색으로 변경합니다.
이를 위해, 우리는 색인을 열었다.배경색을 다음과 같이 변경합니다.

@import "~bootstrap/scss/bootstrap";

body {
  background-color: #d7dfdb;
}

지금 우리는 색인을 정리한다.js, App 함수를 제거하고 우리의 루트 용기를 실현하는 것은 다음과 같다.

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import Root from './containers/Root';
import './index.scss';

ReactDOM.render(
  <StrictMode>
    <Root />
  </StrictMode>,
  document.querySelector('#root'),
);

npmstart를 통해 프로젝트를 시작하고 우리가 방금 구축한 구조를 봅시다.그것은 마땅히 이렇게 해야 한다.
http://localhost:8000/

추가 기능

현재, 우리는 기능을 추가하고, 새로운 업무 사항을 목록에 추가할 것입니다.
우리가 해야 할 첫 번째 일은 add 단추를 표시하기 위해 Todo 구성 요소를 설정하는 것이다.
이 밖에 우리는 새로운 todo를 todo 진열에 추가하는 기능을 실현해야 한다.
이를 위해, 우리는 반드시 우리의 처리해야 할 사항을 수정해야 한다.js는 다음과 같습니다.

import React, { Component, Fragment } from 'react'
import TodoListContainer from '../containers/TodoList';
import NewTodoContainer from '../containers/NewTodo';

export class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showNewTodo: false,
      title: '',
      text: '',
      todos: [
        {
          id: 1,
          title: 'Create Part 1',
          text: 'Starting with project setup'
        },
        {
          id: 2,
          title: 'Create Part 2',
          text: 'creating the UI with components and containers'
        },
        {
          id: 3,
          title: 'Create Part 3',
          text: 'To be decided'
        }
      ],
    };
  }

  toggleNewTodo() {
    this.setState({
      showNewTodo: !this.state.showNewTodo
    });
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onSubmit(event) {
    event.preventDefault();
    const { text, title } = this.state;
    this.setState({
      todos: [{ id: this.state.todos.length + 1, title, text }, ...this.state.todos],
      showNewTodo: false,
      title: '',
      text: '',
    });
  }

  render() {
    const { showNewTodo } = this.state;
    return (
      <Fragment>
        <div className="container-fluid">
          <div className="col w-25 mt-4 mx-auto">
            { showNewTodo ? 
              (<Fragment>
                <button className="mb-2 w-100 btn btn-danger" onClick={this.toggleNewTodo.bind(this)}>Cancel</button> 
                <NewTodoContainer 
                  onChange={this.onChange.bind(this)}
                  onSubmit={this.onSubmit.bind(this)} />
              </Fragment>)
              : (<button className="mb-2 w-100 btn btn-success" onClick={this.toggleNewTodo.bind(this)}>Add Todo</button>)
              }
            <TodoListContainer 
              todos={this.state.todos}
            />
          </div>
        </div>
      </Fragment>
    );
  }
}

export default Todo;

우선, 나는 우리 주를 위해 세 곳의 새로운 부동산을 늘렸다.
showNewTodo는 add 단추와add newtodo 폼 사이를 전환하는 데 도움을 줄 수 있는 부울 값입니다.
제목과 텍스트는 새로운 업무 내용의 제목과 텍스트를 포함합니다.
이어서 나는 두 개의 새로운 함수를 추가했다.onChange는 새 업무의 제목과 텍스트를 주에 씁니다.
onSubmit에서 새 todo 대상을 만들고 todo 배열의 전단에 추가합니다.
마지막으로 가장 중요하지 않은 것은 우리가 show New Todo 부울 값에 따라add 단추나 New Todo Container를 표시하기 위해 필요한 HTML을 추가했다는 것이다.
이제 containers 폴더에 New Todo라는 새 파일을 만들기만 하면 됩니다.js 및 다음을 추가합니다.

import React from 'react';

const NewTodoContainer = ({onChange, onSubmit}) => (
  <form className="mb-4">
    <fieldset>
      <legend>New Todo</legend>
    </fieldset>
    <div className="form-group">
      <label htmlFor="title">Title</label>
      <input type="text" name="title" className="form-control" id="title" placeholder="Enter title" onChange={onChange} />
    </div>
    <div className="form-group">
      <label htmlFor="text">Text</label>
      <input type="text" id="text" name="text" className="form-control" placeholder="Enter text..." onChange={onChange} />
    </div>
    <button type="submit" className="btn btn-primary" onClick={onSubmit}>Submit</button>
  </form>
);

export default NewTodoContainer;

이것은 단지 간단한 표일 뿐, 두 개의 입력 필드가 있는데, 모두 onChange 함수를 실현했고, 또 하나의submit 단추는 onSubmit 함수를 실현했다.
이제 완성되었습니다. npmstart를 누르면 개발 서버를 다시 시작할 수 있습니다.
다음을 참조하십시오.

"업무 추가"단추를 누르면 다음과 같습니다.

결론

이 시리즈의 두 번째 부분은 여기서 끝냅니다.
우리는 TODO와 관련된 모든 일을 처리하는 기본적인 루트와 구성 요소를 실현했다.
또한 업무 양식과 모든 업무 목록을 추가하는 등 UI 요소도 구현했습니다.
나는 네가 좋아하길 바란다!
다음 부분에서, 우리는react의redux와statemanagement 문제를 최종적으로 해결하고, 우리 응용 프로그램에 더 많은 기능을 추가할 것입니다.
이 다부분 시리즈의 모든 코드는 이 에서 찾을 수 있다.