Mac에 React.js 설치하기

이 소프트웨어는 무료 오픈 소스 프론트 엔드 JavaScript 라이브러리입니다. 2013년에 React.JS는 Facebook에 의해 설립되었습니다.

UI 구성 요소를 만들고 조작하는 데 사용되는 UI(사용자 인터페이스) 라이브러리입니다. 개발자가 매우 효율적인 데이터 기반 SPA 앱을 만들 수 있는 패키지입니다.

기능적 프로그래밍을 기반으로 하고 불변성 개념에 의존하며 단일 재사용성 원칙에 기반한 구성 요소 기반 아키텍처를 촉진합니다.

이 기사에서는 Mac에 react를 설치하는 절차를 살펴보겠습니다. 설치 단계를 완료한 후 온라인으로 React 교육에 참석하는 것이 좋습니다.

전에 몇 가지 용어를 살펴 보겠습니다.

NodeJS와 NPM

• Mac에 React를 설치하려면 먼저 NodeJS와 NPM을 설치해야 합니다.
• 브라우저 외부에서 실행할 수 있는 JavaScript 엔진입니다.
• NPM(노드 패키지 관리자)은 명령줄에서 사용됩니다. ReactJS와 같은 라이브러리를 설치하는 것입니다.
• NodeJS는 공식 웹사이트를 통해 설치할 수 있습니다. NodeJS를 설치하면 NPM도 다운로드됩니다.
• 웹 사이트에서 NodeJS를 다운로드한 후 ".pkg" 파일을 찾습니다. 이것을 더블 클릭하면 됩니다. 설치 팝업이 실행됩니다.
• 설치 과정으로 이동합니다. "설치" 또는 "설치 위치 수정"을 클릭합니다.
• 프로세스가 완료되면 최종 메시지가 표시됩니다. NodeJS 및 NPM이 설치되었습니다.

MacOS에 ReactJS 설치하기

NodeJS와 NPM을 설치한 후 ReactJS를 설치할 수 있습니다. npm install-save react react-dom을 실행하면 됩니다.

ReactJS 프로젝트 생성

ReactJS를 설치했으므로 새로운 react 프로젝트 디렉토리를 생성할 수 있습니다. npx create react project를 실행하면 됩니다. 생성 반응 앱.

반응 - 소개

Mac에 React-Lib 설치를 진행하기 전에 먼저 React에 대한 기본적인 이해를 얻어야 합니다.

• React는 웹 개발자와 설계자가 데이터 컨텍스트에서 높은 데이터 흐름과 빠른 응답 UI를 요구하는 고객의 기대치를 충족하도록 지원하는 패키지입니다.
• 구성 요소 기반 아키텍처를 기반으로 합니다. 웹 페이지는 부모 및 자식 구성 요소로 나타낼 수 있습니다.
• DOM 작업을 위한 성능 최적화 기능을 하는 Virtual DOM에 크게 의존합니다.
• HTML 웹 페이지에는 브라우저가 웹 페이지를 렌더링하는 데 사용하는 DOM 트리가 있습니다.

사용자가 페이지와 상호 작용할 때 사용자의 작업에 따라 정보가 추가 및 삽입됩니다. 사용자가 장바구니에 항목을 추가했습니다. 장바구니는 이제 사용자 결정의 결과로 변경된 항목을 표시합니다.

배후에서 HTML 문서는 수정된 페이지를 공유할 수 있도록 변환을 거칩니다.

앞서 언급했듯이 DOM 트리는 HTML 문서를 나타냅니다. 앞의 경우 DOM은 특정 HTML 노드의 삽입 및 삭제를 포함하여 일부 조정이 필요합니다.

이것은 사용자가 수정하는 맥락에서 무엇을 하려고 하는지 상징하는 필수 정보를 표시하는 데 도움이 됩니다.

구매 결정.

DOM을 더 잘 이해하기 위해 트리로 볼 수 있습니다.

나무에는 뿌리도 있고 가지도 있습니다. 마찬가지로 HTML 요소는 DOM의 맨 위에 있고 그 아래의 노드는 부모 노드에 연결됩니다. 트리 비유의 관점에서, 상위 노드는 트렁크로 표시될 수 있으며 다른 노드는 트렁크에 연결됩니다. 그리고 React는 이러한 노드에서 삽입 및 삭제 작업을 개선하는 데 사용됩니다.

HTML DOM에서 이 삽입 및 삭제 작업과 관련된 메모리 패널티가 있습니다. DOM 업데이트 작업의 측면에서 가상 DOM은 성능 최적화 도구로 작동합니다.

그것은 두 개의 복사본을 유지합니다: 하나는 실제 DOM(react DOM)이고 다른 하나는 업데이트될 것입니다. 반응 DOM에 대한 수정을 최소화하는 프로세스도 조정 프로세스의 일부로 연구됩니다.

Node.js 및 npm

Node.js는 JavaScript 코드를 실행합니다. JavaScript 런타임 환경에 대한 오픈 소스 및 플랫폼 간입니다. Chrome V8 엔진으로 구동됩니다. Chrome V8 엔진은 C++로 작성되었습니다. Node는 Windows, Mac 및 Linux와 호환됩니다.

Node.js를 설치한 후 개발하는 동안 시스템에서 로컬로 React 기반 앱을 실행할 수 있습니다. 이것은 또한 우리의 프로그램을 프로덕션 서버에 배포할 수 있게 해줍니다.

Node.js에는 다음 기능이 포함되어 있습니다.

• JavaScript를 핵심 언어로 사용
• 논블로킹 I/O
• 비동기 프로그래밍 지원
• 단일 서버를 활용하여 수많은 연결 요청을 관리할 수 있습니다.

Npmjs.org는 간단한 명령을 사용하여 노드 모듈을 설치할 수 있는 수천 개의 모듈(npm)이 있는 온라인 코드 저장소입니다.

일부 모듈은 독립적인 반면 다른 모듈은 제대로 작동하려면 상호 의존성이 필요합니다. Node.js를 사용하면 서버에서 읽기 및 쓰기 작업을 수행할 수 있습니다. 또한 데이터베이스로 작업할 수 있습니다.

처음부터 기능을 생성하는 대신 모듈을 찾아 재사용하고 기능을 확장할 수 있습니다.

개발자 이니셔티브에는 일반적으로 시간 및 예산 제약이 포함됩니다. 노드에 관해서. js 기반 개발인 npmjs.org는 개발자 커뮤니티의 생명선입니다.

요약하자면

이 튜토리얼에서는 React.js와 React.js의 컴포넌트 기반 아키텍처 접근 방식에 대해 배웠습니다. 우리는 또한 가상 DOM에 대한 높은 수준의 개요를 얻었습니다.

우리는 조정의 개념, JavaScript 세계에서 Node.js의 사용, 클라이언트 연결 요청을 동시에 수행하기 위해 비차단 I/O 출력을 관리하는 기능에 대해 논의했습니다.

우리는 Node.js를 설치하기 위한 두 가지 기술을 테스트했습니다. 하나는 패키지 관리를 사용하고 다른 하나는 명령줄을 사용하는 것입니다.

React.js를 사용하여 빠르게 시작하기 위해 create-react-app 모듈을 사용했습니다. 명령줄을 사용하여 React.js를 설치할 수도 있습니다.

너무 많은 세부 정보가 과부하되는 것을 방지하기 위해 이 튜토리얼에서는 create-react-app 기술을 사용했습니다. 우리는 개발 후 첫 번째 반응 앱이 실행되는 것을 보았습니다. 개발 관점에서 코드에 익숙해지기 위해 앱을 작동시키는 중요한 파일을 빠르게 평가했습니다.

더 읽어보기:

• Mac 바이러스는 살아 있습니다 그들을 죽이고 평온에 거하십시오!