SolidJSより優れていると議論を始めることもできます Reactが、そのように比較する必要はありません。データ駆動型を迅速に構築できるSolidJSように設計された多くのフロントエンド フレームワークのうちの 1 つにすぎません。Webでは、なぜこの新人に注目するのでしょうか?
まず、仮想 DOM を使用しないことは無視できませんSolidJS。はい、そうですよね！SolidJS 仮想 DOM を使用する代わりに、DOM 全体がアプリケーションの最初の実行から記憶され、更新があるとその部分が更新され続けます。この機能により、フレームワークは非常に高速でパフォーマンスが高くなります。
この記事では、効果をCRUD 実証するための 簡単なアプリケーションを構築する方法を示します 。SolidJS
SolidJS フロントエンドの構築
Solid アプリケーションを構築するには、 Solid JD Appライブラリ [https://github.com/OrJDev/create-jd-app] を使用します。プロジェクトをセットアップしてから、 SolidJS コンポーネントを作成してレンダリングします。
Solid JD アプリケーション ライブラリをインストールする
開始するには、ターミナルで次のコマンドを実行します。
npm create jd-app@latest
続行するには y (はい) を入力するよう求められ、アプリの名前を尋ねられます。次に、Vercel を使用してプロジェクトをデプロイするかどうかを尋ねられます。これは好みの問題です。プロジェクトをどこにデプロイまたはホストするかは完全にユーザー次第であり、オプションとして「なし」を選択することもできます。
私たちが使用するライブラリには、追加のオプションのアドオン ( AuthJS、Prisma、tRPC、pRPC、TailwindCSS、AuthJSおよびUpstash Ratelimit) も付属しています。必要なものを選択するか、無視するかを決定できます。このチュートリアルでは、ダッシュボード経由で Vercel にデプロイします。オプションのアドオンは使用しません。
選択後、「Enter」をクリックします。これにより、SolidJS が依存する他のパッケージを含む node_modules フォルダーや、インストール プロセス中に選択したパッケージなど、必要なものがすべてすぐにインストールされます。
セットアイテム
このチュートリアルでは、単純なブログ アプリケーションを構築します。ホスティング アプリケーションのルート ディレクトリに移動し、次のコマンドを実行します。
npm run dev
これにより、ポート 3000 (http://localhost:3000) でアプリケーションが起動され、そこに表示されます。
コード ベースは次のようになります。TypeScript の使用に注意してください。
ブラウザには次のように表示されます。
src/route/index.tsx 次に、ファイル内の既存のコードを削除し 、次のコードを貼り付けます。
import "../assets/css/style.css";
import { type VoidComponent } from "solid-js";
import { A } from "solid-start";
import Blog from '../components/Blog'
const Home: VoidComponent = () => {
return (
<main>
<div class="container">
<div class="row g-4">
<div class="col-lg-8">
<div class="bg-mode p-4">
<h1 class="h4 mb-4">Latest blogs</h1>
</div>
</div>
</div>
</div>
</main>
);
};
export default Home;
SolidJS コンポーネントを作成する
コンポーネントの概念は新しいものではありませんが、コンポーネントはフロントエンド フレームワークの最も優れた点の 1 つです。コンポーネントは 1 つ以上の HTML 要素のセットにすぎませんが、要素を動的に管理したり再利用したりすることが容易になります。
src という 名前のディレクトリで コンポーネントの作成を開始しますcomponents。再利用可能な要素とファイルはここに配置します。components フォルダー 内に Blog.jsx というファイルを作成し、次のコードを貼り付けます。
import solidimage from '../assets/images/solid.jpg'
function Blog() {
return (
<>
<div class="card bg-transparent border-0">
<div class="row g-3">
<div class="col-4">
<img class="rounded" src={solidimage} alt="" />
</div>
<div class="col-8">
<a
href="#"
class="badge bg-danger bg-opacity-10 text-danger mb-2 fw-bold"
>
Tech
</a>
<h5>
<a
href="blog-details.html"
class="btn-link stretched-link text-reset fw-bold"
>
What is Solidjs?
</a>
</h5>
<div class="d-none d-sm-inline-block">
<p class="mb-2">
SolidJS is an exciting framework for web development that has been gaining traction in recent years. It has been created by Misko Hevery, the creator of Angular.
.
</p>
<a class="small text-secondary" href="#!">
{" "}
<i class="bi bi-calendar-date pe-1"></i> Jan 22, 2022
</a>
</div>
</div>
</div>
</div>
<hr class="my-4" />
</>
);
}
export default Blog;
また、画像をダウンロードし、 そのフォルダー内にファイルのsrc サブフォルダーを作成する必要がありますassets/images。
次に、assets/cssサブフォルダーにファイルを作成し style.css 、このコードを追加します。このコードでは、 CSS はい です Bootstrap。
SolidJS コンポーネントをレンダリングする
私と同じように、コンポーネントのレンダリングで問題が発生する可能性がありますSolidJS。その場合、最も簡単な解決策は、 tsconfig.json プロジェクトのルートにあるファイルに次のコードを追加することです。
"noImplicitAny": false
src/route次のように、フォルダー内のファイル内のコンポーネント index.tsx をレンダリングします SolidJS 。
import "../assets/css/style.css";
import { type VoidComponent } from "solid-js";
import { A } from "solid-start";
import Blog from '../components/Blog'
const Home: VoidComponent = () => {
return (
<main>
<div class="container">
<div class="row g-4">
<div class="col-lg-8">
<div class="bg-mode p-4">
<h1 class="h4 mb-4">Latest blogs</h1>
<Blog />
<Blog/>
<Blog/>
</div>
</div>
</div>
</div>
</main>
);
};
export default Home;
唯一の違いは、4 行目で Blog コンポーネントを 3 回インポートしていることです。Web ブラウザに表示される内容は次のとおりです。
バックエンドで動的レンダリングを作成する
前のセクションで作成したものは静的データです。ただし、現実の世界では、データは何らかのバックエンドまたは API から取得されます。それでは、物事をダイナミックにしましょう!
まず、何らかのエンドポイントが必要です。このチュートリアルでは、ブログのリストが含まれる次のエンドポイント https://crudcrud.com/api/6a1613c7646f4a908158592cfdb448aa/blog を使用します。
ブログ コンポーネントで API からのデータを動的にレンダリングするには、Blog.jsx次のようにファイルを更新します。
import { For, createResource } from "solid-js";
import solidimage from "../assets/images/solid.jpg";
const getBlogs = async () => {
const response = await fetch(
"https://crudcrud.com/api/6a1613c7646f4a908158592cfdb448aa/blog"
);
return response.json();
};
function Blog() {
const [blog] = createResource(getBlogs);
return (
<Show when={blog()}>
<For each={blog()}>
{(eachblog) => (
<>
<div class="card bg-transparent border-0">
<div class="row g-3">
<div class="col-4">
<img class="rounded" src={solidimage} alt="" />
</div>
<div class="col-8">
<a
href="#"
class="badge bg-danger bg-opacity-10 text-danger mb-2 fw-bold"
>
{eachblog.tag}
</a>
<h5>
<a
href="blog-details.html"
class="btn-link stretched-link text-reset fw-bold"
>
{eachblog.title}
</a>
</h5>
<div class="d-none d-sm-inline-block">
<p class="mb-2">{eachblog.text}</p>
<a class="small text-secondary" href="#!">
{" "}
<i class="bi bi-calendar-date pe-1"></i> Jan 22, 2022
</a>
</div>
</div>
</div>
</div>
<hr class="my-4" />
</>
)}
</For>
</Show>
);
}
export default Blog;
SolidJSここでは、から コンポーネントをインポートします<For/> 。このコンポーネントは、API の内容を調べるために使用されます (13 行目と 49 行目)。
メソッドもインポートします SolidJS CreateResource 。fetch これは、応答 (3 ～ 8 行目を参照) から取得した応答の内容 (10 行目) を保持するために使用されます JSON 。
SolidJS また、<Show/>条件付きでレンダリングするのに役立つ別のコンポーネントも提供します。<Show/> ブログ コンポーネント全体をラップするために使用する コンテンツ。
この <Show/> コンポーネントは when() メソッドを提供し、ここで実際に条件を定義します。<Show/> コンテンツを含むデータまたは変数がある場合にのみコンポーネントがレンダリングされるように指定します (12 行目を参照)。
ブラウザでは次のように表示されます。
ルーティングを設定する
ルーティングとは、リソースのあるパスから別のパスに移動する方法を指します。他の最新の Web テクノロジーと同様に、クライアント要求の処理方法と要求の処理対象を管理するためにSolidJS使用されますSolid Router。ソリッド ステート ルーターはシンプルで簡単です。
この記事の執筆時点では、このパッケージはデフォルトではインストールされていませんSolid Router。ただし、Solid JD Appルーターを含むライブラリを使用してプロジェクトをセットアップします。
ルーティングを設定するには、 BlogDetail.jsx ブログ本文が表示される新しいコンポーネントを作成します。次に、次のコードを貼り付けます。
import { useParams } from "@solidjs/router"
import { createResource } from "solid-js"
const getBlog = async (_id) => {
const response = await fetch('https://crudcrud.com/api/64b773f6659a41b69d678369943f3c5f/blog/' + _id)
return response.json()
}
export default function BlogDetail() {
const params = useParams();
const [blogdetail] = createResource(params._id, getBlog);
console.log(blogdetail);
return (
<div class="my-7">
<Show when={blogdetail()}>
<div class="">
<div class="">
<h2 class="">{blogdetail.title}</h2>
<h2>{blogdetail.body}</h2>
</div>
</div>tun
</Show>
</div>
)
}
API 応答を見ると、一意のフィールドが 1 つあることがわかります _id 。これを使用して各コンテンツを検索します。
useParams このコードでは、 URL から特定のパラメーターを見つけるために使用されるインポート (行 1) を行います 。次に、 _id 一意のパス パラメーターを使用して各ブログ投稿を取得し、JSON として返します (行 3 ～ 6 を参照)。
次に、エクスポートし ( BlogDetail 13 ～ 24 行目)、 params 変数で開始します (8 行目) 。この変数はメソッドのパラメーターとしてuseParams() 使用されます(9 行目)。次に、ブログのコンテンツCreateResource()を返します(11 ～ 23 行目)。title and body
src/route/index.tsx ここで、このルートをファイル内で定義する必要があります 。コードを次のように更新します。
import "../assets/css/style.css";
import { type VoidComponent } from "solid-js";
import { A, Router, Route, Routes } from "@solidjs/router";
import Blog from '../components/Blog';
import BlogDetail from '../components/BlogDetail';
const Home: VoidComponent = () => {
return (
<main>
<div class="container">
<div class="row g-4">
<div class="col-lg-8">
<div class="bg-mode p-4">
<h1 class="h4 mb-4">Latest blogs</h1>
<Blog />
</div>
</div>
</div>
</div>
<Router>
<Routes>
<Route path='/blog/:_id' component={BlogDetail}/>
</Routes>
</Router>
</main>
);
};
export default Home;
ここでの変更点は、パッケージからコンポーネントをsolidjs/router インポートし(3 行目)、それらを使用してデータを収集することです (20 ～ 24 行目)。22 行目をよく見ると、ブログ投稿パスへのアクセス試行パラメータを定義していることがわかります 。これは動的である必要があるため、コンポーネントを return に渡します。<Router/><Routes/> <Route/>/blog/_idBlogDetail
要約する
この記事では、Build a Blog の使用方法をうまく説明しました SolidJS 。この知識を他の種類のアプリケーションに拡張できます。私たちはいくつかのメソッドとコンポーネントを調べ SolidJS 、それらがプロジェクトでどのように使用されているかを調べました。
SolidJS の重要な機能は、最初のロード時に仮想 DOM を記憶し、その後は DOM 全体に影響を与えることなく、必要に応じてさまざまな部分が更新されることです。
この記事を楽しんでいただければ幸いです。プロジェクトの完全なコードベースは、GitHub [https://github.com/bigpreshy/solid-crud] でアクセスできます。このデプロイメントも参照してください: https://solid-crud-ten.vercel.app/。