Windows+VScode에서 React 개발 환경 구축

지금 느낌은 부인할 수 없지만 만지고 싶어서 먼저 개발 환경에 대한 자신만의 절차서를 만들었어요.

목표


.어쨌든 한번 만져보고 싶어요
  • WindowsPC 개발
  • VScode는 편집기로 사용됩니다(VScode만 있는 부분은 거의 없지만)
  • 준비물

  • WindowsPC
  • Node.js 설치 프로그램
  • 1.Node.설치 js

  • 설치 프로그램을 미리 다운로드합니다(LTS 버전의 최신 버전은 문제가 없을 것입니다)
  • 다운로드된 설치 프로그램을 실행합니다
  • 다음 화면이 나타나기 때문에 설치를 완료합니다(기본 설정에 따라 Next 연결은 문제없을 것입니다)

  • 4. 명령 프롬프트에서 다음 명령을 실행하여 경로가 통과되었는지 확인합니다.
    node -v
    npm -v
    

    2. create-react-app 설치

  • 작업용 임의의 폴더를 만들고 ⇒ 를 마우스 오른쪽 버튼으로 클릭하여 "Open With Code"를 선택합니다

  • Crtl+@ 에 표시되는 터미널 화면에서 다음 명령을 실행합니다.
    npm install -g create-react-app
    

  • 터미널 화면에서 다음 명령을 실행하여 프로젝트를 만듭니다
    create-react-app <任意のプロジェクト名>
    
  • 「Happy hacking!」성공을 나타내다

  • 터미널 화면에서 다음 명령 실행
    cd <先ほどのプロジェクト名>
    npm start
    
  • 브라우저가 시작되면 React App 페이지가 표시됩니다
  • 3. "sample/src/Ap.js" 터치


    일부러 틀리면?
    아래와 같이 div에 대한 닫힌 탭의 "/"을 삭제해 보십시오.
    sample/src/App.js
    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
          <div>
        );
      }
    }
    
    export default App;
    
    
    VScode에 오류 세부 정보 표시

    컴파일이 실패했다는 뜻이 브라우저에 표시됩니다.

    이해하기 쉽다!

    참고 자료


    facebook/create-react-app
    명령 한 번으로 React 개발 환경을 구축할 수 있는 페이스북 도구'create-react-app'
    React 개발 환경 설정에서 좌절되고create-react-app에 의해 구조되는 일

    좋은 웹페이지 즐겨찾기