"반응 중 사고"에 따라 응용 프로그램 구축

61276 단어 react frontend beginners javascript

만약 우리가 React Docs을 깊이 읽는다면, 우리는 이라는 훌륭한 문장을 발견할 수 있을 것이다.이것은 주요 개념의 마지막 장이기 때문에 이곳을 계속하기 전에 앞의 모든 장과 절을 읽을 필요가 있다.본고에서 우리는 본 장의 다섯 가지 절차에 따라react를 사용하여 간단한 응용 프로그램을 구축할 것이다.
(이 응용 프로그램의 코드는 github
우선: 우리는 종이 위에 있거나 소프트웨어를 사용하여 모형을 하나 그린다. 아주 많다.

1단계: UI를 어셈블리 계층으로 분해

우리의 응용 프로그램에는 다섯 개의 구성 요소가 있다.

응용 프로그램(녹색): 최상위 구성 요소로 응용 프로그램의 모든 내용을 포함합니다

AddDate(빨간색): 사용자가 입력한 날짜

를 수신합니다.

날짜 목록(갈색): 사용자가 입력한 날짜에 따라 카드 목록 보이기

날짜(파란색): 날짜별 카드를 표시하고 사용자가 입력한 작업을 수신합니다

작업(주황색): 작업 단락 보이기

우리의 구성 요소 차원 구조는 다음과 같다.

App

추가 날짜

날짜 목록

날짜

퀘스트

(아날로그에서 다른 어셈블리에 나타나는 어셈블리는 계층 구조에서 하위 레벨로 표시되어야 함)

2단계: React에서 정적 버전 구축

( git branch for this step )
이제 구성 요소를 추가할 때가 되었다. 이렇게 하면 우리는 응용 프로그램의 정적 레이아웃을 얻을 수 있다.이 단계에서는 상호작용과 관련이 없다.문서에서 언급한 바와 같이, 간단한 응용 프로그램에서 위에서 아래로 구성 요소를 구축하는 것은 통상적으로 더욱 쉽다. (우리의 예시에서 응용 프로그램 구성 요소부터)

응용 프로그램

import React, { Component } from 'react';
import './App.css';
import AddDate from './AddDate';
import DateList from './DateList';

class App extends Component {
  render() {
    const dates = ['2018-04-23', '2019-06-13', '2014-09-29'];
    return (
      <div className="App">
        <header className="App-header">
          <h1>Time Machine</h1>
        </header>
        <AddDate dates={dates} />
        <DateList dates={dates} />
      </div>
    );
  }
}

export default App;

날짜 추가

import React, { Component } from 'react';

class AddDate extends Component {
  render() {
    return (
      <div className="App__form">
        <form className="App__form--date">
          <div className="App__form--body">
            <label>Choose Your Past:</label>
            <input type="date" max={new Date().toISOString().split('T')[0]} />
          </div>

          <div className="App__form--btn">
            <button type="submit">Add Date</button>
          </div>
        </form>
      </div>
    );
  }
}

export default AddDate;

날짜 목록

import React, { Component } from 'react';
import Date from './Date';

class DateList extends Component {
  render() {
    const { dates } = this.props;

    return (
      <div className="App__list">
        <h2 className="App__list--title">Missions</h2>
        <ul className="App__list--items">
          {dates.map((date) => (
            <Date date={date} key={date} />
          ))}
        </ul>
      </div>
    );
  }
}

export default DateList;

날짜

import React, { Component } from 'react';
import Task from './Task';

class Date extends Component {
  render() {
    const { date } = this.props;
    return (
      <li>
        <div className="App__card--inner">
          <h2>{date}</h2>
          <form onSubmit={this.handleFormSubmit} className="App__card">
            <div className="App__card--form">
              <label>Add Your Task</label>
              <textarea
                rows="3"
                cols="30"
                placeholder="type here..."
                required
              ></textarea>
            </div>
            <div className="App__card--btn">
              <button type="submit">Add Task</button>
            </div>
          </form>
          <Task />
        </div>
      </li>
    );
  }
}

export default Date;

임무

import React from 'react';

const Task = () => {
  return (
    <div className="App__task">
      <h3>Task</h3>
      <p>this is the task paragraph</p>
    </div>
  );
};

export default Task;

3단계: UI 상태의 최소 표현(전체) 확인

응용 프로그램에 상호작용을 추가하기 위해서, 우리는 데이터 모델을 위해 상태를 만들어야 한다.
우리 애플리케이션의 데이터는 다음과 같습니다.

DateList 구성 요소에 전달된 날짜 목록

사용자가 입력한 새 날짜

사용자가 이미 존재하는 날짜를 입력할 때 발생하는 오류 메시지

사용자가 입력에서 선택한 날짜를 삭제하고 빈 날짜를 제출할 때 발생하는 오류 메시지

카드에 제목이 표시된 카드 날짜

사용자가 작업 텍스트 상자

에 입력한 카드 텍스트

"작업 추가"제출 후 단락으로 표시되는 카드 작업

지금 우리는 세 가지 문제를 통해 데이터가 상태로 여겨지는 것을 찾아내야 한다

그것은 도구를 통해 부모에게서 전해 온 것입니까?만약 그렇다면, 그것은 국가가 아닐 수도 있다.

그것은 시간에 따라 변하지 않습니까?만약 그렇다면, 그것은 국가가 아닐 수도 있다.

구성 요소의 다른 상태나 도구를 기반으로 계산할 수 있습니까?그렇다면 주 정부가 아니다.

우리가 사용자로부터 얻은 날짜 목록과 새 날짜는 시간의 추이에 따라 변화하기 때문에 다른 상태나 도구에 근거하여 계산할 수 없기 때문에 상태가 될 것이다.
오류 메시지는 시간의 추이에 따라 달라집니다. 렌더링 방법의'날짜'도구와'날짜'상태에서 계산할 수 있습니다.그러나 우리는 오류가 제출할 때만 나타나는 것이지 다시 나타나는 페이지에만 나타나는 것이 아니기를 희망하기 때문에 우리는 그것을 상태의 일부분으로 간주한다.
카드 날짜는 시간에 따라 변하지만 날짜 상태에 따라 계산할 수 있기 때문에 상태가 아니다.
카드 텍스트는 시간의 변화에 따라 다른 상태나 도구에 근거하여 계산할 수 없기 때문에 상태입니다.
카드 작업은 시간에 따라 달라진다."값"상태에서 계산할 수 있지만, 사용자가 제출할 때 단락의 텍스트를 표시하기만 하면 되기 때문에 상태로 간주해야 합니다.
마지막으로 우리의 상태는 다음과 같다.

날짜 목록

사용자가 입력한 새 날짜

동일한 날짜 오류 메시지

빈 날짜 오류 메시지

카드의 텍스트 상자 값

카드에서 단락으로 전달하는 작업

4단계: 당신이 있는 주가 어디에 사야 하는지 확인하기

애플리케이션의 각 상태에 대해 다음을 수행합니다.

이 상태를 바탕으로 어떤 물건을 나타내는 모든 구성 요소를 식별한다.

공통 소유자 구성 요소 (계층 구조에서 필요한 상태의 모든 구성 요소 위에 있는 단일 구성 요소) 를 찾습니다.

공공 소유자나 차원 구조에서 비교적 높은 또 다른 구성 요소는 이 주를 가져야 한다.

상태가 의미 있는 구성 요소를 찾지 못하면 새 구성 요소만 만들어서 상태를 저장하고 공공 소유자 구성 요소 위의 차원 구조에 추가합니다.

dates :
날짜 목록 구성 요소가 날짜를 표시합니다.AddDate 구성 요소는 사용자가 삽입한 날짜가 이미 포함되어 있는지 여부에 따라 오류 메시지를 표시합니다.두 구성 요소 모두 날짜 상태에 액세스할 수 있도록 날짜 상태를 상위 구성 요소 - 공통 소유자 구성 요소, 즉 응용 프로그램 구성 요소로 이동해야 합니다.date :
이 상태는 AddDate 구성 요소에 있습니다. 사용자가 날짜를 선택한 구성 요소이기 때문에 입력한 동작을 제어하려고 합니다.dateExists / dateEmpty :
이 상태는 AddDate 구성 요소에 존재해야 합니다. 이 날짜가 이미 존재하거나 날짜 필드가 비어 있으면 오류 메시지를 표시해야 합니다.value :
이 상태는 사용자가 텍스트를 입력하는 구성 요소이기 때문에 날짜 구성 요소에 존재합니다. 입력 동작을 제어하려고 합니다.task :
이 상태는 날짜 구성 요소에 존재합니다. 이 구성 요소에서 사용자의 텍스트를 가져와 작업 구성 요소에 전달할 수 있기 때문입니다.
( git branch for this step )

응용 프로그램

import React, { Component } from 'react';
import './App.css';
import AddDate from './AddDate';
import DateList from './DateList';

class App extends Component {
  state = {
    dates: [],
  };

  render() {
    const dates = ['2018-04-23', '2019-06-13', '2014-09-29'];
    return (
      <div className="App">
        <header className="App-header">
          <h1>Time Machine</h1>
        </header>
        <AddDate dates={dates} />
        <DateList dates={dates} />
      </div>
    );
  }
}

export default App;

날짜 추가

import React, { Component } from 'react';

class AddDate extends Component {
  state = {
    date: new Date().toISOString().split('T')[0],
    dateExists: false,
    dateEmpty: false,
  };

  render() {
    return (
      <div className="App__form">
        <form onSubmit={this.handleFormSubmit} className="App__form--date">
          <div className="App__form--body">
            <label>Choose Your Past:</label>
            <input type="date" max={new Date().toISOString().split('T')[0]} />
          </div>

          <div className="App__form--btn">
            <button type="submit">Add Date</button>
          </div>
        </form>
      </div>
    );
  }
}

export default AddDate;

날짜 목록

import React, { Component } from 'react';
import Date from './Date';

class DateList extends Component {
  render() {
    const { dates } = this.props;

    return (
      <div className="App__list">
        <h2 className="App__list--title">Missions</h2>
        <ul className="App__list--items">
          {dates.map((date) => (
            <Date date={date} key={date} />
          ))}
        </ul>
      </div>
    );
  }
}

export default DateList;

날짜

import React, { Component } from 'react';
import Task from './Task';

class Date extends Component {
  state = {
    value: '',
    task: '',
  };

  render() {
    const { date } = this.props;

    return (
      <li>
        <div className="App__card--inner">
          <h2>{date}</h2>
          <form onSubmit={this.handleFormSubmit} className="App__card">
            <div className="App__card--form">
              <label>Add Your Task</label>
              <textarea
                rows="3"
                cols="30"
                placeholder="type here..."
                required
              ></textarea>
            </div>
            <div className="App__card--btn">
              <button type="submit">Add Task</button>
            </div>
          </form>
          <Task task={this.state.task} />
        </div>
      </li>
    );
  }
}

export default Date;

임무

import React from 'react';

const Task = (props) => {
  return (
    <div className="App__task">
      <h3>Task</h3>
      <p>{props.task}</p>
    </div>
  );
};

export default Task;

단계 5: 역방향 데이터 흐름 추가

이 단계에서, 우리는 다른 방식으로 데이터에 접근하기를 희망합니다: 하위 구성 요소에서 상위 구성 요소로.구성 요소는 자신의 상태만 업데이트해야 하기 때문에 사용자가 AddDate 구성 요소에 새 날짜를 추가할 때 프로그램 구성 요소 내의 날짜 상태에 직접 접근할 수 없습니다.우리가 접근할 수 있는 방법은 앱에서 AddDate로 리셋을 전달하는 것입니다. 이 리셋은 상태가 업데이트될 때 터치됩니다.onAddDate 리셋은 AddDate 구성 요소에 도구로 전달되며, 새 날짜를 추가할 때 리셋이 실행되고 응용 프로그램 구성 요소에 새 날짜를 전달합니다.
( git branch for this step )

응용 프로그램

import React, { Component } from 'react';
import './App.css';
import AddDate from './AddDate';
import DateList from './DateList';

class App extends Component {
  state = {
    dates: [],
  };

  addDate = (date) => {
    this.setState((currState) => ({
      dates: [...currState.dates, date],
    }));
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Time Machine</h1>
        </header>
        <AddDate dates={this.state.dates} onAddDate={this.addDate} />
        <DateList dates={this.state.dates} />
      </div>
    );
  }
}

export default App;

날짜 추가

import React, { Component } from 'react';

class AddDate extends Component {
  state = {
    date: new Date().toISOString().split('T')[0],
    dateExists: false,
    dateEmpty: false,
  };

  sameDateExists = (currDate) => {
    const dates = this.props.dates;
    for (let date of dates) {
      if (date === currDate) {
        return true;
      }
    }
    return false;
  };

  handleFormSubmit = (event) => {
    event.preventDefault();

    const dateExists = this.sameDateExists(this.state.date);

    if (!dateExists && this.state.date) {
      this.props.onAddDate(this.state.date);
      this.setState({ dateEmpty: false });
    }

    if (!this.state.date) {
      this.setState({ dateEmpty: true });
    }

    if (dateExists) {
      this.setState({ dateEmpty: false });
    }

    this.setState({ dateExists });
  };

  handleDateChange = (event) => {
    const { value } = event.target;
    this.setState((currState) => ({
      ...currState,
      date: value,
    }));
  };

  render() {
    return (
      <div className="App__form">
        <form onSubmit={this.handleFormSubmit} className="App__form--date">
          <div className="App__form--body">
            <label>Choose Your Past:</label>
            <input
              type="date"
              max={new Date().toISOString().split('T')[0]}
              onChange={this.handleDateChange}
            />
          </div>

          <div className="App__form--btn">
            <button type="submit">Add Date</button>
          </div>
        </form>
        {this.state.dateExists ? (
          <p className="App__form--error">This date has already been chosen</p>
        ) : (
          ''
        )}
        {this.state.dateEmpty ? (
          <p className="App__form--error">Please choose a date</p>
        ) : (
          ''
        )}
      </div>
    );
  }
}
export default AddDate;

날짜 목록

import React, { Component } from 'react';
import Date from './Date';

class DateList extends Component {
  render() {
    const { dates } = this.props;
    return (
      <div className="App__list">
        <h2 className="App__list--title">Missions</h2>
        <ul className="App__list--items">
          {dates.map((date) => (
            <Date date={date} key={date} />
          ))}
        </ul>
      </div>
    );
  }
}

export default DateList;

날짜

import React, { Component } from 'react';
import Task from './Task';

class Date extends Component {
  state = {
    value: '',
    task: '',
  };

  handleFormSubmit = (event) => {
    event.preventDefault();

    this.setState({
      task: this.state.value,
    });
  };

  handleAddTask = (event) => {
    this.setState({
      value: event.target.value,
    });
  };

  render() {
    const { date } = this.props;

    return (
      <li>
        <div className="App__card--inner">
          <h2>{date}</h2>
          <form onSubmit={this.handleFormSubmit} className="App__card">
            <div className="App__card--form">
              <label>Add Your Task</label>
              <textarea
                rows="3"
                cols="30"
                placeholder="type here..."
                value={this.state.value}
                onChange={this.handleAddTask}
                required
              ></textarea>
            </div>
            <div className="App__card--btn">
              <button type="submit">Add Task</button>
            </div>
          </form>
          <Task task={this.state.task} />
        </div>
      </li>
    );
  }
}

export default Date;

임무

import React from 'react';

const Task = (props) => {
  return (
    <div className="App__task">
      <h3>Task</h3>
      <p>{props.task}</p>
    </div>
  );
};

export default Task;

결승선

이제 사용자 인터페이스를 작은 블록으로 분해하여 다른 버전을 만드는 방법에 대한 지침이 있습니다.정적 버전은 우리의 데이터 모델만 필요하고 사용자 인터페이스와 상호작용을 추가하는 최종 버전을 보여줍니다.
나는 당신이 이 강좌를 읽은 후에react 응용 프로그램을 어떻게 구축하는지에 대해 즐거움을 느끼기를 바랍니다.
이 프로그램의 코드here를 찾을 수 있습니다.
응용 프로그램도 시작되고 실행됨here
읽어주셔서 감사합니다!

Reference

이 문제에 관하여("반응 중 사고"에 따라 응용 프로그램 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pablopap/building-an-app-according-to-thinking-in-react-243e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

iOS9 HTTPS

셀 편집기 GUI에서 포커스를 명시적으로 삭제하지 않으면 디스플레이를 업데이트할 수 없습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다