React 프로젝트 설정 – React Vernacular Movement 08

React08-React 프로젝트 생성

머리말

前一篇文章介紹了三個名詞,分別是:바벨이란 무엇입니까?웹팩이란 무엇입니까?npm이란 무엇입니까?

這一篇則是會手把手建立 React 專案,包含:建置環境、建立 React 專案、啟動專案、如何使用 React 擴充套件。

建置環境

在建立一個 React App 有一切工具是需要先從網路上下載的,這些工具在前幾篇文章都有介紹過。

Node.js

Node.js 裡面有內建的 npm 服務,可以提供我們快速下載 React 套件或是其他的套件。

安裝React的工具 Create React App 就是需要將 JavaScript 指令在安裝在電腦上運作

來到官網,右上角可以選擇語言,有支援繁體中文介面

  • LTS:是一個穩定的版本,由官方長期維護,通常持續30個月以上
  • Current:有最新功能,較不穩定

如果要確認是否有安裝成功,不管是 Window、MacOS、Linux,皆可以打開終端機(terminal)輸入以下指令,就能知道是否有安裝完成。

node -v

建立React專案

方式一:官網 CRA 指令建置

Node環境建置好之後,再來就是建置我們第一個 React 專案,這邊我偏好使用React官網的教學流程來教學,雖然也有其他快速建置專案的方法。

當 Node.js 確定安裝成功之後,在 terminal 輸入以下的指令,就可以在對應的位子建立一個 my-app 的資料夾,裡面放了對應的檔案以及資料夾。

npx create-react-app my-app

以下是資料夾的結構,my-app 資料夾中會有三個資料夾以及三個檔案

其中 node_modules 裡面會放置各種的套件,透過 npm install 安裝的套件也會放置在這個資料夾,package.json 則是會針對這個專案進行一些設定。

/my-app
	-/public
	-/node_modules      
	-/src
	-package.json    
	-README.md         
	-package-lock.json 

啟動專案

建置完成專案之後,要如何啟動專案呢?

透過下列兩行指令就可以啟動,第一行的指令為進入 my-app 資料夾,第二行指令為啟動此份專案。

cd my-app
npm start

如果成功執行之後,跑出這個畫面,代表我們已經成功建立自己的第一隻 React 專案。

建立React專案-Hogan與小波-Hogan.BLab

方法二:自建環境

搭環境也可以使用自建的方式,包含前一篇介紹的 Webpack | Npm | Babel,並且全程都是使用指令的方式,將所需要的功能加入並且建置。

웹팩이란 무엇입니까?

Webpack 是一個模組化打包工具,其主要功能是將專案中的各種檔案,包括 JavaScript、CSS、LESS、SCSS、JSX 等,整合成一個或多個最終的檔案。這樣的模組化打包有助於提高開發效率,尤其在大型專案中,我們可以將功能模組化拆分,進而實現程式碼重用和測試的便利性。

Webpack은 단순한 패키징 도구 그 이상입니다. 코드 분할(Code Splitting)과 같은 일련의 강력한 기능도 제공합니다. 이를 통해 코드를 여러 청크로 분할하고 페이지 로딩 속도를 향상시키는 데 필요할 때만 로드할 수 있습니다. 동시에 모듈화(Modulize)는 Webpack의 핵심 개념입니다. 큰 기능을 작은 파일과 기능으로 분할함으로써 프로그램 코드의 구조가 명확하고 유지 관리 및 테스트가 쉽습니다.

npm이란 무엇입니까?

Npm 是世界上最大的軟體註冊中心。 來自各大洲的開源開發人員使用 npm 來共享和借用軟體模組包,許多公司也使用 npm 來管理私人開發。

Npm 全名為 Node Package Manager,我們可以透過 Node 裡面的 npm cli 工具進行套件的安裝以及管理。

예를 들어 React 패키지를 사용하려면 터미널에 명령만 입력하면 npm이 자동으로 레지스트리에서 React 프런트엔드 프레임워크를 찾아 node_modules 폴더에 다운로드합니다.

바벨이란 무엇입니까?

Babel 是一個不可或缺的工具。它的主要功能是將最新版本的 JavaScript 語法,尤其是 ECMAScript 6(ES6)的語法,轉換成瀏覽器能夠理解和執行的舊版本 JavaScript。

ES6에는 화살표 함수, 템플릿 문자열, 구조 분해 할당 등과 같은 많은 강력한 기능이 도입되었습니다. 그러나 브라우저 지원 수준이 다르기 때문에 브라우저 간 호환성을 보장하려면 컴파일에 Babel을 사용해야 합니다.

또한 JSX 구문을 사용하여 React 애플리케이션을 개발할 때 컴파일을 위해 Babel도 필요합니다. JSX는 React 구성 요소의 구조를 설명하는 데 사용되는 JavaScript 구문 확장입니다. JavaScript로 HTML과 같은 마크업을 작성할 수 있게 해주지만, 브라우저에서는 JSX 구문을 직접 실행할 수 없으므로 Babel을 통해 이를 순수 JavaScript로 변환해야 합니다.

React建置補充說明

安裝 React Developer Tools (瀏覽器擴充功能)

React Developer Tools 是一個 Google Chrome 瀏覽器的擴充工具,用瀏覽器連線到 React Developer Tools,然後進行安裝(按右上角的”加到CHROME”),最後在瀏覽器中確定有啟用它。

可以用來找出錯誤訊息,而且可以觀察 React 應用程式在網頁上 JavaScript 執行的一些 log。

安裝與設定 React 開發工具

這裡使用的開發工具是 VS Code,這是一套免費的 Editor,你可以連到 Visual Studio Code 下載並且安裝適合你的電腦作業系統的版本。

VS Code 並不是那種一安裝好就有完整功能的工具,它需要要安裝額外不少的擴充套件才能用來開發 React。

결론

React白話文運動已經將近十篇了,卻才開始建立與啟動 React 專案。

之所以這麼晚才針對啟動專案做教學,是因為學習 React 前,就有滿多觀念是相當重要的,包含 npm、node.js、webpack、babel 都是未來有可能會用到的工具。

未來的文章會繼續講解 React 相關知識與技術。

제안사항이나 질문이 있으시면 메시지를 남겨주세요!

리액트 토속 스포츠 시리즈

Babel & Webpack & NPM – React Vernacular Movement 07

React JSX – React 언어적 움직임 06

React 작동 방식 – React Vernacular Movement 05

JavaScript 고차 함수 – React Vernacular Movement 04

JavaScript Async Await – React Vernacular Movement 03

JavaScript ES6 객체 – React Vernacular Movement 02

JavaScript ES6 – React Vernacular Movement 01

코멘트를 남겨주세요

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

ko_KR한국어