반응 시작하기
프로덕션에서 React를 사용하려면 Node.js 에 포함된 npm이 필요합니다 .
React가 무엇인지에 대한 개요를 보려면 HTML로 직접 React 코드를 작성할 수 있습니다.
그러나 프로덕션에서 React를 사용하려면 npm과 Node.js 가 설치되어 있어야 합니다.
HTML에서 직접 반응
React 학습을 시작하는 가장 빠른 방법은 HTML 파일에 React를 직접 작성하는 것입니다.
W3학교 공간
HTML 파일 생성을 시작하는 가장 쉬운 방법은 W3Schools Spaces입니다!
작업을 만들고 편집하고 다른 사람들과 공유할 수 있는 완벽한 장소입니다!
세 개의 스크립트를 포함하여 시작합니다. 처음 두 개는 JavaScript에서 React 코드를 작성하게 하고 세 번째 Babel은 JSX 구문과 이전 브라우저에서 ES6을 작성할 수 있게 해줍니다.
React JSX 장 에서 JSX에 대해 더 배울 것 입니다.
예시
HTML 파일에 3개의 CDN을 포함합니다.
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
React를 사용하는 이 방법은 테스트 목적으로 괜찮을 수 있지만 프로덕션을 위해서는 React 환경 을 설정해야 합니다 .
반응 환경 설정
npx와 Node.js가 설치되어 있다면 create-react-app.
이전에 create-react-app전역으로 설치한 경우 npx가 항상 최신 버전의 create-react-app.
제거하려면 다음 명령을 실행하십시오 npm uninstall -g create-react-app.
이 명령을 실행하여 다음과 같은 React 애플리케이션을 생성합니다
my-react-app.
npx create-react-app my-react-app
React 애플리케이션을 실행 하는 create-react-app데 필요한 모든 것을 설정합니다.
React 애플리케이션 실행
이제 첫 번째 실제 React 애플리케이션 을 실행할 준비가 되었습니다 !
my-react-app다음 명령을 실행하여 디렉터리 로 이동합니다 .
cd my-react-app
다음 명령을 실행하여 React 애플리케이션을 실행합니다
my-react-app.
npm start
새로 만든 React 앱과 함께 새 브라우저 창이 나타납니다! 그렇지 않은 경우 브라우저를 열고
localhost:3000주소 표시줄에 입력하십시오.
결과:
React 애플리케이션 수정
여기까지는 좋은데 내용을 어떻게 바꾸나요?
my-react-app디렉토리를 살펴보면
src폴더 를 찾을 수 있습니다. src폴더
안에
라는 파일이 있습니다. 파일 App.js을 열면 다음과 같습니다.
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;HTML 내용을 변경하고 파일을 저장해 보십시오.
파일을 저장한 직후 변경 사항이 표시되므로 브라우저를 다시 로드할 필요가 없습니다.
예시
<div className="App">내부의 모든 내용 을
<h1>요소 로 바꿉니다 .
저장을 클릭하면 브라우저에서 변경 사항을 확인하십시오.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;필요하지 않은 가져오기(logo.svg 및 App.css)를 제거했습니다.
결과:
무엇 향후 계획?
이제 컴퓨터에 React 환경이 있고 React에 대해 더 배울 준비가 되었습니다.
이 튜토리얼의 나머지 부분에서는 "Show React" 도구를 사용하여 React의 다양한 측면과 브라우저에 표시되는 방식을 설명합니다.
컴퓨터에서 동일한 단계를 수행하려면 먼저 src하나의 파일만 포함하도록 폴더를 제거합니다. index.js. index.js
또한 아래의 "Show React" 도구의 예와 같이 보이도록 파일 내부의 불필요한 코드 줄을 제거해야 합니다.
예시
결과를 보려면 "예제 실행" 버튼을 클릭하십시오.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));