React 생태계
소개
내가 React를 배우기 시작했을 때, React가 라이브러리인지 프레임워크인지에 대해 커다란 논쟁이 있었다.React가 프레임워크라고 가정하지만 항상 Vue 또는 Angular와 비교되기 때문에 실제로는 JavaScript 라이브러리입니다.
그러나 웹 팩, Babel, Router 등 다른 구성 요소도 있어 완전한 프레임워크가 된다.일반적으로, 이것은 엔진 뚜껑 아래에 숨겨져 있습니다. 왜냐하면 우리는 일반적으로'react 응용 프로그램 만들기'를 사용하여react 템플릿 코드를 생성하여 응용 프로그램을 시작하기 때문입니다.
본고에서 우리는'반응 생태계'를 구성하는 다음과 같은 관건적인 구성 요소를 간략하게 요약할 것이다.
너는 위의 첫 문장을 읽을 수 있다
반응하다
인용문에서 언급한 바와 같이, React는 하나의 라이브러리입니다. 색인에 "React"와 "Reactdom"스크립트 표시를 포함할 수 있습니다.그것은 완전히 효과가 있다.
다음 코드를 실행할 수 있습니다. 이것은 완벽하고 효과적인 React 응용 프로그램입니다.당신은 조작 over here.에서 코드를 찾을 수 있습니다
<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>
<body>
<div id="app"></div>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function Hello({ name }) {
return <h1>Hello, {name}</h1>;
}
ReactDOM.render(<Hello name='Skay' />, document.getElementById('app'));
</script>
</body>
</html>
더 높은 차원에서 이 구성 요소 중의 하나하나, 그리고 그들이 막후에서 무엇을 해서 생산급 React 응용 프로그램을 지원하는지 봅시다.
바베타
Babel's website에 액세스하면 Babel이 JavaScript 컴파일러임을 나타냅니다.이것은 Babel이 지정한 구성에 따라 JavaScript 코드를 한 형식에서 다른 형식으로 변환하는 것을 책임진다는 것을 의미한다.
이제 아래의 코드 예시를 봅시다.
import React from 'react'
export default function User ({ name }) {
return (
<div>
<h1>Hello, {name}</h1>
</div>
)
}
하지만 Babel의 멋진 점은 JSX에만 국한되지 않는다는 점입니다.→ JS 변환, 그러나 거의 모든 종류의 변환이 가능하며, ES6+ 코드를 이전 브라우저가 이해할 수 있는 뒤로 호환되는 자바스크립트 버전으로 변환하는 데 가장 많이 사용된다.
웹 패키지
Webpack은 모듈 바인딩기입니다.코드 라이브러리의 모든 가져오기와 내보내기를 검사하고 브라우저가 이해할 수 있는 파일에 모든 모듈을 지능적으로 묶습니다.
따라서 위의 예시에서 다음 몇 줄 코드,'import','export'문구는 웹팩이 스캔한 내용을 하나의 패키지로 묶는 것이다.색인에서 인용될 js 파일입니다.html.
import React from 'react'
export default function User
경로
그 생각은 라우터를 핵심 라이브러리의 일부로 하는 것이 아니라 React를 간단한 UI 라이브러리로 하는 것이다.이렇게 하는 목적은 사용자가 React와 통합하고자 하는 공유기의 유형을 결정하기 위해 유연성을 제공하는 것이다.
React에서 가장 유행하는 라우터는 당연히 'React Router'입니다.
React 라우터의 작업은 사용자의 현재 URL 경로에 따라 특정한 React 구성 요소를 보여 줍니다.
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
React Router는 블로그 글을 단독으로 발표할 수 있도록 다시 한 번 광범위한 화제가 되었다.이제 사용자가 액세스하는 URL 경로에 따라 React 구성 요소를 보여주는 구성 요소로 간단하게 이해할 수 있습니다.
스타일링
React 응용 프로그램의 스타일을 설정할 수 있는 두 가지 방법이 있습니다.전통 방식과 반응 방식.react 응용 프로그램에 스타일을 정의하는 두 가지 방법을 살펴보겠습니다.
전통 조형
전통적인 방법은 색인에 모든 스타일을 추가하는 것을 포함한다.css, 클래스가 있을 수 있습니다. 등급은 그곳에 정의되어 있습니다. 보통 비반응 프로그램을 만들 수 있습니다.실제로 SASS 또는 모든 CSS 프로세서를 포함할 수도 있습니다.
React 스타일
스타일링의 React 방법에는 어셈블리 모델이 포함됩니다.위의 예시에 스타일을 추가하고 코드의 외관을 봅시다.
const styles = {
header: {
fontWeight: 400,
fontSize: 55,
color: '#a41c1c'
}
}
export default function User ({ name }) {
return (
<div>
<h1 style={styles.header}>Hello {name}</h1>
</div>
)
}
상태 (중복 / 컨텍스트)
Redux나 상하문에 대해 토론하기 전에 React 구성 요소에 대한 상태를 정의합니다.
반응 상태
React의 이념은 하나의 구성 요소를 구축하는 것이다. 모든 구성 요소는 자신의 상태를 관리하고 UI를 설명할 수 있다.그리고 응용 프로그램을 얻기 위해 이 구성 요소를 조합합니다.
그러나 실제 응용에서 구성 요소의 상태는 일반적으로 다른 구성 요소와 공유해야 하며, 여러 단계가 존재하면 구성 요소 트리를 통해 상태를 전달하는 것이 도전이 된다.응용 프로그램이 더 크고 복잡해질 때, 보통 이런 상황이 발생한다.
Redux 회사
이 문제를 해결하기 위해 Redux가 탄생했습니다.Redux는 상태 관리 라이브러리입니다. 비록 React 라이브러리의 상하문에서 자주 사용되지만, 실제로는 다른 그림 라이브러리와 함께 사용할 수 있으며, React와는 무관합니다.
Redux의 철학은 완전히 다르다.Redux를 사용하면 다른 곳에 분산되지 않고 모든 상태를 저장소라고 하는 위치에 붙일 수 있습니다.그리고 당신은 엄격한 규칙을 세워 당신의 상점 상태가 소위 행동을 통해 어떻게 바뀌는지 규정합니다.
컨텍스트
React 팀은 "Redux"같은 외부 라이브러리에 의존하지 않고 구성 요소의 상태를 집중적으로 관리하는 상하문 API를 도입했다.
공식 React 문서에 따르면 상하문은 구성 요소 트리를 통해 데이터를 전달하는 방법을 제공하며 각 단계에서 도구를 수동으로 전달할 필요가 없다.
모든 주제(예를 들어 Redux, Context API)는 전문적인 블로그 글로 세부 사항을 설명해야 한다.본고의 일부로서 중요한 것은'상태'관리는 React 생태계의 핵심 부분입니다. 사용자의 용례나 응용 프로그램의 복잡성에 따라 구성 요소의 상태 관리 메커니즘에서 간단하게 관리하거나 상하문 API나 Redux 라이브러리를 사용할 수 있습니다.
결론
나는 이것이 기본적으로 핵심 구성 요소에 대한 개술이라고 생각한다.본고가 끝난 후에 CLI에서 CRA(create react 응용 프로그램)를 실행할 때 그 비밀을 알 수 있기를 바랍니다. 누군가가react 응용 프로그램이라고 말할 때 이것은 생태계이지react 라이브러리가 아닙니다.
내 시사통신을 구독하고 트위터에 팔로우하는 것을 잊지 마라.
다음 글도 참조하십시오.
Reference
이 문제에 관하여(React 생태계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/skaytech/the-react-ecosystem-1l05텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
