create react app
v5.0.1
빌드 구성 없이 React 앱을 만듭니다.
Create React App은 macOS, Windows 및 Linux에서 작동합니다.
문제가 해결되지 않으면 문제를 제출해 주세요.
질문이 있거나 도움이 필요하면 GitHub 토론에 문의하세요.
npx create-react-app my-app
cd my-app
npm start 이전에 npm install -g create-react-app create-react-app app 을 통해 전역적으로 create-react-app을 설치한 경우 npm uninstall -g create-react-app 또는 yarn global remove create-react-app 사용하여 패키지를 제거하는 것이 좋습니다. 해당 npx는 항상 최신 버전을 사용합니다.
(npx는 npm 5.2+ 이상과 함께 제공됩니다. 이전 npm 버전에 대한 지침을 참조하세요.)
그런 다음 http://localhost:3000/을 열어 앱을 확인하세요.
프로덕션에 배포할 준비가 되면 npm run build 사용하여 축소된 번들을 생성하세요.
webpack이나 Babel과 같은 도구를 설치하거나 구성할 필요가 없습니다 .
코드에 집중할 수 있도록 미리 구성되어 숨겨져 있습니다.
프로젝트를 생성하면 됩니다.
로컬 개발 머신에는 Node 14.0.0 이상 버전이 있어야 합니다 (그러나 서버에서는 필요하지 않습니다). 최신 LTS 버전을 사용하는 것이 좋습니다. nvm(macOS/Linux) 또는 nvm-windows를 사용하여 다른 프로젝트 간에 노드 버전을 전환할 수 있습니다.
새 앱을 만들려면 다음 방법 중 하나를 선택할 수 있습니다.
npx create-react-app my-app(npx는 npm 5.2+ 이상과 함께 제공되는 패키지 실행기 도구입니다. 이전 npm 버전에 대한 지침을 참조하세요.)
npm init react-app my-app npm init <initializer> 는 npm 6+에서 사용할 수 있습니다.
yarn create react-app my-app yarn create <starter-kit-package> 는 Yarn 0.25 이상에서 사용 가능합니다.
현재 폴더 안에 my-app 이라는 디렉터리가 생성됩니다.
해당 디렉터리 내에서 초기 프로젝트 구조를 생성하고 전이적 종속성을 설치합니다.
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
구성이나 복잡한 폴더 구조가 없으며 앱을 빌드하는 데 필요한 파일만 있습니다.
설치가 완료되면 프로젝트 폴더를 열 수 있습니다.
cd my-app새로 생성된 프로젝트 내에서 몇 가지 기본 제공 명령을 실행할 수 있습니다.
npm start 또는 yarn start 개발 모드에서 앱을 실행합니다.
http://localhost:3000을 열어 브라우저에서 확인하세요.
코드를 변경하면 페이지가 자동으로 다시 로드됩니다.
콘솔에 빌드 오류와 Lint 경고가 표시됩니다.
npm test 또는 yarn test 대화형 모드에서 테스트 감시자를 실행합니다.
기본적으로 마지막 커밋 이후 변경된 파일과 관련된 테스트를 실행합니다.
테스트에 대해 자세히 알아보세요.
npm run build 또는 yarn build build 폴더에 프로덕션용 앱을 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다.
해당 문서에서 Create React App 사용에 대한 자세한 지침과 많은 팁을 찾을 수 있습니다.
이에 대한 정보와 기타 정보는 사용자 가이드를 참조하세요.
하나의 종속성: 빌드 종속성이 하나만 있습니다. webpack, Babel, ESLint 및 기타 놀라운 프로젝트를 사용하지만 그 위에 응집력 있고 선별된 경험을 제공합니다.
구성 필요 없음: 아무것도 구성할 필요가 없습니다. 개발 및 프로덕션 빌드 모두에 대해 합리적으로 우수한 구성이 처리되므로 코드 작성에 집중할 수 있습니다.
잠금 없음: 언제든지 사용자 정의 설정으로 "꺼낼" 수 있습니다. 단일 명령을 실행하면 모든 구성 및 빌드 종속성이 프로젝트로 직접 이동되므로 중단한 부분부터 바로 시작할 수 있습니다.
귀하의 환경에는 최신 단일 페이지 React 앱을 구축하는 데 필요한 모든 것이 있습니다.
-webkit- 또는 기타 접두사가 필요하지 않습니다.[email protected] 이상부터 선택됩니다 .)이러한 도구가 어떻게 결합되는지에 대한 개요는 이 가이드를 확인하세요.
단점은 이러한 도구가 특정 방식으로 작동하도록 미리 구성되어 있다는 것입니다. 프로젝트에 더 많은 사용자 정의가 필요한 경우 프로젝트를 "꺼내고" 사용자 정의할 수 있지만 이 구성을 유지해야 합니다.
Create React App은 다음과 같은 경우에 매우 적합합니다.
다음은 다른 것을 시도해 볼 수 있는 몇 가지 일반적인 경우입니다.
수백 개의 전이적 빌드 도구 종속성 없이 React를 사용해 보려면 대신 단일 HTML 파일이나 온라인 샌드박스를 사용하는 것이 좋습니다.
Rails, Django 또는 Symfony와 같은 서버 측 템플릿 프레임워크와 React 코드를 통합 해야 하거나 단일 페이지 앱을 구축하지 않는 경우 더 유연한 nwb 또는 Neutrino 사용을 고려해보세요. 특히 Rails의 경우 Rails Webpacker를 사용할 수 있습니다. Symfony의 경우 Symfony의 웹팩 Encore를 사용해 보세요.
React 구성 요소를 게시 해야 하는 경우 nwb와 Neutrino의 반응 구성 요소 사전 설정을 사용하여 이를 수행할 수도 있습니다.
React 및 Node.js로 서버 렌더링을 수행하려면 Next.js 또는 Razzle을 확인하세요. Create React App은 백엔드에 구애받지 않으며 정적 HTML/JS/CSS 번들만 생성합니다.
웹사이트가 대부분 정적 인 경우(예: 포트폴리오 또는 블로그) Gatsby 또는 Next.js 사용을 고려해 보세요. Create React App과 달리 Gatsby는 빌드 시 웹사이트를 HTML로 미리 렌더링합니다. Next.js는 서버 렌더링과 사전 렌더링을 모두 지원합니다.
마지막으로, 더 많은 사용자 정의가 필요한 경우 Neutrino 및 해당 React 사전 설정을 확인하세요.
위의 모든 도구는 구성이 거의 또는 전혀 없이도 작동할 수 있습니다.
빌드를 직접 구성하려면 이 가이드를 따르세요.
비슷한 것을 찾고 있지만 React Native를 찾고 계시나요?
엑스포 CLI를 확인해보세요.
create-react-app 에 도움을 드리고 싶습니다! 우리가 찾고 있는 것과 시작하는 방법에 대한 자세한 내용은 CONTRIBUTING.md를 참조하세요.
Create React App은 커뮤니티에서 유지관리하는 프로젝트이며 모든 기여자는 자원봉사자입니다. Create React App의 향후 개발을 지원하고 싶다면 Open Collective에 기부하는 것을 고려해 보세요.
이 프로젝트는 기여하는 모든 사람들 덕분에 존재합니다.
문서를 호스팅해 주신 Netlify에 감사드립니다.
기존 관련 프로젝트의 작성자들의 아이디어와 협력에 감사드립니다.
Create React App은 MIT 라이선스를 받은 오픈 소스 소프트웨어입니다. Create React App 로고는 Creative Commons Attribution 4.0 International 라이선스에 따라 라이선스가 부여됩니다.
