React 기본 개념

React는 Facebook에서 만든 프론트 엔드 JavaScript 라이브러리입니다. 재사용 가능한 UI 요소를 만드는 데 도움이되는 구성 요소 기반 접근 방식을 따릅니다.

1. React의 JSX

일반적으로 JSX구문 설탕React.createElement(component, props, ...children)

JSX코드 :

<div>My Name is Hossain</div>

React.createElement("div", null, "My Name is Hossain");

우리는 모든 자바 스크립트 표현식을 {}. 아래의 예를 흐르는 :

<Component sum={5 + 9 + 1} />

3. 문자열 리터럴

문자열을 소품으로 전달할 수 있습니다. 두 개의 JSX 표현식이 동일합니다. HTML 속성과 동일합니다.

<Component name="Hossain" />
<Component name={'Hossain'} />

우리는 이미 소품으로 객체로 가질 수 있으며 JSX에서 소품을 전달했습니다. ..."spread"연산자를 사용 하여 props 객체를 전달할 수 있습니다.

const App = () => {
  const props = {name: 'Hossain', age: 20};
  
  return <Person {...props} />
}

더 많은 JSX를 자식으로 전달 props.children하거나 중첩 된 구성 요소를 HTML과 동일하게 표시 할 수 있습니다.

<Container>
  <App1 />
  <App2 />
</Container>

defaultPropsclass컴포넌트 에서 속성을 정의 할 수 있습니다 . .NET Framework에서 기본 소품을 설정합니다 class. 이것은 사용 undefind되지만 사용하지는 않습니다.null

class Container extends React.Component {
  // ...
}
Container.defaultProps = {
  color: 'red'
};

현재 빌드 프로세스가 설정되어 있는지 확실하지 않은 경우 Chrome 용 React 개발자 도구를 설치할 수 있습니다 . React 제작 분위기로 사이트를 방문하면 React Developer Tools 배경색이 어둡다는 것을 알 수 있습니다. 사이트가 개발 분위기이므로 React Developer Tools 배경색이 빨간색임을 알 수 있습니다. 를 사용하여 사이트를 구축하면 다음과 create-react-app같이 칭찬 할 수 있습니다.

npm run build
or 
yarn build

지금까지, 우리는 정적 데이터를 사용할 수 있지만, 데이터가 상태 변화를 변경하는 경우, 우리가 사용할 수있는 useState양식을 React hooks. 흐르는 예가 불었다 : useState함수입니다. 값의 기본값 count입니다. 만약 setCount()변경에 state값. count가치가 변하고 있습니다.

const App = () => {
  [count, setCount] = useState(0);
  
  const handleClick = () => {
    setCount(count + 1)
  }
  
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

JSX에서는 조건부 렌더링에 삼항 연산자를 사용할 수 있습니다.

<div>{name ? name : 'What is your name?'}</div>

반응 요소에 대한 이벤트 처리는 DOM 요소에서 이벤트를 처리하는 것과 매우 유사합니다. 약간의 구문이 다릅니다.

• React 요소 이름은 camelCase를 사용합니다.
• JSX를 사용하면 문자열이 아닌 이벤트 핸들러로 함수를 전달할 수 있습니다.

<button onClick={() => console.log('Clicked me')}>
    Click me
</button>