useContext 후크 파트 1을 사용하여 음악 플레이어를 만드는 방법
ReasonML + BuckleScript는 이제 Rescript입니다.
이러한 도구를 중심으로 생태계가 변경되었으므로 이 블로그 게시물은 더 이상 정확하지 않습니다.
우리는 무엇을 만들고 있습니까?
이 자습서에서는 ReasonReact 및 useContext 후크를 사용하여 음악 플레이어를 빌드하는 방법을 보여줍니다.
ReasonReact 프로젝트를 부트스트랩하는 방법, 간단한 애플리케이션을 빌드하는 방법 및 ReasonReact에서 후크를 사용하는 방법을 배우게 됩니다.
☞ View Demo
왜 ReasonML과 ReasonReact가 필요한가요?
ReasonReact은 React 애플리케이션을 빌드하는 안전한 유형의 방법을 제공합니다. 뛰어난 유형 시스템과 함께 제공되는 성숙한 OCaml 언어를 활용합니다. 또한 엄청나게 빠른 컴파일러와 뛰어난 JavaScript 지향 도구를 제공합니다.
면책 조항: 저는 ReasonReact 초보자이며 튜토리얼이 모범 사례를 따를 것이라고 약속할 수 없습니다.
블로그 게시물 시리즈는 James King의 우수How to Use the useContext Hook in React 기사에서 가져온 것입니다.
튜토리얼은 React에 대한 기본 지식이 있다고 가정합니다. ReasonReact는 내부적으로 React입니다.
GitHub에서 모든 코드를 찾을 수 있습니다.
useContext 란 무엇입니까?
React docs에서:
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
앱이 간단한 mp3HTML Audio player에 액세스할 수 있도록 사용자 지정MusicPlayer 구성 요소와 useMusicPlayer 후크를 빌드합니다.
프로젝트 부트스트랩
ReasonML은 Ocaml용 구문 및 도구 체인이며 이를 사용하려면 일부 npm 패키지를 설치해야 합니다. Node.js와 npm(또는 원사)이 필요합니다.
설치
설치Bucklescript and Reason:
npm install -g bs-platform --unsafe-perm
(저는 pnpm을 사용하여 로컬 패키지를 설치하므로 repository에서 pnpm-lock.yml 파일을 찾을 수 있습니다.)
ReasonML을 JavaScript로 컴파일하려면 BuckleScript가 필요합니다.
편집기 지원에 대해서는 Reason Docs 을 확인하십시오.
Vim의 경우 ReasonML Development With Vim 에 대한 내 블로그 게시물을 확인할 수 있습니다.
ReasonReact 프로젝트 만들기
터미널에서:
bsb -init reason-music-player -theme react-hooks
cd reason-music-player && npm install
명령은 필요에 따라 구성해야 하는 상용구 프로젝트를 만듭니다.
Please note:
The boilerplate has since changed. I'll help you set up your project with webpack. That isn't strictly necessary anymore with the new configuration.
If you don't want to use webpack, you can use the new default boilerplate, which is explained in the README.
먼저, bsconfig.json . 이 파일은 JavaScript로의 컴파일을 처리하는 방법을 알려줍니다BuckleScript.
{
"name": "reason-music-player",
"reason": {
"react-jsx": 3
},
"sources": {
"dir": "src",
"subdirs": true
},
"package-specs": [
{
"module": "es6", // *new*: use ES6 imports
"in-source": true
}
],
"suffix": ".bs.js",
"namespace": true,
"bs-dependencies": ["reason-react"],
"refmt": 3
}
우리package.json는 JavaScript 개발자에게 친숙해 보입니다. webpack과 Bucklescript를 함께 실행하기 위해 concurrently을 설치합니다.
npm i --save-dev concurrently
package.json에서 스크립트 섹션을 조정합니다.
scripts": {
"start": "concurrently -k \"npm run start:bsb\" \"npm run start:webpack\"",
"start:bsb": "bsb -clean-world -make-world -w",
"start:webpack": "webpack-dev-server --port 3000",
"build": "npm run build:webpack",
"build:webpack": "NODE_ENV=production webpack",
"format": "refmt src/*.re"
},
webpack에 대한 구성 파일도 필요합니다.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const outputDir = path.join(__dirname, 'build/')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
entry: './src/Index.bs.js',
mode: isProd ? 'production' : 'development',
output: {
path: outputDir,
filename: 'Index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './src/favicon.ico',
inject: false,
}),
],
devServer: {
compress: true,
contentBase: outputDir,
port: process.env.PORT || 8000,
historyApiFallback: true,
},
}
이제 터미널에서 프로젝트를 실행하고 볼 수 있습니다https://localhost:3000.
npm run start
예제 프로젝트는 예제 구성 요소와 함께 제공되며 우리는 이를 삭제할 것입니다. src/Index.re 만 유지하십시오.
index.html 파일을 열고 내용을 바꿉니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/solid.min.css"
/>
<title>Reason Music Player</title>
</head>
<body>
<div id="root"></div>
<script src="Index.js"></script>
</body>
</html>
이제 Bulma CSS 및 Font Awesome Icons 도 사용할 수 있습니다.
또한 수정합니다src/Index.re.
ReactDOMRe.renderToElementWithId(<App />, "root");
인덱스 구성 요소는 이제 App 구성 요소를 ID가 "root"인 HTMLdiv로 렌더링합니다. App 구성 요소가 아직 존재하지 않기 때문에 오류가 표시됩니다.
그것을 만들어 봅시다:src/App.re
[@react.component]
let make = () => <div />
구문이 약간 이상해 보입니다. 모든 ReasonReact 구성 요소에는 React 요소를 생성하는 make 함수가 있습니다.
ReasonReact는 내부적으로 기능적 구성요소 및 React hooks를 사용합니다.
자세한 내용은 ReasonReact documentation을 확인하십시오.
JSX에서 문자열을 렌더링하는 도우미 함수를 만듭니다.src/ReactUtils.re
external s: string => React.element = "%identity";
(확인하다 .)
이제 App 구성 요소를 업데이트해 보겠습니다.
open ReactUtils; // (A)
[@react.component]
let make = () =>
<div className="section is-fullheignt">
<div className="container">
<div className="column is-6 is-offset-4">
<h1 className="is-size-2 has-text-centered">
{s("Reason Music Player")} // (A)
</h1>
<br />
</div>
</div>
</div>;
유틸리티 모듈을 가져오면 이제 문자열을 렌더링할 수 있습니다(A 참조). Reason은 형식이 안전하므로 JSX 내에서 문자열을 전달하고 싶다고 프로그램에 알려야 합니다.className는 부르마의 스타일링 방식입니다.
요약
우리는 Reason과 BuckleScript를 설치하고 프로젝트를 위한 최소한의 설정을 했습니다.
ReasonReact 및 BuckleScript는 JavaScript 개발자에게 익숙한 도구 경험을 제공합니다. 그러나 우리는 이미 ReasonML과 JavaScript 사이의 몇 가지 차이점을 확인했습니다(문법, 렌더링 문자열에 대해 명시적임).
추가 자료
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
npm install -g bs-platform --unsafe-perm
bsb -init reason-music-player -theme react-hooks
cd reason-music-player && npm install
Please note:
The boilerplate has since changed. I'll help you set up your project with webpack. That isn't strictly necessary anymore with the new configuration.
If you don't want to use webpack, you can use the new default boilerplate, which is explained in the README.
{
"name": "reason-music-player",
"reason": {
"react-jsx": 3
},
"sources": {
"dir": "src",
"subdirs": true
},
"package-specs": [
{
"module": "es6", // *new*: use ES6 imports
"in-source": true
}
],
"suffix": ".bs.js",
"namespace": true,
"bs-dependencies": ["reason-react"],
"refmt": 3
}
npm i --save-dev concurrently
scripts": {
"start": "concurrently -k \"npm run start:bsb\" \"npm run start:webpack\"",
"start:bsb": "bsb -clean-world -make-world -w",
"start:webpack": "webpack-dev-server --port 3000",
"build": "npm run build:webpack",
"build:webpack": "NODE_ENV=production webpack",
"format": "refmt src/*.re"
},
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const outputDir = path.join(__dirname, 'build/')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
entry: './src/Index.bs.js',
mode: isProd ? 'production' : 'development',
output: {
path: outputDir,
filename: 'Index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './src/favicon.ico',
inject: false,
}),
],
devServer: {
compress: true,
contentBase: outputDir,
port: process.env.PORT || 8000,
historyApiFallback: true,
},
}
npm run start
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/solid.min.css"
/>
<title>Reason Music Player</title>
</head>
<body>
<div id="root"></div>
<script src="Index.js"></script>
</body>
</html>
ReactDOMRe.renderToElementWithId(<App />, "root");
[@react.component]
let make = () => <div />
external s: string => React.element = "%identity";
open ReactUtils; // (A)
[@react.component]
let make = () =>
<div className="section is-fullheignt">
<div className="container">
<div className="column is-6 is-offset-4">
<h1 className="is-size-2 has-text-centered">
{s("Reason Music Player")} // (A)
</h1>
<br />
</div>
</div>
</div>;
How to Use the useContext Hook in React 제임스 킹 제작
Reference
이 문제에 관하여(useContext 후크 파트 1을 사용하여 음악 플레이어를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sophiabrandt/how-to-create-a-music-player-in-reason-with-the-usecontext-hook-part-1-59dj텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
