ReactJS-환경 설정
이 장에서는 성공적인 React 개발을위한 환경을 설정하는 방법을 보여줍니다. 많은 단계가 관련되어 있지만 나중에 개발 프로세스의 속도를 높이는 데 도움이됩니다. 우리는 필요합니다NodeJS이므로 설치하지 않은 경우 다음 표의 링크를 확인하십시오.
| Sr. 아니. | 소프트웨어 및 설명 |
|---|---|
| 1 | NodeJS and NPM NodeJS는 ReactJS 개발에 필요한 플랫폼입니다. 우리의 체크 아웃 NodeJS 환경 설정을 . |
NodeJS를 성공적으로 설치 한 후 npm을 사용하여 React를 설치할 수 있습니다. 두 가지 방법으로 ReactJS를 설치할 수 있습니다.
webpack 및 babel 사용.
사용 create-react-app 명령.
webpack 및 babel을 사용하여 ReactJS 설치
Webpack모듈 번 들러입니다 (독립 모듈을 관리하고로드합니다). 종속 모듈을 가져 와서 단일 (파일) 번들로 컴파일합니다. 명령 줄을 사용하여 앱을 개발하는 동안 또는 webpack.config 파일을 사용하여 구성하여이 번들을 사용할 수 있습니다.
Babel은 자바 스크립트 컴파일러이자 트랜스 파일러입니다. 하나의 소스 코드를 다른 소스 코드로 변환하는 데 사용됩니다. 이것을 사용하면 코드에서 새로운 ES6 기능을 사용할 수 있습니다. babel은 모든 브라우저에서 실행할 수있는 일반 오래된 ES5로 변환합니다.
1 단계-루트 폴더 만들기
이름으로 폴더 만들기 reactApp 데스크탑에서 mkdir 명령을 사용하여 필요한 모든 파일을 설치하십시오.
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp모듈을 생성하려면 다음을 생성해야합니다. package.json파일. 따라서 폴더를 생성 한 후에는package.json파일. 이렇게하려면 다음을 실행해야합니다.npm init 명령 프롬프트에서 명령.
C:\Users\username\Desktop\reactApp>npm init이 명령은 패키지 이름, 설명, 작성자 등과 같은 모듈에 대한 정보를 묻습니다. -y 옵션을 사용하여 이러한 항목을 건너 뛸 수 있습니다.
C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}2 단계-React 설치 및 DOM 반응
우리의 주요 임무는 ReactJS를 설치하고, 설치하고, 다음을 사용하여 dom 패키지를 설치하는 것입니다. install react 과 react-dom각각 npm의 명령. 우리가 설치하는 패키지를 추가 할 수 있습니다.package.json 파일을 사용하여 --save 선택권.
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save또는 다음과 같이 단일 명령으로 모두 설치할 수 있습니다.
C:\Users\username\Desktop\reactApp>npm install react react-dom --save3 단계-웹팩 설치
웹팩을 사용하여 번 들러 설치 웹팩, webpack-dev-server 및 webpack-cli를 생성하고 있기 때문에.
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save또는 다음과 같이 단일 명령으로 모두 설치할 수 있습니다.
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save4 단계-바벨 설치
babel 및 플러그인 설치 babel-core, babel-loader, babel-preset-env, babel-preset-react 및 html-webpack-plugin
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev또는 다음과 같이 단일 명령으로 모두 설치할 수 있습니다.
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-dev5 단계-파일 생성
설치를 완료하려면 index.html, App.js, main.js, webpack.config.js 및.babelrc. 이러한 파일을 수동으로 만들거나command prompt.
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc6 단계-컴파일러, 서버 및 로더 설정
열다 webpack-config.js파일을 열고 다음 코드를 추가하십시오. webpack 진입 점을 main.js로 설정하고 있습니다. 출력 경로는 번들 앱이 제공 될 위치입니다. 또한 개발 서버를8001포트. 원하는 포트를 선택할 수 있습니다.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}열기 package.json 및 삭제 "test" "echo \"Error: no test specified\" && exit 1" 내부 "scripts"목적. 이 자습서에서는 테스트를 수행하지 않을 것이므로이 줄을 삭제합니다. 추가하자start 과 build 대신 명령.
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"7 단계-index.html
이것은 일반적인 HTML입니다. 우리는 설정하고 있습니다div id = "app" 앱의 루트 요소로 추가하고 index_bundle.js 번들로 제공되는 앱 파일입니다.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>8 단계-App.jsx 및 main.js
이것이 첫 번째 React 구성 요소입니다. 다음 장에서 React 컴포넌트에 대해 자세히 설명합니다. 이 구성 요소는Hello World.
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;이 구성 요소를 가져 와서 루트로 렌더링해야합니다. App 요소이므로 브라우저에서 볼 수 있습니다.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));Note − 무언가를 사용하고 싶을 때마다 import먼저. 구성 요소를 앱의 다른 부분에서 사용할 수 있도록하려면 다음을 수행해야합니다.export 만든 후 사용하려는 파일로 가져옵니다.
이름이있는 파일 만들기 .babelrc 다음 내용을 복사하십시오.
{
"presets":["env", "react"]
}9 단계-서버 실행
설정이 완료되었으며 다음 명령을 실행하여 서버를 시작할 수 있습니다.
C:\Users\username\Desktop\reactApp>npm start브라우저에서 열어야하는 포트가 표시됩니다. 우리의 경우에는http://localhost:8001/. 열면 다음 출력이 표시됩니다.
10 단계-번들 생성
마지막으로 번들을 생성하려면 명령 프롬프트에서 다음과 같이 빌드 명령을 실행해야합니다.
C:\Users\Tutorialspoint\Desktop\reactApp>npm run build그러면 아래와 같이 현재 폴더에 번들이 생성됩니다.
create-react-app 명령 사용
webpack 및 babel을 사용하는 대신 다음을 설치하여 ReactJS를 더 간단하게 설치할 수 있습니다. create-react-app.
1 단계-create-react-app 설치
바탕 화면을 탐색하고 아래와 같이 명령 프롬프트를 사용하여 Create React App을 설치하십시오.
C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app그러면 바탕 화면에 my-app이라는 폴더가 생성되고 그 안에 필요한 모든 파일이 설치됩니다.
2 단계-모든 소스 파일 삭제
생성 된 my-app 폴더에서 src 폴더를 탐색하고 아래와 같이 모든 파일을 제거합니다.
C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y3 단계-파일 추가
이름이있는 파일 추가 index.css 과 index.js src 폴더에-
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.jsindex.js 파일에 다음 코드를 추가하십시오.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';4 단계-프로젝트 실행
마지막으로 시작 명령을 사용하여 프로젝트를 실행합니다.
npm start