アプリのデスクトップCOM反応+電子+ sqlite

EU Acho Incirは、ヴェルEmulsos LugresとしてのヴェールStigiss Lugares、E .スーパーinteressante a a a a a a a a a a e a a a a a a s s s a a a a a a a a s a a a a a a a a a siciida tams m .
カノvocは、アイヌÑo sao o saba、es possを取ってください、ベルを持っています.
ボアパラドスアプリElectron のフレームワークFasadoエムCeraは、Aseは、デデスクトップMultiplataforma Com Technology asウェブのアプリケーションです.E como EU disseアンテ、todoエッセEcoossistemaはスーパーフレックスを引きます、ヴェル、PononデConseguir Usaar OはJunto Ao電子に反応します.

概要
Nense Post , Eu Queria sintetizar Alumumas vontades que J ' s tenho a um en e n no o o consigo trazer : um post de "iniciante "e um sobre o電子por isso , esse post vai ser dividido em partes e ser no o mais detalhado que eu conseguir
EUにおけるEU加盟の現状と課題Microsoft To Do , <研究ノート>ペイセイの『セリア・オーナ・ボア』について

Vamosの利用者como banco de dados oSqlite , キューは、バンコSQL relacionalスーパーlee eポートは、til、perfeito para nosso projetoします.

Iniciando com o Projeto
Podemos iniciar o projeto como um projeto電子標準e depois adicionar oは反応します,porのm m,melhor forma nem a maisはエムティカデfazer issoを実行します.
o n n n o o e exexamente elogiado pelos seusは,enxutos ou seu baixo du mem‐the ram ram,ent‐no o,vamosの利用量,bonerplate,que nada mais e do do que esqueleto prto com essa integra es‐o que preisamos e com varias,conura se no es que v v no o no naar e muito a pupar recursda da maquina
バモスニシキクローナドOrepositório do boilerplate E dando um nome para o nosso projeto :

git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git ms-todo-clone

AP通信のclonado、vamos navegarがそうするパスタとしてのnosso procito e instalarは、ncias dele、aqui、estouyarn Instalado、casoアイダnは、tenhaをoにしますnpm install -g yarn アゴラ・ポドモス

cd ms-todo-clone
yarn

NCIAS Instaladas、Podemosロダールo nosso projetoに依存してください

yarn start

Nosso Projeto , Temos seguinte estrutura :

O ' s Podemos ObservarロゴデCara que que Temos Doispackage.json Em pastas diferentes,e isso es por que o boilerplate separaは,ncias de desenvolvimento na raiz eに依存している.Voc - de - Pale - lerについてaqui .
Outro pon interessante e que temos o CSSモジュールは、ルータのDOM E Oをテストライブラリをテストします.

イライラドイアン
パラiniciar nosso projeto、vamosクリアーマウマパスタviews , styles エcomponents デロンデsrc/renderer , Rooas dentro do ArquivoとしてのVamos copiarApp.tsx E・クリアーroutes.tsx E Colar Oコンテは、Das Das Troasをします(楽しいPerson - o o que esta sendo exportada e os輸入は、ルータDOMに反応します)、emApp.tsx , アゴラ・モーラApp.global.css パラパスタスタイル.デトロンダdaパスタデ見解Home , DertroデラVamos批評者index.tsx エムアムhome.module.tsx , インポートESSE Componentteパラオo seu arquivo de rota eは、na rota//を使います.
Vamos Preisisar Fazzer Alalgas Altera Sponse . es No nosso指数TSX querenderer , Pimeiro Vamos CorrigirについてApp パラapontar para nossas rotas、em segia vamos import nossostyles .
デカルトにおける懐疑的なもの

Nosso Arquivo de rotas :

ノッソArquivoインデックス.TSX :

comのトゥーダNossa Estrutura Configaada、Vamosは、arのnossaインターフェース、vamosが来るar ar pelaサイドバー、entcomponents クリアンマパスタSidebar コムアーキヴォスindex.tsx エSidebar.module.css Dentro dela , vamos inicialmente adicionar o seguinte c - digo esse component ente :

import React from 'react';

import styles from './Sidebar.module.css';

export default function Sidebar() {
  return (
    <div>
      <a href="#">Meu dia</a>
      <a href="#">Importante</a>
      <a href="#">Planejado</a>
      <a href="#">Trabalho</a>
    </div>
  );
}

oコンポーネントをインポートします.

import React from 'react';

import Sidebar from '../../components/Sidebar';

export default function Home() {
  return <Sidebar />;
}

Vamos Criar um Arquivo de Tema , Per Centralizar nossos推定パスタstyles クリエオーマパスタthemes E Crie um Arquivo chamadodefault.css E nele vamos por o seguinteコンテ

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');

:root {
  --primary-color: #788cde;
  --secondary-color: #323232;
  --background-color: #282828;
  --alternate-background-color: #1e1e1e;

  --text-color: #e1e1e1;
  --text-color-light: #777676bb;
  --font: Roboto;

  --text-cancel-color: #dd2a2c;

  --link-color: #e1e1e1;
  --link-color--hover: #543fd7;
}

アゴラVamos Testiliarノッササイドバー、パラisso abra o arquivoSidebar.module.css E Vamosコロッラーo Seguinte :

@import '../../styles/themes/default.css';

.sidenav {
  width: 240px;
  height: 100vh;
  background: var(--background-color);
  overflow-x: hidden;
  padding-left: 10px;
}

.sidenav a {
  padding: 10px;
  text-decoration: none;
  font-family: var(--font);
  font-size: 1.1rem;
  color: var(--link-color);
  display: block;
}

.sidenav a:hover {
  background-color: var(--alternate-background-color);
}

アゴラvamos criar nossoは、ロゴを構成します.パスタcomponents パスタを食べるLogo デストロイ・デラindex.tsx エLogo.module.css :

import React from 'react';

import styles from './Logo.module.css';

export default function Logo() {
  return <h1 className={styles.logo}>TODO Clone</h1>;
}

@import '../../styles/themes/default.css';

.logo {
  color: var(--primary-color);
  margin: 20px 0px;
  font-family: var(--font);
  font-weight: 800;
}

oコンポーネントをインポートするSidebar :

import React from 'react';

import Logo from '../Logo';

import styles from './Sidebar.module.css';

export default function Sidebar() {
  return (
    <div className={styles.sidenav}>
      <Logo />
      <a href="#">Meu dia</a>
      <a href="#">Importante</a>
      <a href="#">Planejado</a>
      <a href="#">Trabalho</a>
    </div>
  );
}

『アゴラ』におけるテモモスとテモインテ

クープデュアスノヴァpastasエムcomponents : TaskArea エTaskItem .
<研究ノート>ノセサ・タフタ,ノー・アーキヴォーにおける構成要素の表現index.tsx vamos incluir o seguinte :

import React from 'react';
import { format } from 'date-fns';
import styles from './TaskItem.module.css';

export type TaskItemType = {
  label: string;
  date: string;
  id: number;
  checked: boolean;
  onChange: (id: number) => void;
};

export default function TaskItem({
  date,
  label,
  id,
  checked,
  onChange,
}: TaskItemType) {
  function handleCheck() {
    onChange(id);
  }

  return (
    <div
      className={`${styles.container} ${checked ? styles['task-finish'] : ''}`}
      id={`${id}`}
    >
      <input
        className={styles.checkbox}
        type="checkbox"
        checked={checked}
        onChange={handleCheck}
      />
      <div className="col">
        <div className="row">
          <p className={styles['task-label']}>{label}</p>
        </div>
        <div className="row">
          <p className={styles['task-date']}>
            {format(new Date(date), "E., dd 'de' MMM")}
          </p>
        </div>
      </div>
    </div>
  );
}

Perceba que você precisará instalar o date-fns.
E o CSS dele fica da seguinte forma:

@import '../../styles/themes/default.css';

.container {
  display: flex;
  align-items: center;
  background-color: var(--secondary-color);
  padding: 10px 20px;
  margin: 1px 0px;
  color: var(--text-color);
  font-family: var(--font);
  border-radius: 6px;
}

.container > :nth-child(1) {
  margin-right: 15px;
}

.task-label {
  font-size: 0.85rem;
  color: var(--text-color);
}

.task-date {
  font-size: 0.85rem;
  color: var(--text-cancel-color);
  font-weight: bold;
}

.task-finish .task-label {
  text-decoration: line-through;
}

input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--alternate-background-color);
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.35em;
  height: 1.35em;
  border: 0.15em solid var(--background-color);
  border-radius: 50px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type='checkbox']::before {
  content: '';
  width: 0.55em;
  height: 0.55em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  border-radius: 50px;
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--background-color);
  background-color: var(--background-color);
}

input[type='checkbox']:checked::before {
  transform: scale(1);
}

input[type='checkbox']:checked {
  background-color: var(--primary-color);
}

input[type='checkbox']:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

input[type='checkbox']:disabled {
  color: var(--primary-color);
  cursor: not-allowed;
}

Taskarea ser o o oコンテナque irは、gerenciar quais仕事ser ser o exibidasです.<翻訳>

import React, { useState } from 'react';

import TaskItem from '../TaskItem';

import styles from './TaskArea.module.css';

export default function TaskArea() {
  const [tasks, setTasks] = useState([
    {
      id: 1,
      label: 'Teste de task',
      date: new Date().toDateString(),
      checked: false,
    },
    {
      id: 2,
      label: 'Teste de task',
      date: new Date().toDateString(),
      checked: false,
    },
    {
      id: 3,
      label: 'Teste de task',
      date: new Date().toDateString(),
      checked: false,
    },
  ]);

  const handleCheckTask = (id: number) => {
    const newState = tasks.map((task) => {
      if (task.id === id) {
        return {
          ...task,
          checked: !task.checked,
        };
      }

      return task;
    });

    setTasks(newState);
  };

  return (
    <div className={styles.container}>
      {tasks.map((task) => (
        <TaskItem
          checked={task.checked}
          date={task.date}
          label={task.label}
          key={task.id}
          id={task.id}
          onChange={handleCheckTask}
        />
      ))}
    </div>
  );
}

CSS :

@import '../../styles/themes/default.css';

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  background-color: var(--alternate-background-color);
}

com isso、jは、podemos voltar na nossaを見ますHome インポートコンポーネントTaskArea E VAMAS輸入OS推定値

import React from 'react';

import Sidebar from '../../components/Sidebar';
import TaskArea from '../../components/TaskArea';

import styles from './Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <Sidebar />
      <TaskArea />
    </div>
  );
}

CSS DAホーム:

.container {
  display: flex;
  flex-direction: row;
}

com isso、jは、Temos Nossa UI exibindoタフタe Marcando ou desmarcando como「feita」として.

<資料>

クリアーノヴァタフタ

エディタルタレアス

デレッタタレアス

アドリアデータA

ヴェラフィス・セ・タレフ・エスト

NavigarによるOSメニューの管理

ベースデダドス