빈 디렉토리의 반응 스크립트

16540 단어 webdev react javascript

반응 스크립트를 사용하여 빈 디렉토리에서 모든 것을 설정합니다. 이 설정은 중간 규모 프로젝트까지 지원합니다.

create-react-app 스크립트

ReactJS를 배우기 시작했을 때 문서에서 create-react-app 사용을 제안했습니다. Create react 앱은 앱을 설정하는 가장 빠른 방법입니다. 반응 스크립트로 설정하는 데 더 많은 것이 있습니다.

요구 사항

Yarn 및 NPM 패키지 관리자와 NodeJS에 익숙합니다.
NodeJS , NPM 및 Yarn 을 설치합니다.

NodeJS LTS 버전https://nodejs.org/en/을 설치합니다.

npm --version를 실행하여 설치가 성공했는지 확인하십시오.

실행 npm install -g yarn .

실행 yarn --version .

초기 설정

프로젝트를 설정하기 위해 다음 단계를 수행했습니다.

빈 디렉토리를 만들고 원하는 이름을 지정합니다.

package.json 파일을 만듭니다.

생성한 디렉토리에서 yarn install를 실행합니다.

내부에 공용 디렉토리와 index.html을 만듭니다.

내부에 src 디렉토리와 index.js를 만듭니다.

package.json 콘텐츠.

{
  "name": "initial-setup",
  "version": "0.1.0",
  "description": "create-react-app initial setup",
  "scripts": {
    "start": "react-scripts start"
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  },
  "dependencies": {
    "react": "18.1.0",
    "react-dom": "18.1.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

index.js 콘텐츠:

import { createRoot } from 'react-dom/client';

function App() {
  return <h1>React App Setup</h1>
}

createRoot(document.getElementById('root')).render(<App />);

소스 코드가 있는 전체 프로젝트 설정은 here 입니다.

다중 루트 설정

멀티 루트는 create root 함수를 여러 번 호출하기 위한 멋진 이름입니다.

다음은 다중 루트 앱을 만들기 위한 간단한 변경 사항입니다.

diff --git a/public/index.html b/public/index.html
index 6672ed0..b5ed2a2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,8 @@
   <title>React App Setup</title>
 </head>
 <body>
-  <div id="root"></div>
+  <div id="foo"></div>
+  <div id="bar"></div>
+  <div id="baz"></div>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
index 5521a9e..9bac9ba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,17 @@
 import { createRoot } from 'react-dom/client';

-function App() {
-  return <h1>React App Setup</h1>
+function Foo() {
+  return <h1>Foo Root</h1>
 }

-createRoot(document.getElementById('root')).render(<App />);
+function Bar() {
+  return <h1>Bar</h1>
+}
+
+function Baz() {
+  return <h1>Baz</h1>
+}
+
+createRoot(document.getElementById('foo')).render(<Foo />);
+createRoot(document.getElementById('bar')).render(<Bar />);
+createRoot(document.getElementById('baz')).render(<Baz />);

멀티 루트라는 용어를 이해하면 기존 웹 앱에 반응을 추가할 수 있습니다. 기존 웹 앱을 상상해 보십시오. 해당 앱은 템플릿 엔진이나 다른 것을 사용하고 있습니다. 우리는 전체 앱을 다시 작성하고 싶지 않습니다. 우리는 무엇을해야합니까? 루트 역할을 할 ID로 div를 만들고 반응 트리를 마운트합니다.

중첩된 HTML 구조에서 반응 트리를 렌더링하는 예:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>React App Setup</title>
</head>
<body>
  <div id="foo"></div>
  <div id="bar"></div>
  <div id="baz"></div>
  <article>
    <h1>An existing title</h1>
    <p>An existing paragraph</p>
    <div>
      <div>
        <div>
          <h2>A form created by react lives here</h2>

          <!-- react can live anywhere inside our app -->
          <div id="nested-root"></div>
        </div>
      </div>
    </div>
  </article>
</body>
</html>

JS:

import { createRoot } from 'react-dom/client';

function Foo() {
  return <h1>Foo Root</h1>
}

function Bar() {
  return <h1>Bar</h1>
}

function Baz() {
  return <h1>Baz</h1>
}

// deeply nested authentication form
// that lives with the regular html
function Form() {
  return (
    <form action="#">
      <label htmlFor="username">
        Username:
        <input type="text" id="username" />
      </label>
      <label htmlFor="" id="password">
        Password:
        <input type="password" id="password" />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}

createRoot(document.getElementById('foo')).render(<Foo />);
createRoot(document.getElementById('bar')).render(<Bar />);
createRoot(document.getElementById('baz')).render(<Baz />);
createRoot(document.getElementById('nested-root')).render(<Form />);