개시하다

Fullstack React: 30 Days of React의 의역.
조금 읽었기 때문에 간신히 번역하려고 했어요.지칠 때까지 계속해.상당히 의역하다.

Day1 - What is React?

Day2 - What is JSX?

Day3 - Our First Components

정편

데이 3으로 첫 번째 조립품을 만들 수 있으니 더 재미있는 조립품을 만들어 보세요.Day 4 부터 보다 복잡한 구성 요소 제작 방법을 살펴보겠습니다.

※ 이것은 캡처이지만 본가에서는 리액트가 렌더링한 HTML
자주 보는 인터페이스 타임라인을 생각해 보세요.페이스북과 트위터에 사건의 역사를 보여주는 그거야.
물론 전체 타임라인을 하나의 구성 부분으로 제작할 수도 있지만, 단일 레벨이 너무 커서 테스트 능력이 떨어지기 때문에 좋은 생각은 아니다.

// Don't do it like this. This is for example only
// このようにしてはいけません！！これはダメな例です！！
class Panel extends React.Component {
  render() {
    return (
      <div className="notificationsFrame">
        <div className="panel">
          <div className="header">

            <div className="menuIcon">
              <div className="dashTop"></div>
              <div className="dashBottom"></div>
              <div className="circle"></div>
            </div>

            <span className="title">Timeline</span>

            <input
              type="text"
              className="searchInput"
              placeholder="Search ..." />

            <div className="fa fa-search searchIcon"></div>
          </div>
          <div className="content">
            <div className="line"></div>
            <div className="item">

              <div className="avatar">
                <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
                Doug
              </div>

              <span className="time">
                An hour ago
              </span>
              <p>Ate lunch</p>
            </div>

            <div className="item">
              <div className="avatar">
                <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
              </div>

              <span className="time">10 am</span>
              <p>Read Day two article</p>
            </div>

            <div className="item">
              <div className="avatar">
                <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
              </div>

              <span className="time">10 am</span>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>

            <div className="item">
              <div className="avatar">
                <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
              </div>

              <span className="time">2:21 pm</span>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>

          </div>
        </div>
      </div>
    )
  }
}

Breaking it down

그러면 단일한 구성 요소로 구성된 것이 아니라 여러 개의 구성 요소로 분할해 보세요.이 구성 요소를 보면 크게 두 개의 구성 요소로 나뉜다.

제목 표시줄

콘텐츠

또한 내용 부분을 각자의 취미(가상 이미지, 시간 스탬프, 텍스트)로 나누면 3개의 구성 요소로 나눌 수 있다.

더 나아가 제목 표시줄을 제목, 메뉴 표시줄, 검색 아이콘으로 나눌 수 있습니다.여긴 안 하지만 필요하면 할 수 있어.어느 정도로 분할할지를 결정하는 것은 과학이라기보다는 예술이다(상황과 취향에 따라 결정하는 것이 중요하니 마음대로 생각하세요).
어쨌든, 응용 프로그램을 구성 요소로 분할할 수 없는 것은 좋은 일이다.그래서 테스트 능력을 높여 기능마다 잘 알고 있다.

The container component

타임라인 프로그램을 만들기 위해서는 먼저 전체 프로그램에 넣을 용기 구성 요소를 만듭시다.컨테이너는 단지 다른 두 개의 구성 요소 (제목 표시줄과 내용) 의 포장일 뿐이다.
이 구성 요소는 아직 특별한 기능을 필요로 하지 않기 때문에HelloWorld 구성 요소와 비슷하며, 렌더기만 있는 구성 요소입니다.

class App extends React.Component {
  render() {
    return (
      <div className="notificationsFrame">
        <div className="panel">
          {/* content goes here */}
        </div>
      </div>
    )
  }
}

className은 JSX의 메모입니다.자세한 내용은 Day2입니다.

Child components

일부 구성 요소는 다른 구성 요소를 중첩할 수 있습니다.중첩된 것을 모 어셈블리라고 하고 중첩된 것을 자 어셈블리라고 합니다.
패키지 구성 요소가 있기 때문에 제목 표시줄과 내용 구성 요소를 구축하기 위해 원본 코드를 복사할 수 있습니다.

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="fa fa-more"></div>

        <span className="title">Timeline</span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

마지막으로 내용 구성 요소를 구축합니다.각 타임라인 요소에는 단일 구성 요소로 가상, 타임 스탬프 및 텍스트가 있습니다.

class Content extends React.Component {
  render() {
    return (
      <div className="content">
        <div className="line"></div>

      {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
            Doug
          </div>

          <span className="time">
            An hour ago
          </span>
          <p>Ate lunch</p>
          <div className="commentCount">
            2
          </div>
        </div>

        {/* ... */}

      </div>
    )
  }
}

리액트 내 리뷰를 위해 사용{ /* コメント */ }.

Putting it all together

머리글 구성 요소와 컨텐트 구성 요소가 있으므로 App 구성 요소에 결합하십시오.일반적인 HTML 요소처럼 처리할 수 있는 것이 좋은 곳입니다.

class App extends React.Component {
  render() {
    return (
      <div className="notificationsFrame">
        <div className="panel">
          <Header />
          <Content />
        </div>
      </div>
    )
  }
}

이렇게 하면 여러 개의 부품을 조합하여 부품을 만드는 방법을 알게 된다.
그러나 이 프로그램은 아직 사용자 조작과 사용자 정의 데이터를 사용하지 않았다.일반 HTML보다 쉽게 처리할 수 있도록 React를 사용합니다.
Day5에서 보다 동적인 데이터 제어 React를 학습합니다.