#3 React WP theme: Smart vs Dumb components + React Router > ajax 베이직 게시판

#3 React WP theme: Smart vs Dumb components + React Router

페이지 정보

작성자 고달픈백색
댓글 0건 조회 100회 작성일 16-12-09 01:44

본문

https://lamosty.com/2015/11/10/react-wp-theme-smart-vs-dumb-components-react-router/

"React-powered WP 테마 작성법"자습서의 세 번째 파트에서는 React-powered WordPress 테마의 출발점을 만듭니다. 제대로 작동하려면 응용 프로그램을 가져 오기 위해 필요한 모든 것을 보여 드리겠습니다. 또한 React 구성 요소를 적절하게 스마트와 멍청한 요소로 나누는 방법에 대해서도 설명합니다.

Tutorial navigation

React 단일 페이지 WordPress REST API 주제 자습서
React WP 테마 : 구조, 노드 패키지 및 Webpack
React WP 테마 : Smart vs Dumb components + React Router
React WP 테마 : 바보 같은 구성 요소 만들기

The ‘src’ folder

우리 테마의 루트 디렉토리에 새 폴더를 만들고 src라고 부르십시오. 완전한 응용 프로그램이 그 안에 있습니다. 이제 다음 파일 및 폴더를 만듭니다.

actions/
components/
containers/
reducers/
store/

index.js
index.template.html

Redux 라이브러리와 관련된 작업, 축소 기 및 저장소 폴더에 대해서는 자세히 다루지 않을 것입니다. 자세한 내용은이 기사에서 다룰 내용을 설명합니다.

이제 두 파일을 살펴보고 그들이 무엇에 관한 것인지 살펴 보겠습니다.

index.template.html

이 파일은 HTML Webpack Plugin의 템플리트 역할을합니다 (이 튜토리얼의 이전 게시물은 그 내용을 모르는 경우에 읽습니다). Google 앱이 탑재 될 HTML5 뼈대입니다.

[code]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

[/code]

index.js

index.js는 애플리케이션의 주 파일입니다. 여기서는 모든 React 구성 요소를로드하고 기본 Redux 저장소를 구성하며 가장 중요한 것은 React Router로 앱 경로를 설정합니다.

전체 파일을 여기에 붙여넣고 한 줄씩 살펴 보겠습니다.

[code]

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute } from 'react-router';
import configureStore from './store/configureStore';
import LexiTheme from './containers/LexiTheme';
import ArticlePage from './containers/ArticlePage';
import ArticleListingPage from './containers/ArticleListingPage';
import AboutPageContainer from './containers/AboutPageContainer';
import '../sass/bootstrap.css';
import '../sass/bootstrap-blog.css';

const history = new createBrowserHistory();
const store = configureStore();
let rootElement = document.getElementById('root');

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={LexiTheme}>
                <IndexRoute component={ArticleListingPage} />
                <Route path="about" component={AboutPageContainer} />
                <Route path=":year/:month/:name" component={ArticlePage} />
            </Route>
        </Router>
    </Provider>,
    rootElement
);

[/code]

Importing the important stuff

파일의 시작 부분에 수많은 import 문이 있음을 눈치 챘습니까? 예, 덜 자세한 정보를 원한다면 사용법별로 파일을 그룹화하고 가져올 수 있지만 이해와 설명이 더 쉬워집니다.

먼저 반응 패키지에서 React와 Component를 가져옵니다. 우리는 이것을 사용하여 다음과 같이 ES6 클래스 방식으로 React 구성 요소를 만듭니다.

class MyReactComponent extends Component {
}

실제로 인덱스 파일을 보면 실제로 필요하지 않습니다.????

다음은 ReactDOM입니다. DOM을 React와 연결하여 이제 DOM에 구성 요소를 렌더링 할 수 있습니다. 18 번째 줄을보십시오. ReactDOM.render () 메소드를 호출합니다.이 메소드는 중첩 된 컴포넌트를 DOM에 렌더링합니다. react-dom은 반응이있는 라이브러리 하나 였지만 프로그래머가 React를 웹 페이지 (예 : 모바일 앱 제작을위한 React Native)를 만드는 것 이외의 다른 용도로 사용하기 때문에이 둘을 분리하기로 결정했습니다.

createBrowserHistory는 브라우저에서 탐색 내역을 관리하기위한 작은 lib입니다. 가능한 경우 HTML5 기록 API를 사용하고 그렇지 않은 경우 해시 기록으로 돌아갑니다. 내가 올바르게 기억한다면, 이것은 반응 라우터 라이브러리의 일부분 이었지만, 분리되었을 때 더 모듈화되어있었습니다.

4 번과 6 번 라인은 현재 중요하지 않습니다 (Redux 관련). 다음 글에서 그것에 대해 이야기 할 것입니다.

'react-router'의 {Router, Route, IndexRoute} import는 React Router를 사용하기 위해 필요한 모든 모듈을 가져옵니다.

React Router

React Router는 우리의 앱에서 산들 바람으로 산책을하는 아주 간단한 아이디어입니다. Ruby on Rails 또는 Django에서 경로를 지정하는 것과 비슷합니다. 그것은 다음과 같이 작동합니다 :

모든 것이 표준 React 컴포넌트입니다.
"경로를 둘러싼 래퍼입니다. 그 목적은 특정 히스토리 API를 사용하여 라우팅 시스템을 초기화하는 것입니다. 그것이 우리가`history = {...}`속성을 제공해야하는 이유입니다.
"구성 요소는 특정 '경로'(URL의 위치)를 가리키며, 경로가 일치하면`component = {...} '속성에서 제공된 구성 요소를 렌더링합니다.

그리고 그것은 기본적입니다!

작은 예를 들어 봅시다.

우리는 작은 사이트 (www.example.com)에 home, about 및 contact라는 세 페이지가 있습니다. 이 페이지는 3 개의 반응 구성 요소 (예 : 집, 정보 및 연락처)로 표시됩니다. 앱에 다음 라우팅을 추가합니다.

이제 http://www.example.com/home URL을 방문하면 React Router가 정의 된 경로를보고 첫 번째 경로와 일치하게됩니다 (path = "/ home"). 첫 번째 경로에 Home 구성 요소를 할당 했으므로 React Router가 라우터를 렌더링합니다.

http://www.example.com/about을 방문하면 홈 대신 About 구성 요소를 렌더링하는 경우를 제외하고는 이전과 똑같이 동작합니다.

아주 쉽지, 안 그래? 그러나 우리의 코드 index.js로 돌아가십시오.

Index.js continued

index.js 파일에는 좀 더 복잡한 React Router 정의가 있습니다.

다른 표준 React 구성 요소와 같은 경로를 중첩 할 수 있습니다. 이는 경로의 전체 경로를 지정할 필요가 없다는 것을 의미합니다. 즉, 구성 요소가 경로의 "아래"에 위치하면 단순히 중첩됩니다.

위의 코드에서 path = "/"는 색인 경로입니다. 다른 모든 응용 프로그램 경로는 해당 경로의 "아래"에 있으므로 해당 경로를 나타내는 s가 그 안에 중첩되어 있습니다. 이제 about 페이지 경로를 정의 할 때 루트가 path = "/"를 사용하여 루트 경로 아래에 중첩되기 때문에 초기 슬래시 문자 (/)를 지정할 필요가 없습니다.

"하지만 URL에 대해 /로 이동하면 어떻게됩니까?" 렌더링 할 구성 요소는 무엇입니까? AboutPageContainer 또는 LexiTheme 중 하나입니까? " 좋은 질문입니다! React Router는 "루트"경로 아래에 "about"경로를 중첩 할 때 LexiTheme 구성 요소를 렌더링합니다. 그러나 AboutPageContainer를 자식으로 전달합니다. React children 구성 요소가 무엇인지 아는 경우 각 구성 요소에서 this.props.children과 같은 소품을 통해 해당 요소에 액세스 할 수 있습니다. 다음과 같이 상위 컴포넌트에서 하위 컴포넌트를 렌더링하는 것만 큼 문제가됩니다.

따라서 논리는 우리가 네비게이션 경로가 액세스 된 것에 따라 변경 될 메인 네비게이션, 헤더, 사이드 바, 푸터 등 및 그 자식을 렌더링하는 단일 부모 컴포넌트 (예 : LexiTheme)를 가지고 있다는 것입니다.

휴, 내가하는 말을 이해할 수 있기를 바랍니다. 어쨌든, React Router 문서는 내가 할 수있는 것보다 더 잘 설명합니다.

Smart vs dumb React Components

import 문으로 돌아 갑시다. 컨테이너 / 폴더 (예 : LexiTheme, AboutPageContainer)에서 일부 React 구성 요소를 가져옵니다. 그러나 폴더 구성 요소 / React 구성 요소도 보유하고 있습니다 (이름에 따라 분명히). 그렇다면이 두 폴더의 차이점은 무엇입니까?

처음에는 꽤 혼란 스러웠습니다. 그런 다음 Smart Abs Dumb 구성 요소에 대한 Dan Abramov의 기사를 읽었습니다. 요약하면 React 구성 요소를 스마트 그룹과 멍청 그룹으로 나눠야합니다.

스마트 구성 요소는 논리를 포함하고 데이터를 수집하며 계산을 수행합니다. 벙어리 구성 요소는 똑똑한 구성 요소에서 렌더링되고 최종 데이터가 전달되어 뷰 (HTML) 만 렌더링됩니다. 스마트 구성 요소는 프레임 워크에 고유하며 일반적으로 쉽게 재사용 할 수 없습니다. 반면에 벙어리 구성 요소는 일부 HTML 만 렌더링하므로 쉽게 다시 사용할 수 있습니다.

이 구분을하면 앱과 구성 요소가 재사용 및 명확 해집니다. 바라기를 바랍니다.

따라서 스마트 구성 요소는 컨테이너 / 폴더에 있고 구성 요소는 구성 요소 / 하나에있는 것이 좋습니다. 그리고 그게 전부입니다.

Wrapping it up

마지막으로 부트 스트랩의 CSS 파일을 가져옵니다. Webpack의 장점은 단순히 CSS 파일을 가져 와서 컴파일하고 별도의 .css 파일에 넣는 것입니다. 이 시리즈의 이전 기사에서 이 문제를 논의했습니다.

필요한 객체와 모듈을 모두 가져온 후에 createBrowserHistory 객체를 인스턴스화하고 Redux 저장소를 구성하고 (자세한 내용은이 기사에서 다룰 예정 임) 루트 <div> (<div> 이 게시물의 시작 부분에있는 HTML 템플릿).

마지막 단계는 ReactDOM.render () 메소드로 React 컴포넌트를 렌더링하는 것이다. 여기에는 렌더링 할 구성 요소와 렌더링 할 HTML 요소라는 두 가지 인수가 필요합니다.

이전글React Native vs Native Apps 16.10.21
다음글React Native 배우기 19.04.16

댓글목록

등록된 댓글이 없습니다.