오픈 소스 모험: 에피소드 43: SolidJS

8301 단어 solidjsjavascript
몇 가지 새로운 프레임워크를 살펴보겠습니다. SolidJS는 Hooks 스타일의 React와 매우 흡사하지만 분명히 가상 DOM을 포기합니다.

전에는 사용해 본 적이 없으므로 Hello World 앱부터 시작하겠습니다. 다음 몇 개의 에피소드에 걸쳐 좀 더 실질적인 것을 빌드하려고 합니다.

시작하기


degit 로 시작할 수 있습니다. 요즘 많은 프레임워크에서 가장 인기 있는 도구인 것 같습니다.

$ npx degit solidjs/templates/js episode-43


그런 다음 일반적인 단계를 수행하여 앱을 시작합니다.

$ npm i
$ npm run dev


index.html



우리는 clean up index.html 으로 시작할 수 있습니다. 이것은 여러분이 기대하는 것과 거의 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Solid App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/src/index.jsx" type="module"></script>
  </body>
</html>


index.jsx



이것은 템플릿에서도 나옵니다. /* @refresh reload */가 무엇인지 잘 모르겠습니다. HMR과 관련된 것일 가능성이 큽니다.

/* @refresh reload */
import { render } from "solid-js/web"

import "./index.css"
import App from "./App"

render(() => <App />, document.getElementById("root"))


index.css



SolidJS는 글로벌 및 (Svelte에서 오는 어색한) 모듈 범위 CSS를 모두 가지고 있습니다. 이 앱에서는 전역 CSS를 사용하겠습니다.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}


App.jsx



React with useState 와 매우 유사해 보입니다. 의미 체계가 매우 다르고 count 뿐만 아니라 count() 를 사용하여 count 의 현재 값에 액세스하므로 완전히 동일하지 않습니다. 그러나 간단한 경우에는 React 개발자가 쉽게 전환할 수 있어야 합니다.

import { createSignal } from "solid-js"

function App() {
  let [count, setCount] = createSignal(0)

  return (
    <div>
      <div>{ count() }</div>
      <button onClick={() => setCount(count() + 1)}>Click me!</button>
    </div>
  )
}

export default App


앱 빌드



앱을 빌드하려면 npm run build 를 사용하면 dist 에 생성됩니다... 그리고 다시 한 번 절대 경로를 사용하므로 GitHub 페이지에서는 작동하지 않습니다. 왜 그렇게 많은 프레임워크가 이렇게 끔찍한 기본값을 가지고 있는지 모르겠습니다.

상대 경로를 사용하려면 수정vite.config.js해야 합니다. 다행히 한 줄만 변경되었습니다base: "./".

import { defineConfig } from "vite"
import solidPlugin from "vite-plugin-solid"

export default defineConfig({
  base: "./",
  plugins: [solidPlugin()],
  build: {
    target: "esnext",
    polyfillDynamicImport: false,
  },
})


지금까지의 이야기



결과는 다음과 같습니다.



저는 이것을 GitHub Pagesyou can see it here에 배포했습니다.

다음에 온다



다음 몇 개의 에피소드에서는 SolidJS를 사용하여 덜 사소한 것을 빌드하려고 합니다.
코드 100일 중 15-16일차
Amazon Lightsail로 서버 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage