React ~ 개발 환경 HelloWorld 시도
5749 단어 React
개발 준비
React 개발을 위해서는 Node, Yarn, Webpack, Babel 등 도구를 설치하고 프로젝트로 설정해야 합니다.
Node.js 설정 ：
Webpack과 Babel의 기본은 Node입니다.제이스니까 노드.js, Node를 설치해야 합니다.js의 공식 사이트에서 최신을 설치하다.
Yarn 설치
Node.js 패키지 관리자
VSCode 설정
icrosoft에서 개발한 소스 오픈 텍스트 편집기, React Debug도 가능합니다.
Debug For Chrome 설치
추가 구성에서 설정Chrome하면 생성launch.json됩니다.
launch.json 편집 (url port를 3000으로 변경){
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
create-react-app 설치
create-react-app 도구를 사용하면 React 구현에 필요한 모듈을 쉽게 설치할 수 있습니다. npm install -g create-react-app
HelloWorld 프로젝트 생성
영어를 할 줄 아는 사람은 아래 링크를 참고하세요.
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
create-react-app 도구hello_world를 통해서만 프로젝트nom start를 생성하고 Chrome에 표시localhost:3000합니다.create-react-app hello_world
cd hello_world
npm start
npm start 이후 페이지 표시
자동으로 생성된 소스
node_모듈: 설치에 필요한 모듈입니다.
src 폴더에 원본 코드를 설치하고 실제 개발은 그 안에 진행됩니다.
이번부터 필요한 원본 이외의 원본을 삭제합니다
수정 전$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
수정 후$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.js
└── index.js
index.html 의 root Id의 Div.
index.html<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
....
만약 ReactDOM이 document.getElementById('root')의 Element에 App 구성 요소를 주입한 인상에서 기억하면 됩니다.
index.jsimport React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
APP Retun에는 Html, JSX에는 Html 스타일의 JavaScript 확장 구문이 적혀 있습니다.
App.jsimport React from 'react';
function App() {
return (
<div>Hello World!</div>
);
}
export default App;
다음부터는 간단한 주제를 고려하여 실제 실시하면서 React를 배웁니다.
Reference
이 문제에 관하여(React ~ 개발 환경 HelloWorld 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/HavenSpring/items/2a79a42398c4a8890b9b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}
npm install -g create-react-app
영어를 할 줄 아는 사람은 아래 링크를 참고하세요.
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
create-react-app 도구
hello_world를 통해서만 프로젝트nom start를 생성하고 Chrome에 표시localhost:3000합니다.create-react-app hello_world
cd hello_world
npm start
npm start 이후 페이지 표시 자동으로 생성된 소스
node_모듈: 설치에 필요한 모듈입니다.
src 폴더에 원본 코드를 설치하고 실제 개발은 그 안에 진행됩니다.
이번부터 필요한 원본 이외의 원본을 삭제합니다
수정 전
$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
$tree -I 'node_modules'
.
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.js
└── index.js
index.html 의 root Id의 Div.index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
....
document.getElementById('root')의 Element에 App 구성 요소를 주입한 인상에서 기억하면 됩니다.index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
function App() {
return (
<div>Hello World!</div>
);
}
export default App;
다음부터는 간단한 주제를 고려하여 실제 실시하면서 React를 배웁니다.
Reference
이 문제에 관하여(React ~ 개발 환경 HelloWorld 시도), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/HavenSpring/items/2a79a42398c4a8890b9b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
