[React.js 01] React 비계

React는 배워도 정말 귀찮아요. 비계를 드릴게요. 당신도eject 필요에 따라 수정해야 해요. 한 무더기의 배치는 말할 것도 없고...물론 이것은 나의 불평일 뿐이니 순순히 필기를 해라.

기본 사용

나는 게으름을 피워서 바로 비계에 올랐다. 여기서 나는 공식create-react-app이라는 비계를 선택했다.create-react-app는 사실 하나의 명령으로 설치가 매우 간단하고 단말기에서 명령을 입력한다.

npm install -g create-react-app

설치가 완료되면 프로젝트를 만들고 싶은 디렉터리로 바로 cd 갈 수 있습니다. 예를 들어 myApp 프로젝트를 만들고 싶으면 명령을 입력하십시오.

create-react-app myApp

프로젝트를 실행하려면 cd 프로젝트 폴더 루트 디렉토리에 명령을 입력하여 전체 프로젝트 환경을 만들 수 있습니다.

npm start

프로젝트를 시작하고 브라우저가 자동으로 페이지를 열 수 있습니다.그리고 비계를 사용하는 장점은 우리가 다시 한 번 포장하여 실행할 필요가 없고 코드가 수정되면 브라우저의 페이지가 자동으로 새로 고쳐진다는 것이다.

디렉토리에 있는 파일 구조

프로젝트 폴더 루트ls에 표시되는 항목:
파일 구조
1. 브라우저가 자동으로 여는 HTML 페이지, 기본값 /public/index.html 안쪽.
2. JSX의 문법으로 인해 실질적으로 페이지를 렌더링하는 곳은 기본적으로 /src/index.js에서 수정 페이지는 여기서 수정하면 된다. 물론 이것은 공부할 때 이렇게 하는 것일 뿐이고 실제 프로젝트에서 전체 파일 구조를 고려해야 한다.
3. 프로젝트 전체 설정 정보는 /package.json 중.
4. 웹팩이나 다른 설정을 직접 구성하려면 명령을 실행합니다.npm run eject 비계가 숨겨진 프로필을 팝업합니다.(프로세스 중 입력 선택하기y/N각각 확인하기y 또는 취소N 조작, 이 조작은 단방향이기 때문에 거역할 수 없다)

Eject 이후 디렉토리의 파일 구조

두 개의 폴더가 많아졌습니다. config & scripts 1, config 폴더 아래에는 주로 webpack의 상세한 설정 파일로 수정할 필요가 없습니다.2. scripts 폴더 아래의 몇 개의 js 파일은 사실 우리npm run 명령을 실제 실행하는 설정이기 때문에 일반적으로 변경할 필요가 없다.
이제 다시 돌아와서 package.json 파일을 봅시다. 물건이 많이 의존하고 예전에는 react-scripts 내부에 봉인되어 있었지만, 지금은 스스로 설정할 수 있습니다.
비계에 관해서는 우선 이런 것들을 말하자. 이 문장은 단지 나의 이 풋내기의 필기일 뿐이다. 많은 부분은 자세히 말하지 않았고 분명히 말하지 못한 부분은 질문을 남겨도 된다. 동생이 가능한 한 도와준다.혹은 글에서 틀린 부분이 있으면 댓글로 지도를 남겨도 되고, 동생은 겸허하게 받아들인다~