리액트 설치 및 환경 설정
- Published on
- 리액트를 설치하고 환경을 설정하는 방법을 설명한 문서입니다.
리액트는 처음부터 점진적으로 채택할 수 있도록 설계되었습니다. 필요에 따라 리액트를 많이 또는 적게 사용할 수 있습니다. 리액트의 맛보기를 원하거나 HTML 페이지에 상호작용성을 추가하거나 복잡한 리액트 기반 앱을 시작하려는 경우, 이 섹션을 통해 시작할 수 있습니다.
온라인에서 리액트 개발하기
리액트를 사용하려면 별도의 설치가 필요하지 않습니다. 이 샌드박스를 편집해보세요!
직접 편집하거나 오른쪽 상단의 "Fork" 버튼을 눌러 새 탭에서 열 수 있습니다.
리액트 문서의 대부분의 페이지에는 이와 같은 샌드박스가 포함되어 있습니다. 리액트 문서 외에도 CodeSandbox, StackBlitz, CodePen과 같은 많은 온라인 샌드박스에서 리액트를 지원합니다.
로컬에서 리액트 시도하기
리액트를 컴퓨터에서 로컬로 시도하려면 이 HTML 페이지를 다운로드하세요. 편집기와 브라우저에서 열어보세요!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script
src="https://unpkg.com/react@18/umd/react.development.js">
</script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js">
</script>
<!-- Don't use this in production: -->
<script
src="https://unpkg.com/@babel/standalone/babel.min.js">
</script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MyApp() {
return <h1>Hello, world!</h1>;
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);
</script>
<!--
Note:
this page is a great way to try React
but it's not suitable for production.
It slowly compiles JSX with Babel in the browser
and uses a large development build of React.
Read this page for starting a new React project with JSX:
https://react.dev/learn/start-a-new-react-project
Read this page for adding React with JSX to an existing project:
https://react.dev/learn/add-react-to-an-existing-project
-->
</body>
</html>
새로운 리액트 프로젝트 시작하기
리액트로 앱이나 웹사이트를 완전히 구축하려면 새로운 리액트 프로젝트를 시작하세요.
기존 프로젝트에 리액트 추가하기
기존 앱이나 웹사이트에서 리액트를 사용해보려면 기존 프로젝트에 리액트를 추가하세요.