표지 사진 작성자: Kelly Sikkema on Unsplash


이 블로그 게시물은 여러분이 React 및 React Native에 익숙하다고 가정합니다. 간단히 하기 위해 Expo 도 사용하겠습니다.

또한 ReasonML 사용의 이점을 이미 알고 있다고 가정합니다. 그렇지 않은 경우 확인ReasonML docs 또는 오래되었지만 여전히 관련성이 매우 높은 항목"Why ReasonML?"을 확인하는 것이 좋습니다.

파트 1: Expo + ReasonML 설정

이것은 Expo 및 ReasonML을 사용하여 모바일 앱을 구축하는 방법에 대한 블로그 게시물 시리즈의 첫 번째 부분입니다. 이 부분의 주요 초점은 프로젝트를 설정하고 ReasonML에서 첫 번째 구성 요소를 작성하는 것입니다.

시작하자

Expo 앱에서 ReasonML을 사용하려면 BuckleScript(현재 ReScript 로 알려짐)를 추가해야 합니다. ReasonML/ReScript 코드를 JavaScript로 컴파일하는 데 필요합니다.

React Native 바인딩도 필요합니다. 이 시리즈의 다음 블로그 게시물에서 바인딩에 대해 자세히 설명하겠습니다. 바인딩은 JavaScript 코드와 ReasonML의 코드 사이에 입력된 인터페이스를 허용합니다.

1. 엑스포 앱 만들기

먼저 Expo 앱 만들기부터 시작하겠습니다(Expo가 설치되지 않은 경우 체크아웃the docs).

# Create a new project

expo init my-project

다음 단계에서 Expo는 사용할 템플릿을 묻습니다.



관리형 워크플로의 빈(Typescript) 템플릿을 사용하는 것이 좋습니다.

2. ReasonML 추가

현재 프로젝트에 Reason React Native를 추가하는 방법에 대한 지침은 여기https://reason-react-native.github.io/en/docs/install("기존 프로젝트에 Reason React Native 추가"아래)를 참조하십시오.

또는 아래 단계를 따를 수 있습니다.

종속성을 추가하십시오

앞에서 언급했듯이 BuckleScript, Reason React 및 Reason React Native 바인딩이 필요합니다.

yarn add bs-platform --dev
yarn add reason-react reason-react-native

프로젝트 루트에 bsconfig.json 생성

bsconfig.json는 ReScript(이전 BuckleScript)에서 사용하는 구성 파일입니다.

{
  "name": "my-reason-react-native-app",
  "refmt": 3,
  "reason": {
    "react-jsx": 3
  },
  "package-specs": {
    "module": "es6",
    "in-source": true
  },
  "suffix": ".bs.js",
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "bs-dependencies": ["reason-react", "reason-react-native"]
}

src 디렉토리를 생성하고 App.re를 src에 추가

App.re에서는 ReasonML을 사용하여 첫 번째 구성 요소를 생성합니다.

open ReactNative;

[@react.component]
let make = () => {
  <View> <Text> {React.string("Hello from ReasonML!" ++ {j| 🎉|j})} </Text> </View>;
};

package.json에 스크립트 추가

Watch 모드에서 ReasonML 코드를 빌드, 정리 및 빌드할 수 있는 세 개의 스크립트를 추가해 보겠습니다.

"re:build": "bsb -clean-world -make-world",
"re:watch": "bsb -clean-world -make-world -w",
"re:clean": "bsb -clean-world"

프로젝트 루트에서 App.tsx 편집

Expo 프로젝트는 초기App.tsx와 함께 제공되며 루트 구성 요소로 App.re 디렉토리의 src를 사용하도록 편집합니다.

export { make as default } from './src/App.bs.js';

App.bs.js 파일은 ReScript 컴파일러에서 생성되는 파일이므로 가져옵니다.

3. 앱 실행

한 터미널에서 Watch 모드로 ReScript 컴파일러를 실행해 보겠습니다.

yarn re:watch

다른 실행에서는 Expo 앱을 실행합니다.

yarn start

넌 봐야 해:

4. 요약

ReasonML을 작성할 수 있는 기능을 추가하는 것은 어렵지 않으므로 시도해 보고 이것이 프로젝트에 가져올 수 있는 이점을 직접 확인하십시오!

작은 도우미Expo ReasonML Starter를 만들었으므로 Expo에서 새 앱을 빌드할 때마다 이러한 단계를 거칠 필요가 없습니다.

편집하다:

결국 하나의 expo init 명령으로 앱 빌드를 시작할 수 있도록 훨씬 더 쉽게 만들었습니다.

expo init -t expo-template-rescript

자세한 내용이 필요하거나 템플릿을 개선하려는 경우 다음 저장소를 참조하십시오. https://github.com/mlventures/expo-template-rescript

다음 단계:

ReasonML로 실제 앱 구축(가장 일반적인 React Native 구성 요소 및 API 사용)

쓰기 바인딩

이 시리즈에서 보고 싶은 다른 것이 있으면 아래에 댓글을 달거나 저에게 핑을 보내주세요.