React 사용 시 시작 단계

다른 기사에 비하면 이걸 포함해서 제가 지금까지 쓴 기사는 난이도가 높아서 Qiita에 어울릴 것 같아요.
이 기사와 과거 기사 두 편에 대해 Qita도 같은 내용을 기고했으니 반응을 좀 볼게요.
할 때 항상 "아, 뭐였지?"이러니까 나중에 다시 보거나 실수로 잊어버릴 때를 위해서 정리를 해보도록 하겠습니다.

TL;DR

React를 사용하여 제품을 제작할 때 서버 시작 시 지침에 대한 간략한 요약

사전 요구 사항(환경)

・Windows 10
・npm

결론

다음 명령 열기

cd Reactプロダクト置いてるディレクトリ
npm start

이 동작을 실행하면 http://localhost:3000/ (환경이 다르다)에서 만든 페이지를 볼 수 있습니다

상세한 과정

Windows PowerShell 시작

명령을 실행해야 하므로 Windows 환경에서 Windows PowerShell을 시작해야 합니다.
(Mac의 경우 IDE에서 명령을 표시하거나 사용하는 IDE에 따라 IDE에서 명령을 표시할 수 있음)
따라서 검색 표시줄이나 시작 메뉴에서 Windows PowerShell을 시작합니다.

대상 디렉토리로 이동

시작 명령은 create-react-app プロダクト名에서 준비하고 제작된 React 제품의 디렉토리에서 시작해야 합니다.
따라서 먼저 cd 명령으로 대상 디렉터리 package.json 로 이동합니다.

cd Reactプロダクト置いてるディレクトリ

환경에 따라 다르지만 PowerShell이 켜진 드라이브 (C 드라이브) 와 다른 드라이브 (D 드라이브) 에 디렉터리를 놓으려면 먼저 드라이브를 구동해야 한다.이런 경우, 먼저 아래의 예에서 드라이브 이동 명령을 써서 드라이브를 이동하는 과정이 필요하다

D:

시험해 봤는데 크로스 드라이브라도 cd 없이 정상적으로 비행할 수 있어요.

명령 집행 제한 부분 해제(상황에 따라)

보안을 위해 Set-ExecutionPolicy 명령은 스크립트 실행 제한을 받을 수 있습니다("~cannot be loaded because running scripts")
is disabled on this system.」"이 시스템에서 스크립트의 실행이 잘못되어 읽을 수 없습니다 ~"가 나타나면 선택하십시오)
이 경우 다음 명령에 따라 스크립트의 제한을 실행하고 로컬 파일을 'RemoteSigned' 로 설정하여 일부 제한을 해제하면 실행할 수 있습니다

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

하고 나면

Set-ExecutionPolicy -ExecutionPolicy Restricted -Scope Process

제자리에 놓는 것이 안전할 수 있다
(상태는 Get-ExecutionPolicy 명령을 통해 확인할 수 있습니다.이번 주제와 맞지 않기 때문에 자세히 조사하고 싶으면 구글로)

서버 시작

빈번히 나타나기 때문에 아래의 지령으로 시작하니 특별히 말할 필요가 없다고 생각한다

npm start

yarn의 사용 상황이 또 바뀌었다yarn run 등)

페이지 확인

이렇게 하면http://localhost:3000/(환경에 따라 다를 수 있음) 대상React 제품의 페이지는 표준 브라우저에 설정된 브라우저에서 자동으로 열립니다.
그다음에 확인을 하면서 리액션을 해주세요.
원래 HTML이면 특별한 사전 준비 없이도 HTML 파일을 브라우저에 끌어다 놓으면 볼 수 있는데 처음에는 좀 귀찮았어요(가끔 지금도 그래요)
아마 자동화 수단이 있을 거예요.