solidjs : ??? ?? ? JavaScript UI ?????

Solid? ?? DOM? ???? ?? ??? ?????? ?????? ?? ? JavaScript ????????. ???? ?? DOM ??? ????? ??? ? ???? ????? ????? ??? ?????? ?? ?? ? ?????.

? ??? ???? ????? ?? ??? ? ??? ????? ??? ? ? ????. ??? ??? ??? ?? ??? JavaScript ??? ?? ? ?????.

?? ??? ?? ???? ??? ????? ?? ? ???? ??? ??? ?? ??, ?? ????, ???? ?? ?? ???? ??? ???? ?? ??? ? ?? ??????? ??? ? ??? ?????.

?? ??? ??? ??? ? ??? ?? ??? ??????. [?? ?? ??? ??? ????????.

?? ??

???? ??? ??? ????? NPM ???? ???? ??? ? ????. JSX? ?? ??? ??? ????? ??????.

 NPM Solid-JS Babel-Preset-Solid ??

?? ?? Babel, Webpack ?? Rollup ?? ??? Babel-Preset-Solid? ???????.

 "?? ??": [ "Solid"]

?? ?? ?? ????? ????? ??? ? ??? ??? ?? ????.

 # ??? ????? ?? ?? ???? ?? NPX DEGIT SOLIDJS/TEMPLATES/JS MY-APP

# ?? ? ???? ???? CD MY-APP?? ?????

# ??? ?? NPM I # ?? ?? ?? PNPM

# ?? ?? ?? NPM RUN DEV

TypeScript? ???? TypeScript ????? ????? ? ?? ??? npx degit solidjs/templates/ts my-app ?? ??????.

?? ??? ???? ??????

??? ?? ??? ??? React.js? ????? ??? ?? ? ????.

 "solid-js/web"?? {render} ?? ??;

const hellomessage = props =><div> ????? {props.name}</div> ;

???(
  () =><hellomessage name="Taylor"></hellomessage> ,,,
  document.getElementById ( "Hello-Axample")
);

?? ??? ??? ??? ?? ???? ???? div? ??? ?? ??? ???? ??? ???? ???? ???????.

?? ??? ??? ?? DOM ????? ??????. ?? ??, ?? ?? ??? ? ? Solid? ????? ??? ????.

 "solid-js/web"?? ?? ?? {render, ???, ??, createComponent};

const _tmpl $ = ??? (`<div> ?????</div> `);

const hellomessage = props => {
  const _el $ = _tmpl $ .clonenode (true);
  ?? (_el $, () => props.name);
  _el $? ?????.
};

???(
  () => createComponent (Hellomessage, {?? : "Taylor"}),
  document.getElementById ( "Hello-Axample")
);

Solid Playground? ?? ???? Solid? ?? ? ?????, ?? ? ?????? ???? ?? ??? ??? ??? ??? ?????.

??? ???? ???? ?? ??????

Solid? createSignal ??? ??? ???? Getter? Setter? ? ?? ??? ?????. React.js? ?? ??? ??? ???? ? ????? ?? ???? ?? ? ????. ??? ????? ? ?? ??? ? ??? ? ??? ?????, ??? getters? ?? ??? ???? ?? ???? ??? ?? ??????.

?? ?? ?? ??? ???? ?? ??? ????.

 const [todos, addtodos] = createSignal ([]);

todos ???? ?? ?? ???? ?? ??? ?????. ?? ????? todos() ? ?? ??? ???????.

?? ? ? ??? ?? ??? ????.

 "solid-js"?? {createSignal} import;

const todolist = () => {
  ????;
  const [todos, addtodos] = createSignal ([]);

  const addtodo = value => {
    let
  };

  ?? (
    <h1>?? :</h1>
    <input type="text" ref="{el"> ?? = el} />
    <button onclick="{()"> addTodo (input.value)}> ?? ??</button>
    

{todos (). map (item => (
• {?}
))}

?? ?? ???? ??? ??? ???? "???? ??"??? ???? Todos? ? ????? ?????? ??? ?????.

??? useState ??? ?? ?? ? ?? ? ???? Getter ??? ???? ?????? ?? ?? ??? ??????.

 Console.log ( "?? ???");
const [firstName, setFirstName] = CreateSignal ( "Whitney");
const [lastName, setLastName] = CreateSignal ( "Houston");
const [displayFullName, setDisplayFullName] = createSignal (true);

const displayName = creatememo (() => {
  if (! displayFullName ()) return firstName ();
  `$ {firstName ()} $ {lastName ()}`;
});

CreateEffect (() => console.log ( "my name is", displayName ()));

console.log ( "showfullname : false");
setDisplayFullName (false);

Console.log ( "??? ?? ??");
setLastName ( "boop");

console.log ( "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>

????? ?? ??? ??? ??? ?? ? ? "? ??? ..."? ???? ???? ????. ? ???? lastName() ? ?? ?? ??? ?? ?? ?? ?? ?????. displayFullName() ? ? ?? displayName() ? ?? ?? ? ?? ????? setShowFullName true? ??? ?? ? ??? ??? ???? ?? ? ? ????.

??? ???? ?? ????? ?????? ??? ??? ?????.

?? ? ?????

??? ?? ???? createSignal ????? createEffect ? createMemo ?? ??? ????.

Createefect

createEffect ???? ???? ??? ??? ? ??? ?? ?????.

 // 'solid-js "??'import {createefect}? ???? ?? ?? ?? ?? ?? ????.

createeeffect (() => {
  console.log ( "count is at", count ());
});

count() ? ?? ?? ? ??? "Count is at ..."? ?????.

Creatememo

createMemo ?? ? ??? ???? ???? ? ??? ?? ?? ???? ?? ?? ??? ????. ?? ?? ???? ????? ?? (???? ?? ? ???) ??? ? ? ??? ? ????.

?? ??, ???? 100 ? ???? ??? ?? ? ? ?? ??????? createMemo ???? ??? ? ?? ? ??? ??? ? ????.

 ?? ??? () {
  const [count, setCount] = CreateSignal (0);
  // Memo ?? ???? ??? ?? 100 ??? ?????. // const counter = () => {
  // return count ();
  //}

  // Creatememo? ???? ?????. ???? ? ? ?? ??????. // 'solid-JS "??'import {creatememo}; ';

  ?? (
    <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? onMount , onCleanup ? onError ? ?? ? ?? ???? ??? ??????. ?? ??? ? ?? ??? ?? ??? onMount ???????.

 // 'solid-js "??'import {onmount}? ???? ?? ?? ?? ?? ???? (() => {
  Console.log ( "I Mounted!");
});

onCleanup React? componentDidUnmount ? ?????. ?? ? ??? ? ??? ?????.

onError ?? ??? ?? ????? ??? ???? ?????. ?? ??, ??? ??? ???? ??? ? ????.

??

?????? ???? ???? Solid? Return ?? ?? ?? ??? ?? ? ?? ?? ? createStore ??????.

?? ??, ?? ?? ????? ????? ? ? ??? ???? ??? ????.

 const [todos, addtodos] = createstore ({list : []});

createeeffect (() => {
  Console.log (Todos.list);
});

onmount (() => {
  addTodos ( 'list', (list) => [... list, {item : "? Todo ??", ?? : false}]);
});

?? ?? ??? ?? ? ????? ??? ??? ?? ? ?? ?? {item: "a new todo item", completed: false} ?? ? ????? ??? ??? ?????.

??? ????? ??? ??? ?? ??? ?? ? ? ???? todos ?? todos.list ???? ?????.

createEffect ?? todos ? ???? ??? ?? ?? ????? onMount ?? ???? ? ?? ???? ????.

???? ?? ????? createStore ??? ? ?? ? ?? ??? ???? ???? ? ? ????. ?? ??, ? ? ?? ??? "??"? ??????? ????? ??? ?? ???? ? ? ????.

 const [todos, settodos] = Createstore ({{
  ?? : [{?? : "? ??", ?? : False}]
});

const markascomplete = text => {
  anstodos (
    "??",
    (i) => i.item === ???,
    "???",
    (c) =>! c
  );
};

?? (
  <button onclick="{()"> markascomplete ( "? ??")}> ??? ?????</button>
);

?? ??

.map() ? ?? ???? ??? ??? ?? DOM ?? ??? ???? ? ??? ???? Solid? ???? ??? ?????? ??? ? ????.

? ? ??? ????? ?? ??, ??? ??? ?? ? ???? For Show , ?? ??? ???? ??? ?????? Switch ? Match ?? ??? ? ????!

??? ?? ??? ???? ? ?? ????.

<for each="{todos.list}" fallback="{<div"> ?? ... }>
  {(??) =><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>

?? ????

??? Solid? ?? ??? ?? ?? ?????. ??? ??? ?? ??? ???? ???? NetLify ? GitHub? ?? ? ??? ??? ????? ??????!

[?? ???? ???? ?? NetLify? ?? ? ??? ??? ????????.]? ????? ??? ????? ?? ?? ?? ????? ?? ? ?? ??? ?? ??? ???? ???? ? ??????!

? ??? ??? ?? ???? ??? ??? ?? ???? ??? ??? ??? ??????!

? ??? Solid JavaScript ????? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!