리액트 설치 및 테스트 요약

리액트 설치 및 테스트 요약

 

리액트 설치 및 테스트

1. nodejs 최신버전(최신버전이 중요) 설치  <-- npm 툴이 제공되고, create-react-app 패키지 설치에 필요
     (버전 확인: node -v , 실행: node )

2. VisualStudio code(vsc) 에디터 설치

3. react_class 프로젝트 폴더 생성 (예제: react_class)

3. vsc에서 폴더 오픈 

4. vsc에서 터미널 열고 (상단 메뉴에서 새 터미널 선택) 
     npx create-react-app '프로젝트명' 실행
    예:  npx create-react-app blog <엔터>

5. 그거 다 되면 방금 생성된 프로젝트명 폴더를 에디터로 오픈해서

6. blog/src/App.js에서 코드 작성 ...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>안녕하세요. 리액트!!!</p>                                    <---- 여기에 추가함!!!
        <p>          
          Edit <code>src/App.js</code> and save to reload.
        </p>

7. 미리보기 띄우려면 터미널 열어서 다음처럼 명령하면 자동으로 브라우저가 실행되어 동작함

   npm start 

  웹 접속 주소는 http://localhost:3000


동작: 

index.js가 App.js 내용을 public/index.html에 포함시켜서 웹에서 나타나게 됨

폴더 구조:  
BLOG - node_modules  : 라이브러리들이 설치되는 폴더
        - public : 스태틱 파일 보관 폴더 (이미지, 아이콘, robots.txt, ...) 
        - src : 소스 코드 작업 폴더
        - package.json : 설치한 라이브러리 목록 파일


[참고] 에러가 난다면 여기 방문해서 확인
 https://codingapple.com/unit/react1-install-create-react-app-npx/?id=2305