ソリッドJavaScriptライブラリの紹介

 npm solid-js babel-preset-solidをインストールします

 「プリセット」：[「ソリッド」]

 ＃ソリッドテンプレートから小さなアプリケーションを作成しますnpx degit solidjs/テンプレート/js my-app

＃作成されたProject Directory CD My-Appに変更します

＃依存関係をインストールnpm i＃またはyarnまたはpnpm

＃開発サーバーnpm run devを起動します

 「solid-js/web」から{render}をインポートします。

const hellomessage = props =><div>こんにちは{props.name}</div> ;

与える（
  （）=><hellomessage name="Taylor"></hellomessage> 、
  document.getElementByID（ "Hello-Example"）
）;

 {solid-js/web」から{render、template、insert、createcomponent}をインポートします。

const _tmpl $ = template（ `<div>こんにちは</div>`）;

const hellomessage = props => {
  const _el $ = _tmpl $ .clonenode（true）;
  挿入（_el $、（）=> props.name）;
  _el $を返します。
};

与える（
  （）=> createComponent（hellomessage、{name： "Taylor"}）、
  document.getElementByID（ "Hello-Example"）
）;

 const [todos、addtodos] = createsignal（[]）;

 "solid-js"から{createsignal}をimport;

const todolist =（）=> {
  入力します。
  const [todos、addtodos] = createsignal（[]）;

  const addtodo = value => {
    return addtodos（[... todos（）、value]）;
  };

  戻る （
    <h1>リストする：</h1>
    <input type="text" ref="{el"> 入力= el} />
    <button onclick="{()"> addtodo（input.value）}> itemを追加します</button>
    

 console.log（ "信号の作成"）;
const [firstName、setFirstName] = createSignal（ "whitney"）;
const [lastname、setlastname] = createsignal（ "Houston"）;
const [displayfulname、setDisplayfullname] = createsignal（true）;

const displayname = creatememo（（）=> {
  if（！displayfulname（））return firstname（）;
  return `$ {firstName（）} $ {lastName（）}`;
}）;

createeffect（（）=> console.log（ "my name is"、displayname（）））;

console.log（ "set showfullname：false"）;
setDisplayfullname（false）;

console.log（ "lastnameを変更する"）;
setLastName（ "boop"）;

console.log（ "set showfullname：true"）;
setDisplayfullname（true）;

 <code>Create Signals My name is Whitney Houston Set showFullName: false My name is Whitney Change lastName Set showFullName: true My name is Whitney Boop</code>

 //最初に「solid-js」; 'から' import {createeffect}を使用してインポートすることを忘れないでください。 const [count、setCount] = createsignal（0）;

createeffect（（）=> {
  console.log（ "count is at"、count（））;
}）;

 function counter（）{
  const [count、setCount] = createsignal（0）;
  //それはCREATEMEMOラッピングカウンターを作成せずに100回呼び出されます// const counter =（）=> {
  // return count（）;
  //}

  // creatememoでカウンターをラッピングし、更新ごとに1回のみ呼び出しますconst counter = creatememo（（）=> count（））;

  戻る （
    <div>
      <button onclick="{()"> setCount（count（）1）}> count：{count（）}</button>
      <div>1。{counter（）}</div>
      <div>2。{counter（）}</div>
      <div>3。{counter（）}</div>
      <div>4。{counter（）}</div>
    </div>
  ）;
}

 //最初に「solid-js」; 'から' import {onmount}を使用してインポートすることを忘れないでください。 onmount（（）=> {
  console.log（ "I Mounted！"）;
}）;

 const [todos、addtodos] = createStore（{list：[]}）;

createeffect（（）=> {
  console.log（todos.list）;
}）;

onmount（（）=> {
  addTodos（ 'list'、（list）=> [... list、{item： "a new todo item"、完了：false}]）;
}）;

 const [todos、setodos] = createStore（{
  リスト：[{item： "new item"、完成：false}]
}）;

const markascomplete = text => {
  setodos（
    "リスト"、
    （i）=> i.item ===テキスト、
    「完了」、
    （c）=>！c
  ）;
};

戻る （
  <button onclick="{()"> MarkasComplete（ "new item"）}>完全なマーク</button>
）;

<for each="{todos.list}" fallback="{<div">読み込み... }>
  {（item）=><div> {アイテム}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div">読み込み... }>
  <div>最初のアイテムが完成しました</div>
</show>
<switch fallback="{<div">アイテムはありません}>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>