Windows+VScode에서 React 개발 환경 구축
목표
.어쨌든 한번 만져보고 싶어요
준비물
1.Node.설치 js
4. 명령 프롬프트에서 다음 명령을 실행하여 경로가 통과되었는지 확인합니다.
node -v
npm -v
2. create-react-app 설치
Crtl+@ 에 표시되는 터미널 화면에서 다음 명령을 실행합니다.
npm install -g create-react-app
터미널 화면에서 다음 명령을 실행하여 프로젝트를 만듭니다
create-react-app <任意のプロジェクト名>
터미널 화면에서 다음 명령 실행
cd <先ほどのプロジェクト名>
npm start
3. "sample/src/Ap.js" 터치
일부러 틀리면?
아래와 같이 div에 대한 닫힌 탭의 "/"을 삭제해 보십시오.
sample/src/App.jsimport 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에 의해 구조되는 일
Reference
이 문제에 관하여(Windows+VScode에서 React 개발 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/willow-c/items/ad5c1a15d8b32d75d927
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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;
facebook/create-react-app
명령 한 번으로 React 개발 환경을 구축할 수 있는 페이스북 도구'create-react-app'
React 개발 환경 설정에서 좌절되고create-react-app에 의해 구조되는 일
Reference
이 문제에 관하여(Windows+VScode에서 React 개발 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/willow-c/items/ad5c1a15d8b32d75d927텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)