React - 기타 구성 요소

구성 요소는 기본적인 기능을 반환하거나 구성 요소를 벗어나며, 기본적으로 기능에 영향을 미치지 않으며, 기능, 재사용, 요약 및 코드의 중복 제거, 함수 선언, 함수 표현식, 화살표 함수 및 사용 클래스의 범주에 속합니다.

기본 구성 요소에 반응하고, 구성 요소를 구성하고, 웹 페이지에 구성 요소를 추가하세요.

Exemplos serão usando arrow function.

예:

import React from 'react'

const Componente = () => {
  return (
    <div>Componente</div>
  )
}

export default Componente;

O nome da função da nome ao componente, e esse pode ser reutilizados quantas vezes for necessário, sua utilização é usando a sintaxe <Componente/> que é equivalente também a <Componente></Componente> que é o uso mais comum.

예:

...
  export const Home = () => {

  return (
    <>
      <Componente />
      <Componente />
      <Componente />
    </>
  )
}

구성 요소Home의 재사용 가능성Componente은 필요에 따라 재사용할 수 있는 퀀타스 vezes que por sua vez pode ser reutilizando quantas vezes, assim são criados componentes aninhados criando a interface desejada.

Por convenção os nomes dos componentes começam com a letra maiúscula, isso os diferencia das tag's normais e de outros componentes.

React disponibiliza o componente <App/> que normalmente é utilizado como 'nó' raiz, onde todos os demais são filhos direto ou indireto desse, que por sua vez é 'injetado' no HTML através do método render do ReactDOM .

Os componentes são dispostos na ordem em que devem aparecer na página, vamos verum exemplo de componentes que formaria uma página.

export const Home = () => {
  return (
    <>
      <Header/>
      <NavBar/>      
      <Carrousel/>
      <Componente/>
      <Componente/>
      <Footer />
    </>
  )
}

Os Componentes podem receber parâmentros chamados props que é um objeto que contém os atributos passados ​​na chamada do componente, isso deixa-o com maior flexibilidade na sua reutilização, é possivel também o uso de estados para gerenciar ciclos de vida do componente, esses assuntos serão abordados em post's seguintes.

Todo componente tem de forma nativa uma propriedade chamada children que é todo elemento ou compomente que seja adicionado entre a abertura <Componente> {children} </Componente> e fechamento do componente.

예:

...
const Card = (props) => {

  return (
    <div>
      {props.children}
    </div>
  )
}

// Componente <Profile/> é o children de <Card/>
...
const Container = (props) => {

  return (
    <Card>
     <Profile/>
    </Card>
  )
}

React의 기반이 되는 구성 요소는 응용 프로그램의 일부로 'quebrar'와 'quebrar'를 재사용할 수 있고, manutenabilidade와 produtividade를 확인하고, criar nossos 앱에 필요한 구성 요소를 필요로 합니다.

Baseado no post - React.js Basics – The DOM, Components, and Declarative Views Explained

Documentação Oficial - Componentes e Props

Veja também: |

_{Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como insentivo no meus estudos de React criando outros posts pra fixação do aprendizado.}

나 시감 :)

Github |