React ⚛️🤔와 React의 컴포넌트 개념

음, 이 블로그를 열었다면 React 개발자이거나 최신 유행어인 Reactjs에 대해 알고 싶으실 것입니다.

리액트JS란?

React JS는 최신 웹 개발에서 대화형 웹 애플리케이션을 구축하는 데 사용되는 JavaScript 라이브러리입니다. react.js의 기본 아이디어는 UI 요소를 작은 구성 요소로 나누고 나중에 결합하여 전체 앱을 만드는 것입니다. 먼저 아래 이미지 참조

여기에서 트위터의 UI를 세 가지 주요 구성 요소로 나눌 수 있습니다. 이 세 가지 구성 요소를 모두 별도로 설계 및 개발하고 결합하여 기본 UI를 만들 것입니다. 이러한 구성 요소는 별도의 구성 요소로 더 나눌 수 있습니다. 아래에서 트위터 카드를 여러 구성 요소로 나누었습니다. React의 핵심은 컴포넌트입니다.
.

주어진 예제의 Mockup을 컴포넌트로 만들어 봅시다.
1) 좌측 컴포넌트

import React from "react"; 
class LeftComponent extends React.Component {
    render() {
       return(
        This is the left component
       )
    }
}

export default LeftComponent;

2) 중간 구성 요소

import React from "react"; 
class MidddleComponent extends React.Component {
    render() {
       return(
        This is the Middle component
       )
    }
}
export default MidddleComponent;

3) 오른쪽 구성 요소

import React from "react"; 
class RightComponent extends React.Component {
    render() {
       return(
        This is the Right component
       )
    }
}
export default RightComponent;

그래서 용도에 맞게 컴포넌트를 따로 만듭니다. 그들 모두를 결합하자



그래서 기본적으로 모든 구성 요소를 기본 앱으로 가져오고 모두 결합합니다. 구성 요소 및 사용법에 관한 모든 것.

이 게시물이 마음에 드셨으면 합니다. 이 게시물에 대한 반응의 논리적 구문에 깊이 들어가고 싶지 않습니다. 가능한 한 단순하게 유지하고 싶습니다. 구문이 포함된 전체 반응 자습서를 만들고 싶다면 의견에 의견을 제시하십시오.

내가 하고 있는 모든 일을 따라하려면 Twitter에서 나를 팔로우하세요. ==>