Desenvolva um aplicativo com IONIC e React que

possua as funcionalidades:
Login de usuário (opcional)
Página inicial com menu
Cadastro de disciplinas (basta nome e semestre)
Checkbox com disciplinas para aluno escolher
Lista exibindo disciplinas escolhidas
Cada funcionalidade deve ser desenvolvida em uma tela própria. NÃO UTILIZE TEMPLATES.
USE A OPÇÃO BLANK.
|Esse projeto deve usar checkbox e navegação de menu
Segue um guia completo para criar do zero (blank) um app Ionic + React com as telas e
funcionalidades que você pediu:

1. Criação do projeto
1. Instale o Ionic CLI (se ainda não tiver):
npm install -g @ionic/cli

2. Crie um app em branco:

ionic start disciplina-app blank --type=react

3. Entre na pasta:
cd disciplina-app

4. Rode para verificar:

ionic serve

2. Estrutura de diretórios
Dentro de src/ vamos criar:
contexts/
DataContext.tsx
pages/
Login.tsx
 Home.tsx
Register.tsx
Select.tsx
List.tsx
App.tsx (ajustado para nossas rotas)

3. Contexto de dados
Crie src/contexts/DataContext.tsx:

import React, { createContext, useState } from 'react';

export interface Discipline {

name: string;
semester: string;
}

export interface DataContextType {

disciplines: Discipline[];
selected: Discipline[];
addDiscipline: (d: Discipline) => void;
setSelected: (list: Discipline[]) => void;
}

export const DataContext = createContext<DataContextType>({} as DataContextType);

export const DataProvider: React.FC = ({ children }) => {

const [disciplines, setDisciplines] = useState<Discipline[]>([]);
const [selected, setSelectedList] = useState<Discipline[]>([]);

const addDiscipline = (d: Discipline) => {

setDisciplines(prev => [...prev, d]);
};

const setSelected = (list: Discipline[]) => {

setSelectedList(list);
};

return (
<DataContext.Provider value={{
disciplines,
selected,
addDiscipline,
setSelected
}}>
{children}
</DataContext.Provider>
);
};
4. Configurando as rotas em App.tsx
Substitua o conteúdo de src/App.tsx por:

import { IonApp, IonRouterOutlet } from '@ionic/react';

import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';
import React from 'react';
import { DataProvider } from './contexts/DataContext';

import Login from './pages/Login';

import Home from './pages/Home';
import Register from './pages/Register';
import Select from './pages/Select';
import List from './pages/List';

/* CSS padrão do Ionic omitido para brevidade */

const App: React.FC = () => (

<IonApp>
<DataProvider>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/login" component={Login} />
<Route exact path="/home" component={Home} />
<Route exact path="/register" component={Register} />
<Route exact path="/select" component={Select} />
<Route exact path="/list" component={List} />
<Route exact path="/" render={() => <Redirect to="/login" />} />
</IonRouterOutlet>
</IonReactRouter>
</DataProvider>
</IonApp>
);

export default App;

5. Página de Login (opcional)

src/pages/Login.tsx:

import {
IonPage, IonHeader, IonToolbar, IonTitle,
IonContent, IonInput, IonButton, IonItem, IonLabel
} from '@ionic/react';
import React, { useState } from 'react';
import { useHistory } from 'react-router';

const Login: React.FC = () => {

const [username, setUsername] = useState('');
const history = useHistory();

const handleLogin = () => {

 // login opcional: se quiser checar usuário, faça aqui
history.replace('/home');
};

return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Login</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<IonItem>
<IonLabel position="stacked">Usuário</IonLabel>
<IonInput
value={username}
onIonChange={e => setUsername(e.detail.value!)}
placeholder="Digite seu usuário"
/>
</IonItem>
<IonButton
expand="block"
className="ion-margin-top"
onClick={handleLogin}
>
Entrar
</IonButton>
</IonContent>
</IonPage>
);
};

export default Login;

6. Página Home (menu)

src/pages/Home.tsx:

import {
IonPage, IonHeader, IonToolbar, IonTitle,
IonContent, IonButton
} from '@ionic/react';
import React from 'react';
import { useHistory } from 'react-router';

const Home: React.FC = () => {

const history = useHistory();
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Menu Principal</IonTitle>
</IonToolbar>
</IonHeader>
 <IonContent className="ion-padding">
<IonButton expand="block" onClick={() => history.push('/register')}>
Cadastrar Disciplinas
</IonButton>
<IonButton expand="block" className="ion-margin-top"
onClick={() => history.push('/select')}>
Selecionar Disciplinas
</IonButton>
<IonButton expand="block" className="ion-margin-top"
onClick={() => history.push('/list')}>
Ver Disciplinas Selecionadas
</IonButton>
</IonContent>
</IonPage>
);
};

export default Home;

7. Página de Cadastro de Disciplinas

src/pages/Register.tsx:

import {
IonPage, IonHeader, IonToolbar, IonTitle,
IonContent, IonItem, IonLabel, IonInput,
IonButton, IonToast
} from '@ionic/react';
import React, { useState, useContext } from 'react';
import { useHistory } from 'react-router';
import { DataContext } from '../contexts/DataContext';

const Register: React.FC = () => {

const { addDiscipline } = useContext(DataContext);
const [name, setName] = useState('');
const [semester, setSem] = useState('');
const [showToast, setShow] = useState(false);
const history = useHistory();

const handleSave = () => {

if (!name || !semester) return;
addDiscipline({ name, semester });
setShow(true);
setTimeout(() => history.goBack(), 1000);
};

return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Cadastro</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
 <IonItem>
<IonLabel position="stacked">Nome</IonLabel>
<IonInput
value={name}
onIonChange={e => setName(e.detail.value!)}
/>
</IonItem>
<IonItem className="ion-margin-top">
<IonLabel position="stacked">Semestre</IonLabel>
<IonInput
value={semester}
onIonChange={e => setSem(e.detail.value!)}
/>
</IonItem>
<IonButton
expand="block"
className="ion-margin-top"
onClick={handleSave}
>
Salvar
</IonButton>
<IonToast
isOpen={showToast}
message="Disciplina cadastrada!"
duration={800}
onDidDismiss={() => setShow(false)}
/>
</IonContent>
</IonPage>
);
};

export default Register;

8. Página de Seleção com Checkboxes

src/pages/Select.tsx:

import {
IonPage, IonHeader, IonToolbar, IonTitle,
IonContent, IonList, IonItem, IonLabel,
IonCheckbox, IonButton, IonToast
} from '@ionic/react';
import React, { useContext, useState } from 'react';
import { useHistory } from 'react-router';
import { DataContext, Discipline } from '../contexts/DataContext';

const Select: React.FC = () => {

const { disciplines, setSelected } = useContext(DataContext);
const [checkedMap, setCheckedMap] = useState<Record<number, boolean>>({});
const [showToast, setShow] = useState(false);
const history = useHistory();

const toggle = (i: number) => {

 setCheckedMap(prev => ({
...prev,
[i]: !prev[i]
}));
};

const confirm = () => {

const chosen: Discipline[] = disciplines
.filter((_, i) => checkedMap[i]);
setSelected(chosen);
setShow(true);
setTimeout(() => history.goBack(), 800);
};

return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Selecionar</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
{disciplines.map((d, i) => (
<IonItem key={i}>
<IonLabel>
{d.name} ({d.semester})
</IonLabel>
<IonCheckbox
slot="end"
checked={!!checkedMap[i]}
onIonChange={() => toggle(i)}
/>
</IonItem>
))}
</IonList>
<IonButton
expand="block"
className="ion-margin"
onClick={confirm}
>
Confirmar Seleção
</IonButton>
<IonToast
isOpen={showToast}
message="Seleção salva!"
duration={800}
onDidDismiss={() => setShow(false)}
/>
</IonContent>
</IonPage>
);
};

export default Select;

9. Página de Lista de Disciplinas Selecionadas
src/pages/List.tsx:

import {
IonPage, IonHeader, IonToolbar, IonTitle,
IonContent, IonList, IonItem, IonLabel
} from '@ionic/react';
import React, { useContext } from 'react';
import { DataContext } from '../contexts/DataContext';

const List: React.FC = () => {

const { selected } = useContext(DataContext);

return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Disciplinas Escolhidas</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
{selected.length === 0 && (
<IonItem>
<IonLabel>Nenhuma disciplina selecionada</IonLabel>
</IonItem>
)}
{selected.map((d, i) => (
<IonItem key={i}>
<IonLabel>
{d.name} ({d.semester})
</IonLabel>
</IonItem>
))}
</IonList>
</IonContent>
</IonPage>
);
};

export default List;

10. Testando o fluxo

1. ionic serve

2. Você verá a tela de Login. Clique em Entrar.

3. Menu: navegue para Cadastrar, preencha nome/semestre e salve.
4. Volte ao menu, vá em Selecionar, marque as disciplinas e confirme.
5. Por fim, vá em Ver Disciplinas Selecionadas para ver sua lista.
Pronto! Você tem um app Ionic + React sem templates prontos, com navegação de menu,
cadastro, seleção via checkboxes e listagem em telas separadas.