React 시작하는 방법 – 초보자 가이드 파트 -2

내 첫 번째 블로그를 읽었다면 react js로 시작하는 방법에 대한 몇 가지 팁을 얻었을 것입니다. 오늘 react js에 대해 자세히 알아보고 웹 앱 만들기를 시작하겠습니다.

왜 js에 반응합니까?

-> React js는 매우 인기 있는 라이브러리이며 최소한의 코드로 앱을 만들 수 있기 때문에 인기가 있습니다. 즉, 코드를 한 번 작성하고 반복해서 재사용할 수 있으므로 개발이 더 빨라지고 반응도 jsx와 같은 일부 확장을 사용하여 간단한 용어로 React js는 선언적입니다.

가상 대 실제 돔.

-> Js에 익숙하다면 DOM에 대해 알고 있을 것입니다. Dom은 기본적으로 html 요소 또는 태그를 포함하는 브라우저의 문서 모델입니다. 기본적으로 js의 도움으로 이러한 DOM 요소를 조작하여 멋진 사용자 경험을 만듭니다. 그래서 react에서 virtual dom의 개념은 상당히 흥미롭습니다. React js는 real dom이 아닌 우리의 모든 작업을 수행하는 virtual dom을 생성하고 개발 중에 작업할 때 구성 요소는 virtual dom에서 트리 구조로 렌더링됩니다. 그런 다음 React는 비교합니다. 가상 돔을 실제 돔과 함께 변경하고 변경해야 하는 구성 요소만 변경하므로 시간이 지남에 따라 모든 코드를 변경하지 않으므로 앱이 일반적이고 일반적인 웹 사이트보다 훨씬 빠르게 렌더링됩니다. 예를 들어 구성 요소를 만들고 구성 요소에서 날짜를 렌더링하면 전체 페이지가 아닌 구성 요소만 똑딱거리는 것을 알 수 있습니다.



반응을 시작하려면 패키지가 있으므로 간단히 생성하십시오.
아래 코드가 있는 개발 서버

npx create-react-app my-app

이제 my-app이라는 반응 앱을 만들었습니다.
이제 package.json -> 스크립트로 이동하면 다음과 같은 것을 찾을 수 있습니다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

시작 -> 반응 앱을 시작합니다. 예: npm start

빌드 -> 프로덕션용 앱을 빌드하고 정적 파일을 생성합니다. 예: npm 실행 빌드

테스트 -> 앱 또는 구성 요소를 테스트하는 데 사용됩니다.

꺼내기 -> 앱을 되돌리려면 꺼내십시오.

따라서 npm start 를 수행하면 개발이 포트 3000에서 시작됩니다.

이제 react-dom을 사용하여 전체 앱을 렌더링하는 기본 파일 index.js를 찾을 수 있습니다. 코드는 다음과 같습니다.

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
          <React.StrictMode>
            <App />
          </React.StrictMode>
);

여기에서는 기본적으로 앱 구성요소를 div 태그에 추가했습니다. .
우리는 이 루트를 취하고 이 div 태그 안에 js를 추가합니다.
이제 App.js가 렌더링되고 반응 js의 구성 요소로 불립니다.

1. 반응 js의 구성 요소.

-> 반응 js에서 구성 요소는 빌딩 블록이라고 합니다. 우리는 작은 구성 요소를 만들고 나중에 이를 캡슐화하여 복잡한 UI를 만듭니다. 구성 요소는 기본적으로 소품을 입력으로 사용하고 jsx를 반환합니다.



App.js에서

const App = (some props) => {

   return (
    // it returns jsx 
   // <> </> this is and react fragment.
      <>This an simple app</>
 )
}

여기에서 간단한 앱 구성 요소를 만들었으므로 구성 요소의 일부 규칙은 다음과 같습니다.

구성 요소의 첫 글자를 대문자로 사용하십시오. 예: App , Navbar 등. 그렇지 않으면 일반 함수로 처리됩니다.

태그를 닫아 구성 요소를 호출하십시오. 그렇지 않으면 JSX에서 이를 오류로 처리합니다.

구성 요소를 원하는 만큼 중첩할 수 있습니다.

예를 들면 :

export const Navbar = () => {
return (
<div>This is a navbar</div>
)
};

export const App = () => {
return (
<App />
)}

2. JSX

-> JSX는 단순히 html과 javascript를 한 곳에서 사용할 수 있도록 도와주는 javascript xml입니다.
예를 들면 :

const App = () => {
   const name = "rajiv";
    return (
     <h1>My name is {name}</h1>
)
}

JSX를 사용하는 동안 몇 가지 규칙은 다음과 같습니다.
ㅏ. 구성 요소에는 div 태그가 하나만 있어야 합니다.
예:

const App = () => {
return (
   <>Hello</>
   <>Wow</>
)};

오류가 발생하므로 단일 태그로 래핑됩니다.



비. Jsx는 babel에 의해 일반 html로 컴파일됩니다.

결론,

이제 시작할 수 있을 것 같습니다. 파트 3을 가져오겠습니다. 그때까지 문제가 있으면 저에게 상담하십시오.
https://www.facebook.com/Rajiv.chaulgain/ ,
https://github.com/rajivchaulagain