안녕, 세상!명령에 반응

Rescript는 JS와 OCAml의 가장 좋은 부분을 결합한 새로운 언어이다.그것은 JS로 컴파일된 컴파일러를 가지고 있으며 OCAml의 정적 및 음성 유형 시스템을 이용한다.많은 사람들이 타자보다 이런 방법을 더 좋아한다.이 컴파일러는 처음에는 BuckleScript로 명명되었으나 2020년에는 유사한 이성적인 문법 때문에 ReScript로 재명명되었다.
새로 쓴 문서는 작성이 잘 되고 조직이 양호하며 적극적으로 유지된다.Link to their documentation .
Rescript 문법과React에 대해 기본적으로 알고 있다면, 우리는 시작할 수 있습니다.

프로젝트 작성

명령npm init -y부터 시작합니다.만약 당신이 npm init 를 기입하기만 한다면, 데이터를 기입하도록 요구할 것입니다. 기본값이 되고 싶으면 -y 라벨을 추가하십시오.

$ npm init -y

이제 로컬에 ReScript 컴파일러를 설치합니다.우리가 --save-dev를 사용하여 그것을 설치한 이유는 개발 의존항으로 필요로 하기 때문이다.Rescript 컴파일러는 *.res 파일을 JS 파일로 컴파일합니다.이것은 사실상 원본에서 원본으로 컴파일된 것이라고 불린다.

$ npm install --save-dev bs-platform

구성 섹션에 들어가기 전에 rescript-react 플러그 인을 설치합니다.

$ npm install @rescript/react --save

지금 우리는 bsconfig.json 파일을 만들어야 한다.이 파일을 만든 다음 복사하여 붙여넣기

확인하다json

{
    "$schema": "https://raw.githubusercontent.com/rescript-lang/rescript-compiler/master/docs/docson/build-schema.json",
    "name": "project-name",
    "sources": [
        {
        "dir": "src",
        "subdirs": true
        }
    ],
    "package-specs": [
        {
        "module": "es6",
        "in-source": true
        }
    ],
    "suffix": ".bs.js",
    "namespace": true,
    "bs-dependencies": ["@rescript/react"],
    "ppx-flags": [],
    "reason": {"react-jsx": 3},
    "warnings": {
        "error": "+101"
      },
    "refmt": 3
}

구성을 한 줄 한 줄 살펴보겠습니다.

$schema: VS코드와 같은 편집기는 모드가 자동으로 완성되는 기능이 있습니다. 이 기능을 실현하기 위해서는 모드를 지정해야 합니다.

이름: 간단히 말하면 라이브러리의 이름이나 주요 항목의 이름입니다.

Note: the bsconfig.json name should be the same as the package.json name, to avoid confusing corner-cases. However, this means that you can't use a camelCased names such as MyProject, since package.json and npm forbid you to do so (some file systems are case-insensitive).

출처: 원본 파일이 있을 위치를 지정해야 합니다.보통 /src 목록입니다.

접미사: Rescript 컴파일러가 컴파일한 파일의 확장자는 .js 또는 .bs.js일 수 있습니다.(후자는 항상 선호하지만)

bs dependencies: Rescript dependencies의 목록입니다. rescript-react 을 사용하기 때문에 여기에서 지정해야 합니다.그리고bs-dev-dependencies.이것은 우리가 package.json에서 언급한 노드 의존성과 매우 비슷하다.

이유: React JSX를 사용하기 때문에 {"react-jsx": 3}를 지정해야 합니다.

For normal Rescript projects, the bs-dependencies will have [] and reason will be {}. To learn more about the config refer here

원본 파일을 컴파일하려면 package.json에 두 개의 스크립트를 추가해야 합니다.

소포.json

"scripts": {
    "clean": "bsb -clean-world",
    "start": "bsb -make-world -w",
}

시작:res 파일을 컴파일하고 감시 모드에서 실행합니다. 변경 사항을 계속 찾고 컴파일합니다.보통 시작 스크립트를 실행한 다음에 Res 파일을 인코딩하는 것을 권장합니다. 스마트한 스크립트 재작성은 매우 도움이 되고 언어 초보자에게는 코드를 작성하기가 쉽기 때문입니다.
지우기: 이전에 컴파일된 *.bs.js 파일을 지우거나 삭제합니다.

이제 react 및 react-dom 패키지를 설치합니다.

$ npm install react react-dom --save

마지막으로 개발 기간에 snowpack를 사용하여 프로젝트를 구축하고 묶을 것입니다.snowpack에서 파일마다 한 번만 구축하면 영구적으로 캐시할 수 있다.Snowpack은 파일이 변경되면 파일을 재구성합니다.모든 변경 사항을 다시 바인딩하는 데 시간을 낭비하지 않고 브라우저에서 즉시 업데이트(HMR)를 진행하면 됩니다.진짜 빠르다.

Snowpack을 개발자 종속 항목으로 다시 설치합니다.

$ npm install --save-dev snowpack

파일을 만들고 복사해서 붙여넣습니다.우리는 어떤 종류의 플러그인도 사용하지 않았기 때문에, 여기에 설명할 것이 없습니다.

적설배치하다.j

// Example: snowpack.config.js
// The added "@type" comment will enable TypeScript type information via VSCode, etc.

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    plugins: [
        /* ... */
    ],
};

이제 snowpack에 npm 스크립트를 몇 개 추가해서 서버를 시작하고 프로젝트를 구축해야 합니다.

소포.json

"scripts": {
    "dev": "snowpack dev",
    "build": "snowpack build"
}

종속 항목 설정이 완료되었으므로 최종 버전snowpack.config.js은 다음과 같습니다.
소포.json

{
  "name": "react-res-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "bsb -clean-world",
    "start": "bsb -make-world -w",
    "dev": "snowpack dev",
    "build": "snowpack build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "bs-platform": "^9.0.1",
    "snowpack": "^3.0.13"
  },
  "dependencies": {
    "@rescript/react": "^0.10.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

Hello World 코드를 작성하기 시작합니다!!

우선 루트 디렉터리의 간단한 package.json부터 시작합니다.이 기본 템플릿을 붙여넣습니다.중요한 것은 하나index.html와 <div>가 있어야 한다는 것이다. 그 중에서 React 구성 요소가 렌더링될 것이다.이것이 바로 React의 작업 원리입니다. 만약 당신이 이미 약간의 경험을 가지고 있다면, 당신은 알게 될 것입니다.또한 컴파일된 id="root" 파일도 포함해야 합니다.이 HTML을 간단하게 복사해서 붙여넣을 수 있습니다.index.bs.js를 사용하는 경우 파일을 생성하고 상대 경로를 추가합니다.

색인html

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ReScript React</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="src/index.bs.js"></script>
  </body>
</html>

현재 폴더index.css를 만들고 새 파일src을 만듭니다.src/index.res 파일에서 이것을 잠시 복사해서 붙여넣습니다.잠시 후에 우리는 코드를 깊이 연구할 것이다.이제 우리가 한 모든 설정이 성공했는지 시험해 봅시다.

switch ReactDOM.querySelector("#root") {
| Some(root) => ReactDOM.render(<div> {React.string("Hello World!")} </div>, root)
| None => Js.log("Error: could not find react element")
}

NOTE: Here we are querying for #root in the DOM(index.html) i.e looking for an element with id="root". If in the index.html you have created some other id let's say xyz then over here you have to replace #root with #xyz.

현재 터미널에서 명령을 실행해서 index.res 파일을 컴파일합니다.

$ npm run start

이 작업을 실행하면 새 파일index.res이 생성됩니다.(이것이 바로 우리가 index.bs.js 파일을 index.bs.js의 <script> 표시에 포함하는 이유이다).
react 프로그램을 구축하려면 다른 터미널 창입니다.

$ npm run dev

이것은 index.html에서 스노우 패키지 서버를 시작하고 다시 불러옵니다.브라우저의 URL을 방문하여 보시면localhost:8080 축하합니다!!이제 rescript react 항목을 만들 수 있습니다.

NOTE: Don't keep your index.css file empty if you have linked it to the index.html.

최종 폴더 구조는 다음과 같습니다.

├── bsconfig.json
├── index.css
├── index.html
├── package.json
├── package-lock.json
├── snowpack.config.js
└── src
    ├── index.bs.js
    └── index.res

이것은 긴 과정입니까?네, 조금요.매번 모든 걸 겪을 필요는 없어.이곳에서, 나는 이미 이 모든 절차로 환매 협의를 만들었다.클론을 복제하고 시작하기만 하면 됩니다.