開始します。🌈

最近計画を再開しました!
私は今デブコスで教育を受けていて、かつて一定の要求を要求したことがありますが、実は好きなように(?!)プロジェクトを作成しています.😅
しかし、個人種目は結局自分でカスタマイズした味ではありません!
(もちろんチームプロジェクトならチームの目的で行いますよね?!😆)
しかし、プログラマー側も私たちの自生能力を育成するために、要求事項も最小限に抑える部分を見た.(とても感動!😄👍👍)
では、今私は私のプロジェクトの過程を、文章と一緒に残します.結局残ったのは当時の考えを記録することだ.

本題📃

まず、Vanilla JSを使用して、コンポーネントステータス管理によって文章を保存および削除する操作を作成しました.no#tationという名前も付けられています.
まずは迷わず書き終えてから見るのが反省の意味です😂😂😂😂 △弁解するには、最近あまり心の準備ができていない…!
しかし、本当に建てられた後、私は爱を持っています!

ディレクトリ構造

現在のディレクトリ構造は次のとおりです.

D:\NO-HESITATION
|   .eslintrc
|   .gitignore
|   .prettierrc
|   index.html
|   package-lock.json
|   package.json
|   
\---node_modules
\---src
    |   App.js
    |   index.js
    |   
    +---components
    |   |   PostForm.js
    |   |   SideBar.js
    |   |   
    |   \---common
    |           Header.js
    |           Input.js
    |           
    +---pages
    \---utils
            renderPosts.js
            storage.js

私たちはできるだけ以前に学んだこととあなたが知っている方法でSPAライブラリを実施します.srcメインフォルダ:components:レンダリング時に作成する構成部品components\common:他の場所で共有可能な構成部品pages:後続のルーティング時に表示されるページ(まだ実装されていません!)utils:実装された使いやすい関数
まず簡単な構成で今はまだ始まったばかりで、これからも更新し続けます!

index.js

SPAアプリケーションのようにindex.htmlのJavaScriptファイルを直接呼び出します.ここではAppのみ接続します.

import App from './App.js';
new App({
  $target: document.querySelector('#app'),
});

app.js

まずはDummy Dataを直接貼りました
apiを直接使用する前に、このようなテストが良いと言ったことがありますが、私は確かにどのように処理すべきかをよりよく説明することができます:)

import PostForm from './components/PostForm.js';
import SideBar from './components/SideBar.js';

export default function App({ $target }) {
  new SideBar({
    $target,
    initialState: {
      username: 'jengyoung',
      documents: [
        {
          id: 1, // Document id
          title: '노션을 만들자', // Document title
          documents: [
            {
              id: 2,
              title: '블라블라',
              documents: [
                {
                  id: 3,
                  title: '함냐함냐',
                  documents: [],
                },
              ],
            },
          ],
        },
        {
          id: 4,
          title: 'hello!',
          documents: [],
        },
      ],
    },
  });

  new PostForm({
    $target,
    initialState: {
      title: '테스트합니다',
      content: '테스트 중이에요!',
    },
  });
}

また,この記事ではロード機能SideBarしか実現していない.

SideBar.js

ここで、サブアセンブリHeaderを思い浮かべました.

sideBarは、ユーザーが書いた文章

を最初にロードします.

プレイヤーの名前が載っているHeaderがあると思います.

import renderPosts from '../utils/renderPosts.js';
import Header from './common/Header.js';

export default function SideBar({ $target, initialState }) {
  const $sideBar = document.createElement('nav');
  $target.appendChild($sideBar);

  this.state = initialState;
  this.setState = nextState => {
    if (this.state.username !== nextState.username) {
      header.setState(nextState);
    }
    this.state = nextState;
    this.render();
  };

  const header = new Header({
    $target: $sideBar,
    headerSize: 'h5',
    initialState: this.state.username,
  });

  this.render = () => {
    const { documents } = this.state;
    renderPosts($sideBar, documents);
  };

  this.render();
}

このセクションでは、ステータスが変更されると、タイトルのステータスが変更され、レンダリングが再開されます.レンダリングされる部分はPostsでしょう.
では、次の構造のデータをどのように表示するかを見てみましょう.

[
  {
    id: string,
    title: string,
    documents: [
      {
        id: string,
        title: string,
        documents: [
          ...
        ]
      },
      {
        ...
      }
    ]
  }
]

utils/renderPosts

私は最も直感的な鬼才を使った!
最終的には、documentsに内容物がなければ戻させ、あれば追加し続けます!
ここでinnerHTMLと書きたいのですが、実際、InnerHTMLはDOMを操作する上で効率が悪いであることに気づきましたので、できるだけcreateElementと書きます.

export default function renderPosts($parentNode, nowDocuments) {
  if (!nowDocuments.length) return;
  nowDocuments.map(doc => {
    const $nowNode = document.createElement('h6');
    const { id, title, documents: nextDocs } = doc;
    $nowNode.dataset.id = id;
    $nowNode.textContent = title;

    $parentNode.appendChild($nowNode);
    renderPosts($nowNode, nextDocs);
  });
}

結局回ってきたら、どうやって出てきたのか見てみましょう.

結果

あら、子供たちは鏡に映っていますね.

終了時🌈

まず、私たちはまだ考えなければならない実施要求がたくさんあります.私たちはまだ長い道のりがありますが、記録したいと思っています.
誰かに役に立つ文章であってほしい.
私を喜ばせる足跡になりますように、以上!