yarn에서 React 애플리케이션 시작
나는 주식회사 앞부분을 중심으로 프로그램을 쓰고 있다.
최근에는 폐해회사에서도 리액트를 진행했다.js를 이용해 SPA를 구축하는 경우도 많은데, 우선, React.js 프로그램의 시작 마운트 순서를 쓰고 싶습니다.
create-react-app 등 보일러 패널도 사용할 수 있지만 필요한 요소를 이해하기 위해 필요한 것을 수동으로 준비하고 싶다.필요한 물건
yarn
초기화
먼저 개발 응용 프로그램의 디렉터리를 만들고 야니넷으로 초기화하세요.$ mkdir sample-app
$ cd sample-app
$ yarn init
많은 질문을 받겠지만 여기서 Enter는 때리는 것도 상관없어요.
필요한 매크로 패키지 추가 yarn init에 따라 sample-app 디렉터리에 package.json가 생성되었다.
다음은 필요한 포장을 추가합니다.$ yarn add react react-dom
$ yarn add -D webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-env
다음 패키지는 다음과 같습니다.나는 제이슨이 의존 관계를 증가시켰다고 생각한다.
package.json{
"name": "sample-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
코드를 쓰다
의존하는 포장을 추가할 수 있기 때문에 지금부터 코드를 쓰기 시작합니다
이번에는 다음 목록으로 구성하려고 합니다..
├── index.html
└── src
└── App.jsx
index.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample App</title>
</head>
<body>
<div id="app" />
<script src="./dist/bundle.js"/>
</body>
</html>
index.html에서React의 렌더링 목적지로서 라벨div을 쓰고 id를 첨부합니다.
또한 다음 단계에 따라 구축된 js 파일을 dist/bundle.js에 놓기 위해서는 script 탭으로 미리 지정하십시오.
App.jsximport React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World!</h1>,
document.querySelector("#app")
)
코드에 JSX가 포함되어 있으므로 확장자는 jsx입니다.
baberc 쓰기
실행할 프로그램을 썼기 때문에, 다음에 .babelrc 에babel 설정을 씁니다.이번에는 특별히 복잡한 일을 하지 않았어요.{
"presets": ['env', 'react']
}
및 presets.
webpack.config.js를 쓰다
다음은 웹 패키지 설정을 씁니다.
webpack.config.jsmodule.exports = {
entry: './src/App.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/dist/'
},
devtool: 'inline-soruce-map',
module: {
loaders: [
{
test: /\.js(x?)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
devServer: {
historyApiFallback: {
index: 'index.html'
},
port: '3000'
}
}
entry에서 신청점으로 지정된 자바스크립트 파일output에 출력 위치를 설정합니다.이번에는 dist/bundle.js로 설정했다.
또 이후 사용된webpack-dev-server의 설정은devServer에 적혀 있다.
package.json에scripts를 쓰다
package.json{
"name": "sample-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
}
당분간 디버깅용webpack-dev-server과 자바스크립트 생성용webpack -p을 적었습니다.
웹 패키지-dev-server를 시작하여 응용 프로그램에 접근
일련의 설정이 완성되었기 때문에 프로그램을 시작해 봅시다.$ yarn start
yarn run v1.3.2
$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist/
404s will fallback to index.html
Hash: 53c2dfe2b3b2fb0e3616
Version: webpack 3.10.0
Time: 991ms
Asset Size Chunks Chunk Names
bundle.js 1.05 MB 0 [emitted] [big] main
[4] ./node_modules/react/index.js 190 bytes {0} [built]
[16] multi (webpack)-dev-server/client?http://localhost:3000 ./src/App.jsx 40 bytes {0} [built]
[17] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {0} [built]
[18] ./node_modules/url/url.js 23.3 kB {0} [built]
[25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[26] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[31] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[32] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[37] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/App.jsx 415 bytes {0} [built]
[43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
+ 37 hidden modules
webpack: Compiled successfully.
위에서 설명한 대로 webpack-dev-server가 시작되고 브라우저에서 http://localhost:3000에 액세스하면 응용 프로그램이 열립니다.
그 전에 index.html, App.jsx 그리고 기타 각종 내용을 더하면 OK입니다.webpack-dev-server만 시작하면 자바스크립트의 변경 사항이 실시간으로 반영됩니다.
총결산
yarn에서 React 응용 프로그램을 시작하는 절차를 소개했다.
다음에 React에 대한 루트를 쓰고 싶습니다: P
Reference
이 문제에 관하여(yarn에서 React 애플리케이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Anzai_Akihiro/items/daaa6659a4df2e6c32f5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ mkdir sample-app
$ cd sample-app
$ yarn init
yarn init에 따라 sample-app 디렉터리에 package.json가 생성되었다.다음은 필요한 포장을 추가합니다.
$ yarn add react react-dom
$ yarn add -D webpack webpack-dev-server babel-loader babel-core babel-preset-react babel-preset-env
package.json
{
"name": "sample-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
코드를 쓰다
의존하는 포장을 추가할 수 있기 때문에 지금부터 코드를 쓰기 시작합니다
이번에는 다음 목록으로 구성하려고 합니다..
├── index.html
└── src
└── App.jsx
index.html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample App</title>
</head>
<body>
<div id="app" />
<script src="./dist/bundle.js"/>
</body>
</html>
index.html에서React의 렌더링 목적지로서 라벨div을 쓰고 id를 첨부합니다.
또한 다음 단계에 따라 구축된 js 파일을 dist/bundle.js에 놓기 위해서는 script 탭으로 미리 지정하십시오.
App.jsximport React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World!</h1>,
document.querySelector("#app")
)
코드에 JSX가 포함되어 있으므로 확장자는 jsx입니다.
baberc 쓰기
실행할 프로그램을 썼기 때문에, 다음에 .babelrc 에babel 설정을 씁니다.이번에는 특별히 복잡한 일을 하지 않았어요.{
"presets": ['env', 'react']
}
및 presets.
webpack.config.js를 쓰다
다음은 웹 패키지 설정을 씁니다.
webpack.config.jsmodule.exports = {
entry: './src/App.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/dist/'
},
devtool: 'inline-soruce-map',
module: {
loaders: [
{
test: /\.js(x?)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
devServer: {
historyApiFallback: {
index: 'index.html'
},
port: '3000'
}
}
entry에서 신청점으로 지정된 자바스크립트 파일output에 출력 위치를 설정합니다.이번에는 dist/bundle.js로 설정했다.
또 이후 사용된webpack-dev-server의 설정은devServer에 적혀 있다.
package.json에scripts를 쓰다
package.json{
"name": "sample-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
}
당분간 디버깅용webpack-dev-server과 자바스크립트 생성용webpack -p을 적었습니다.
웹 패키지-dev-server를 시작하여 응용 프로그램에 접근
일련의 설정이 완성되었기 때문에 프로그램을 시작해 봅시다.$ yarn start
yarn run v1.3.2
$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist/
404s will fallback to index.html
Hash: 53c2dfe2b3b2fb0e3616
Version: webpack 3.10.0
Time: 991ms
Asset Size Chunks Chunk Names
bundle.js 1.05 MB 0 [emitted] [big] main
[4] ./node_modules/react/index.js 190 bytes {0} [built]
[16] multi (webpack)-dev-server/client?http://localhost:3000 ./src/App.jsx 40 bytes {0} [built]
[17] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {0} [built]
[18] ./node_modules/url/url.js 23.3 kB {0} [built]
[25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[26] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[31] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[32] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[37] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/App.jsx 415 bytes {0} [built]
[43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
+ 37 hidden modules
webpack: Compiled successfully.
위에서 설명한 대로 webpack-dev-server가 시작되고 브라우저에서 http://localhost:3000에 액세스하면 응용 프로그램이 열립니다.
그 전에 index.html, App.jsx 그리고 기타 각종 내용을 더하면 OK입니다.webpack-dev-server만 시작하면 자바스크립트의 변경 사항이 실시간으로 반영됩니다.
총결산
yarn에서 React 응용 프로그램을 시작하는 절차를 소개했다.
다음에 React에 대한 루트를 쓰고 싶습니다: P
Reference
이 문제에 관하여(yarn에서 React 애플리케이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Anzai_Akihiro/items/daaa6659a4df2e6c32f5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
.
├── index.html
└── src
└── App.jsx
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample App</title>
</head>
<body>
<div id="app" />
<script src="./dist/bundle.js"/>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World!</h1>,
document.querySelector("#app")
)
실행할 프로그램을 썼기 때문에, 다음에
.babelrc 에babel 설정을 씁니다.이번에는 특별히 복잡한 일을 하지 않았어요.{
"presets": ['env', 'react']
}
presets.webpack.config.js를 쓰다
다음은 웹 패키지 설정을 씁니다.
webpack.config.jsmodule.exports = {
entry: './src/App.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/dist/'
},
devtool: 'inline-soruce-map',
module: {
loaders: [
{
test: /\.js(x?)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
devServer: {
historyApiFallback: {
index: 'index.html'
},
port: '3000'
}
}
entry에서 신청점으로 지정된 자바스크립트 파일output에 출력 위치를 설정합니다.이번에는 dist/bundle.js로 설정했다.
또 이후 사용된webpack-dev-server의 설정은devServer에 적혀 있다.
package.json에scripts를 쓰다
package.json{
"name": "sample-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
}
당분간 디버깅용webpack-dev-server과 자바스크립트 생성용webpack -p을 적었습니다.
웹 패키지-dev-server를 시작하여 응용 프로그램에 접근
일련의 설정이 완성되었기 때문에 프로그램을 시작해 봅시다.$ yarn start
yarn run v1.3.2
$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist/
404s will fallback to index.html
Hash: 53c2dfe2b3b2fb0e3616
Version: webpack 3.10.0
Time: 991ms
Asset Size Chunks Chunk Names
bundle.js 1.05 MB 0 [emitted] [big] main
[4] ./node_modules/react/index.js 190 bytes {0} [built]
[16] multi (webpack)-dev-server/client?http://localhost:3000 ./src/App.jsx 40 bytes {0} [built]
[17] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {0} [built]
[18] ./node_modules/url/url.js 23.3 kB {0} [built]
[25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[26] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[31] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[32] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[37] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/App.jsx 415 bytes {0} [built]
[43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
+ 37 hidden modules
webpack: Compiled successfully.
위에서 설명한 대로 webpack-dev-server가 시작되고 브라우저에서 http://localhost:3000에 액세스하면 응용 프로그램이 열립니다.
그 전에 index.html, App.jsx 그리고 기타 각종 내용을 더하면 OK입니다.webpack-dev-server만 시작하면 자바스크립트의 변경 사항이 실시간으로 반영됩니다.
총결산
yarn에서 React 응용 프로그램을 시작하는 절차를 소개했다.
다음에 React에 대한 루트를 쓰고 싶습니다: P
Reference
이 문제에 관하여(yarn에서 React 애플리케이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Anzai_Akihiro/items/daaa6659a4df2e6c32f5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
module.exports = {
entry: './src/App.jsx',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
publicPath: '/dist/'
},
devtool: 'inline-soruce-map',
module: {
loaders: [
{
test: /\.js(x?)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
devServer: {
historyApiFallback: {
index: 'index.html'
},
port: '3000'
}
}
package.json
{
"name": "sample-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
"scripts": {
"start": "webpack-dev-server",
"build": "webpack -p"
}
}
webpack-dev-server과 자바스크립트 생성용webpack -p을 적었습니다.웹 패키지-dev-server를 시작하여 응용 프로그램에 접근
일련의 설정이 완성되었기 때문에 프로그램을 시작해 봅시다.$ yarn start
yarn run v1.3.2
$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist/
404s will fallback to index.html
Hash: 53c2dfe2b3b2fb0e3616
Version: webpack 3.10.0
Time: 991ms
Asset Size Chunks Chunk Names
bundle.js 1.05 MB 0 [emitted] [big] main
[4] ./node_modules/react/index.js 190 bytes {0} [built]
[16] multi (webpack)-dev-server/client?http://localhost:3000 ./src/App.jsx 40 bytes {0} [built]
[17] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {0} [built]
[18] ./node_modules/url/url.js 23.3 kB {0} [built]
[25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[26] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[31] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[32] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[37] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/App.jsx 415 bytes {0} [built]
[43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
+ 37 hidden modules
webpack: Compiled successfully.
위에서 설명한 대로 webpack-dev-server가 시작되고 브라우저에서 http://localhost:3000에 액세스하면 응용 프로그램이 열립니다.
그 전에 index.html, App.jsx 그리고 기타 각종 내용을 더하면 OK입니다.webpack-dev-server만 시작하면 자바스크립트의 변경 사항이 실시간으로 반영됩니다.
총결산
yarn에서 React 응용 프로그램을 시작하는 절차를 소개했다.
다음에 React에 대한 루트를 쓰고 싶습니다: P
Reference
이 문제에 관하여(yarn에서 React 애플리케이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Anzai_Akihiro/items/daaa6659a4df2e6c32f5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ yarn start
yarn run v1.3.2
$ webpack-dev-server
Project is running at http://localhost:3000/
webpack output is served from /dist/
404s will fallback to index.html
Hash: 53c2dfe2b3b2fb0e3616
Version: webpack 3.10.0
Time: 991ms
Asset Size Chunks Chunk Names
bundle.js 1.05 MB 0 [emitted] [big] main
[4] ./node_modules/react/index.js 190 bytes {0} [built]
[16] multi (webpack)-dev-server/client?http://localhost:3000 ./src/App.jsx 40 bytes {0} [built]
[17] (webpack)-dev-server/client?http://localhost:3000 7.95 kB {0} [built]
[18] ./node_modules/url/url.js 23.3 kB {0} [built]
[25] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[26] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[27] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[28] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
[30] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
[31] ./node_modules/ansi-html/index.js 4.26 kB {0} [built]
[32] ./node_modules/html-entities/index.js 231 bytes {0} [built]
[35] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[37] (webpack)/hot/emitter.js 77 bytes {0} [built]
[39] ./src/App.jsx 415 bytes {0} [built]
[43] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
+ 37 hidden modules
webpack: Compiled successfully.
yarn에서 React 응용 프로그램을 시작하는 절차를 소개했다.
다음에 React에 대한 루트를 쓰고 싶습니다: P
Reference
이 문제에 관하여(yarn에서 React 애플리케이션 시작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Anzai_Akihiro/items/daaa6659a4df2e6c32f5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
