첫 번째 React.Js 앱 및 폴더 구조

"야호!! 내 첫 리액트 앱을 만들었다"고 크게 외치게 되어 기쁩니다 😃😃😃😃😃

저와 함께 탐험해보세요. 재미있을 것이고 자신감이 생길 것입니다.

첫 반응 앱을 만들어 봅시다! 🚀

전제 조건 🍄

나는 당신이 당신의 시스템에서 install node 하기를 원합니다. 그것은 당신의 ReactJs 삶을 쉽게 만들어 줄 것입니다. Node는 NPM -> Node Package Manager인 패키지 관리자를 제공합니다. 모든 종속성 및 타사 패키지를 관리합니다.

컴파일러가 있기를 바랍니다. 그렇지 않다면 install VS Code 굉장합니다.

이제 개발자가 되어 터미널을 여세요 👩‍💻

터미널로 이동하여 반응 앱을 생성하고 명령을 실행합니다.

npx create-react-app your_app_name
or
yarn create-react-app your_app_name

이제 폴더 내부를 탐색합니다.

cd your_app_name

이제 폴더 내에서 명령을 실행합니다.

npm start
or
yarn start

이제 브라우저를 열고 localhost:3000에서 첫 반응 앱을 볼 수 있습니다!! 🔥🔥

만세!!!! 😍😍

이제 원활한 여정을 위한 폴더 구조를 이해해 보겠습니다. 📂

따라서 폴더에서 Package.json 파일을 볼 수 있습니다. 📄 매우 중요하고 유용한 파일입니다. 종속성의 모든 메타 데이터, 패키지 버전, 반응 앱의 스크립트를 보유합니다.

프로젝트 빌드에 따르면 npx를 사용한 경우 package.lock.json을 볼 수 있고, 원사를 사용하여 반응 앱을 만든 경우 yarn.lock.json을 볼 수 있습니다. 그대로 둘 수 있습니다.

이제 모든 종속 항목이 설치된 node_modules 파일이 있습니다.

이제 공용 폴더로 이동합니다. 여기에는 파일이 거의 없지만 index.html에만 관심이 있습니다. 폴더에 있는 유일한 HTML 파일입니다.

즉, React는 단일 페이지 애플리케이션 -> SPA입니다. 즉, 브라우저에서 모든 것이 동적이지만 브라우저에 제공되는 유일한 파일입니다. 30,000개 파일의 3개 파일이든 반응 폴더의 모든 단일 구성 요소에 대한 컨테이너 파일을 가져올 수 있습니다. 🔥

지금 주목 ❗

index.html 파일에서 id="root인 body 태그에 div가 있는데, 첨부된 이미지의 31번 줄에 있는 것을 볼 수 있습니다. 명심하십시오. 이에 대해 알려드리겠습니다. 그 전에 다음으로 이동하십시오. src 폴더,

Src 폴더에서 가장 많이 사용되는 폴더입니다. 여기에서 index.js 파일을 볼 수 있으며, 8번 행에서 사용 중인 DOM 요소는 root이며 방금 index.html 파일에서 본 것과 동일합니다.

따라서 DOM 노드에 있는 모든 것은 루트에 의해 처리되고 여기서 App.js는 루트에 제공됩니다.

따라서 루트 요소가 브라우저에 제공되고 App.js의 콘텐츠가 브라우저에 표시되는 것과 같은 보기가 될 것이라고 말하면서 마무리하겠습니다.

이제 App.js 파일에서 무엇이든 추가 및 편집하고 브라우저에서 변경 사항을 확인할 수 있습니다.🥂

로고, css 파일과 같은 다른 파일이 있습니다. 탐색해 보시기 바랍니다.

따라서 이 메모에서 우리는 첫 번째 반응 앱을 만들었고 폴더 구조에 대해서도 알게 되었습니다. 스스로 시작하면 더 많은 것을 알게 될 것입니다. 😁 😁

지금 반응 앱을 실행하고 계시기를 바랍니다. 😁😁

다음편에서 뵙겠습니다. 👋

😃에서 나와 연결할 수 있습니다.