ReactJS 환경 설정

이 장에서는 React 개발을 성공적으로 설정하는 방법을 안내해 드리겠습니다. 여러 단계가涉及到지만, 이는 향후 개발 과정을 가속화하는 데 도움이 될 것입니다. NodeJS가 필요하므로 설치되지 않았다면, 다음 표의 링크를 확인하십시오.

NodeJS를 성공적으로 설치한 후, npm을 사용하여 React를 설치할 수 있습니다.-on. ReactJS를 설치할 수 있는 두 가지 방법이 있습니다.

• 와 babel을 사용하여

• 와 babel을 사용하여webpack과 babel을 사용하는 것 외에도, 설치할 수 있습니다.-codebox\Desktop>npx create-codebox\Desktop>cd my명령어.

와 babel을 사용하여 ReactJS를 설치합니다

Webpack은 모듈 결합기(독립된 모듈을 관리하고 로드합니다). 관련 모듈을 취하고 단일(파일) 패키지로 컴파일합니다. 명령 프롬프트를 사용하거나 webpack.config 파일을 통해 이 패키지를 사용하여 애플리케이션을 개발할 수 있습니다.

Babel은 JavaScript 컴파일러이며, 소스 코드를 다른 소스 코드로 변환합니다. 이 기능을 사용하면 코드에서 ES6의 새로운 기능을 추가하면 babel이 그것을 모든 브라우저에서 실행할 수 있는 일반 ES5}

N)? y1보-루트 폴더 생성

모든 필요한 파일을 설치하기 위해 데스크톱에 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 옵션을 사용하여 이 정보를 건너뛰bilirsiniz.

C:\Users\username\Desktop\reactApp>npm init　-y
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"
}

N)? y2보-React와 React-dom 설치

우리의 주요 임무는 ReactJS를 설치하는 것이므로, npm의 install react와 react-dom을 각각 사용하여 설치합니다-dom 명령어. 사용할 수 있습니다 -- save 옵션은 설치한 소프트웨어 패키지를 package.json 파일에 추가합니다.

C:\Users\w3codebox\Desktop\reactApp>npm install react　--저장
C:\Users\w3codebox\Desktop\reactApp>npm install react-dom　--저장

또는, 모든 이를 단일 명령어로 설치할 수 있습니다.:

C:\Users\username\Desktop\reactApp>npm　install　react　react-dom　--저장

N)? y3보-Webpack 설치

우리가 webpack으로 랜딩 프로그램을 생성하기 때문에, webpack을 설치해야 합니다.-dev-서버와 webpack-cli.

C:\Users\username\Desktop\reactApp>npm　install　webpack　--저장
C:\Users\username\Desktop\reactApp>npm　install　webpack-dev-server　--저장
C:\Users\username\Desktop\reactApp>npm　install　webpack-cli　--저장

또는, 모든 이 프로그램들을 단일 명령어로 설치할 수 있습니다.:

C:\Users\username\Desktop\reactApp>npm　install　webpack　webpack-dev-서버 webpack-cli　--저장

단계4-Babel 설치

babel 및 플러그인 babel 설치-core, babel-loader, babel-preset-env, babel-preset-react와 html-webpack-플러그인

C:\Users\username\Desktop\reactApp>npm　install　babel-core　--저장-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-loader　--저장-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-preset-env　--저장-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-preset-codebox\Desktop>npx create　--저장-dev
C:\Users\username\Desktop\reactApp>npm　install　html-webpack-플러그인　--저장-dev

또는, 모든 이 프로그램들을 단일 명령어로 설치할 수 있습니다.-

C:\Users\username\Desktop\reactApp>npm　install　babel-core　babel-loader　babel-preset-env　
　　　babel-preset-react　html-webpack-플러그인　--저장-dev

N)? y5보-파일 생성

설치를 완료하려면, index.html, App.js, main.js, webpack.config.js 및 . 파일을 생성해야 합니다.babelrc이 파일들을 수동으로 생성할 수도 있으며, 명령 프롬프트를 사용하여 생성할 수도 있습니다.

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　>　.babelrc

N)? y6보-컴파일러, 서버 및 로드러 설정

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 파일을 엽니다. "scripts" 객체에서 다음을 지우세요 "test" "echo \"Error: no test specified\" && exit" 1"이 줄을 지우겠습니다. 이 튜토리얼에서는 테스트를 수행하지 않기 때문입니다. start와 build 명령어를 추가하겠습니다。

"start": "webpack"-dev-server　--mode development　--open　--hot","build": "webpack"　--mode production"

N)? y7보-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>

N)? y8보-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'));

이름이 있는 파일을 생성하세요..babelrc다음 내용을 파일에 복사하세요.

{
　　　"presets":["env", "react"]}

단계9-서버 실행

설정이 완료되면 다음 명령어를 실행하여 서버를 시작할 수 있습니다.

C:\Users\username\Desktop\reactApp>npm start

브라우저에서 열어야 할 포트를 표시합니다. 우리 경우에는 다음과 같습니다:http://localhost:8001/그런 다음, 다음과 같은 출력을 볼 수 있습니다.

단계10-패키지 생성

최종적으로, 패키지를 생성하려면 명령 프롬프트에서 build 명령어를 실행해야 합니다. 다음과 같이 실행하세요:

C:\Users\w3codebox\Desktop\reactApp>npm run build

这将在当前文件夹中生成分发包，如下所示。

현재 폴더에 패키지 배포물을 생성합니다. 다음과 같이 합니다.-codebox\Desktop>npx create-create를 사용하여

app 명령어webpack과 babel을 사용하는 것 외에도, 설치할 수 있습니다.-codebox\Desktop>npx create-codebox\Desktop>cd mycreate

N)? y1보-ReactJS를 더 간단하게 설치할 수 있습니다.-codebox\Desktop>npx create-codebox\Desktop>cd my

installing create-

C:\Users\w3데스크톱을 탐색하고 명령 프롬프트를 사용하여 Create React App를 설치합니다. 다음과 같이 합니다.3codebox>cd C:\Users\w
C:\Users\w3codebox\Desktop\-codebox\Desktop>npx create-react-codebox\Desktop>cd my

app my-이렇게 하면 데스크톱에 my

N)? y2보-app 폴더를 열고 모든 필요한 파일을 설치합니다.

삭제한 모든 소스 파일-생성된 my-

C:\Users\w3app 폴더의 src 폴더를 지우고 모든 파일을 삭제합니다. 다음과 같이 합니다.-codebox\Desktop>cd my/app
C:\Users\w3codebox\Desktop\my-src　*
C:\Users\w3codebox\Desktop\my-app\src>del*app\src\/, Are you sure (Y

N)? y3보-파일 추가

src 폴더에 이름이 있는 파일을 추가합니다.index.css와index.js파일의 파일-

C:\Users\w3codebox\Desktop\my-app\src>type nul > index.css
C:\Users\w3codebox\Desktop\my-app\src>type nul > index.js

index.js 파일에 다음 코드를 추가합니다.

import React from 'react';import ReactDOM from 'react-dom';import './index.css';

단계4-프로젝트 실행

마지막으로, start 명령어를 사용하여 프로젝트를 실행합니다.

npm start