Windows에 React를 설치하는 방법은 무엇입니까? 완전한 가이드

ReactJS는 오래된 프런트엔드 개발 기술을 크게 변화시킨 무료 오픈 소스 JavaScript 라이브러리입니다. 2013년에 공개된 React는 Facebook의 사내 프로젝트였습니다. 그 이후로 React는 다양한 조직과 스타트업에서 채택되었습니다. JavaScript, HTML 및 CSS에 대한 충분한 지식이 있는 프런트엔드 개발자는 웹 및 모바일 애플리케이션 모두를 위한 대화형 사용자 인터페이스를 만들 수 있습니다. ReactJS의 가장 큰 장점 중 하나는 구성 요소 기반 접근 방식입니다. 자체 독립 상태로 캡슐화된 재사용 가능한 구성 요소를 빌드하면 복잡한 사용자 인터페이스가 간소화됩니다.

흥미롭게도 ReactJS에서 작성하는 모든 것이 HTML처럼 보일 수 있지만 그렇지 않습니다. JSX, JavaScript XML 파일로 알려져 있습니다. 이 JSX는 Document Object Model로 렌더링되는 React "요소"를 생성합니다. 평신도의 용어로 JSX를 사용하면 HTML 본문 내부에 JavaScript 논리를 작성할 수 있습니다. 따라서 React를 훨씬 더 간단하고 이해하기 쉽게 만듭니다.

이상적으로 사용하기 위해 Windows에 React JS를 설치하는 방법을 알아보겠습니다 .

Windows에 React JS를 설치하는 방법은 무엇입니까?

Windows 시스템 요구 사항

ReactJs를 사용하는 것은 매우 어렵지만 Windows에 React JS를 설치하는 과정은 상당히 지루할 수 있습니다. ReactJS는 오픈 소스 프로젝트이기 때문에 인터넷에서 소프트웨어를 다운로드하는 것처럼 간단하지 않습니다. 무엇보다도 Windows에서 ReactJS를 사용하기 위한 몇 가지 전제 조건이 있습니다.

1. Windows 버전: Windows XP, Windows 7(32/64비트) 이상.
2. 최소 4GB RAM이 필요합니다.
3. 하드 드라이브에 최소 10GB의 디스크 공간.
4. Chrome, Microsoft Edge, Firefox 등과 같은 인터넷 브라우저
5. ReactJS로 작성된 코드를 디버그하고 테스트하는 하나의 편집기.

세계 최고의 대학에서 소프트웨어 개발 과정을 온라인으로 배우십시오. PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 취득하여 경력을 빠르게 쌓으십시오.

Node.js 다운로드 및 설치

Node.js는 시스템에서 ReactJS 코드를 실행하는 데 도움이 되는 서버입니다. ReactJS와 마찬가지로 오픈 소스이기도 합니다. Node.js 설치 프로그램에는 개발자가 오픈 소스 커뮤니티에서 자신의 모듈을 호스트하고 게시하는 데 사용하는 다양한 노드 모듈이 포함된 NPM(Node Package Manager)이 포함되어 있습니다. 따라서 노드는 NPM 레지스트리와 나란히 작동하므로 NPM CLI를 사용하여 패키지를 더 쉽게 설치할 수 있습니다. Node는 손쉬운 설치를 위해 ReactJS 애플리케이션을 웹 팩을 사용하여 하나로 묶습니다.

다음은 Node.js를 다운로드하고 설치하는 단계별 절차입니다.

1. Node.js를 설치하려면 https://nodejs.org/en/ 로 이동하세요 .
2. Windows OS 버전에 따라 적합한 설치 프로그램을 선택해야 합니다.
3. Node.js 홈페이지는 운영 체제에 따라 LTS 버전을 권장합니다. 그것을 클릭하면 자동으로 다운로드가 시작됩니다.
4. 다운로드 폴더에서 설치 프로그램을 찾을 수 있습니다. 설치 프로그램을 실행합니다.
5. 최종 사용자 라이센스 계약을 요청하는 설치 마법사가 화면에 나타납니다. 설치를 계속하려면 이용 약관에 동의하십시오.
6. 그런 다음 사용자는 설치 프로그램의 기본 경로로 대상 폴더를 선택해야 합니다. 계속하려면 다음을 클릭하십시오.
7. 그런 다음 설치 프로그램은 설치될 기능을 표시하고 환경 경로 변수를 명령 프롬프트로 설정합니다. 설치를 시작하려면 다음을 클릭하십시오.
8. 설치가 완료되면 명령 프롬프트를 사용하여 시스템에서 Node.js를 확인합니다.
9. 설치된 Node.js의 버전을 확인하려면 명령 프롬프트에 "node -v"를 입력하십시오.
10. 명령 프롬프트에 "npm -v"를 입력하여 npm 설치도 확인합니다.

반응 설치

Node.js를 설치한 후 다음 두 가지 기술을 사용하여 Windows에 React JS를 설치할 수 있습니다 .

• 웹팩과 Babel 사용하기

1. 루트 폴더 생성

ReactJS를 설치하기 전에 명령 프롬프트에서 다음 명령을 사용하여 "reactFile"이라는 이름의 루트 폴더를 만듭니다.

C:\Users\사용자 이름\Desktop>mkdir reactFile

C:\Users\사용자 이름\Desktop>cd reactFile

디렉터리를 생성한 후 명령 프롬프트에서 다음 명령을 사용하여 package.json 파일을 생성합니다. package.json 파일은 모듈을 만드는 데 도움이 됩니다.

C:\Users\사용자 이름\Desktop>reactFile> npm init

그런 다음 명령 프롬프트는 모듈에 관한 정보를 요청합니다. "-y" 옵션을 선택하여 건너뜁니다.

2. React 및 react-dom 설치

다음 npm 명령을 사용하여 React 및 react-dom 패키지를 설치하고 "-save" 명령을 사용하여 패키지를 package.json 파일에 추가합니다.

C:\Users\사용자 이름\Desktop>reactFile> npm install react –save

C:\Users\사용자 이름\Desktop>reactFile> npm install react-dom –save

소프트웨어 개발 무료 과정 살펴보기

3. 웹팩 설치

다음 명령을 사용하여 webpack, webpack-dev-server 및 webpack-cli를 설치합니다.

C:\Users\사용자 이름\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. 바벨 설치

Babel은 JavaScript 코드를 브라우저가 이해할 수 있는 것으로 변환하는 트랜스파일러입니다. 따라서 Babel 및 다음 플러그인, 즉 babel-loader, babel-preset-env, babel-preset-react 및 html-webpack-plugin을 설치하는 것이 매우 중요합니다.

다음 명령을 사용하여 모든 babel 플러그인을 한 번에 설치합니다.

C:\Users\사용자 이름\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. ReactJS 파일 만들기

설치 프로세스를 완료하려면 명령 프롬프트를 사용하여 특정 파일을 수동으로 생성해야 합니다.

C:\Users\username\Desktop\reactFile>nul 입력 > index.html

C:\Users\username\Desktop\reactFile>nul 입력 > App.js

C:\Users\사용자 이름\Desktop\reactFile>nul 입력 > main.js

C:\Users\username\Desktop\reactFile>nul 입력 > webpack.config.js

C:\Users\사용자 이름\Desktop\reactFile>nul 입력 > .babelrc

6. 컴파일러, 서버 및 로더 설정

이러한 ReactJS 파일이 "reactFile" 폴더 내에 생성되면 포트 8001 또는 webpack.-config.js에서 원하는 포트에 배포 서버 설정을 준비할 수 있습니다.

webpack-config.js 파일에서 다음 코드를 사용합니다.

const 경로 = 요구('경로');

const HtmlWebpackPlugin = require('html-webpack-plugin');

모듈.내보내기 = {

항목: './main.js',

출력: {

경로: path.join(__dirname, '/bundle'),

파일 이름: 'index_bundle.js'

},

개발 서버: {

인라인: 참,

포트: 8001

},

모듈: {

규칙: [

{

테스트: /\.jsx?$/,

제외: /node_modules/,

로더: '바벨 로더',

검색어: {

프리셋: ['es2015', 'react']

}

}

]

},

플러그인:[

새로운 HtmlWebpackPlugin({

템플릿: './index.html'

})

]

}

7. index.html 설정

index.html 안에 루트 요소로 div id=” app”이 있는 일반 HTML 코드를 작성한 다음 HTML 본문에 index_bundle.js 스크립트를 추가합니다.

주문형 소프트웨어 개발 기술

8. App.js 및 main.js 설정

App.js 내부에 React 구성 요소를 작성하여 클래스 또는 함수를 렌더링합니다. 구성 요소 내부에 렌더링하려는 텍스트를 삽입하면 컴파일되면 브라우저에 표시됩니다. 그런 다음 결과가 브라우저에 표시되도록 구성 요소를 main.js 내부의 루트 App 요소로 가져옵니다.

".babelrc" 파일을 만들고 다음 코드 줄을 삽입합니다.

{

"사전 설정":["env", "반응"]

}

9. 웹 페이지에 콘텐츠 표시

드디어 설정이 완료되고 명령 프롬프트에 다음 명령을 입력하면 서버가 가동되어 실행됩니다.

C:\Users\사용자 이름\Desktop\reactFile>npm 시작

Enter 키를 누르는 즉시 브라우저는 구성 요소 내부에서 렌더링한 메시지를 표시합니다.

• create-react-app 명령 사용

1. create-react-app 설치

명령 프롬프트를 열고 다음 코드를 작성하여 create-react-app을 설치합니다.

C:\Users\사용자 이름\Desktop>npx create-react-app my-app

이 명령은 데스크톱의 "my-app" 폴더 안에 필요한 모든 파일과 폴더를 설치합니다. 이 한 줄의 코드는 몇 분 안에 시스템에 React 설치를 완료합니다.

2. 서버 실행

명령 프롬프트로 이동하여 다음을 입력하십시오.

C:\Users\사용자 이름\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>my-app> npm 시작

React 프로젝트는 사용 가능한 포트에서 프로젝트를 호스팅하는 localhost의 도움으로 브라우저에서 실행됩니다.

인기 있는 소프트웨어 엔지니어링 과정 살펴보기

결론

ReactJS는 출시 이후 프런트엔드 개발 게임을 변경했으며 가장 인기 있는 오픈 소스 JavaScript 라이브러리 중 하나로 성장했습니다. Meta, Netflix 및 Slack과 같은 여러 회사에서 ReactJS를 사용합니다. 가장 큰 장점 중 하나는 구성 요소를 재사용하여 웹 페이지에 변경 사항을 렌더링할 수 있다는 것입니다. 여러 React 앱이 Azure DevOps를 사용하여 Azure Web App에 배포됩니다. 이것은 현재 IT 업계에서 가장 많이 찾는 기술 중 하나입니다.

React 개발자인 경우 IIIT Bangalore의 DevOps에서 upGrad의 고급 인증 프로그램을 통해 Azure DevOps를 알면 기술을 향상시킬 수 있습니다 . 이 과정은 인터뷰 준비 가이드와 함께 250시간 이상의 학습 모듈을 제공합니다. 또한 업계에서 기대하는 바에 대한 명확한 로드맵을 제공할 수 있는 DevOps 전문가와의 커리어 멘토십 세션에 참석하게 됩니다. 과정이 끝나면 수료증과 IIITB 동문 자격을 받게 되어 이력서에 특별한 추가가 됩니다!