Skip to content

Latest commit

 

History

History
115 lines (89 loc) · 3.39 KB

README.md

File metadata and controls

115 lines (89 loc) · 3.39 KB

ReActivity

Repository for Reactivities using .Net Core, React (with Typescript), Mobx

Branch: API

Create project solution File (eActivities.sln)

  • dotnet new sln

Create sub-project's

  • dotnet new classlib -n Domain ***Main ClassLib project
  • dotnet new classlib -n Application ***Business Logic Project
  • dotnet new classlib -n Persistence ***Database Related
  • dotnet new webapi -n API ***API Related

Create sln for all Sub-project's

  • dotnet sln add Domain/
  • dotnet sln add Application/
  • dotnet sln add Persistence/
  • dotnet sln add API/

Project(s)

  • Domain/Domain.csproj
  • Application/Application.csproj
  • Persistence/Persistence.csproj
  • API/API.csproj

Reference between sub-Project's and Main Project

  • /reactivities/Application$ dotnet add reference ../Domain/
  • /reactivities/Application$ dotnet add reference ../Persistence/
  • /reactivities/API$ dotnet add reference ../Application/
  • /reactivities/Persistence$ dotnet add reference ../Domain/ References

Branch: Client

Create React Client side application

  • npx create-react-app client-app --template typescript

Install Dependency

  • npm add semantic-ui-react
  • npm i axios

Branch: Crud_react_core

Part-1 (API dotnet core)

  • Adding activity entity
  • Add nugetPack(mediatr.extensions.microsoft.dependencyinjection)
  • Create activity API controller
  • Adding Details,Create,Edit,Delete Handler
  • Dealing with boilerplate code in our Handlers

1 2 3

The Clean Architecture for Mediatr

References

Part-2 (React)

  • Folder structure (React)

  • Getting list activities from API

  • Adding activity Interface in TS

  • Adding Navigation Bar (navbar)

  • Styling react components

  • Adding activity dashboard

  • Creating an activity list

  • Adding the activity Details component

  • Adding the activity Form component

  • Selecting an Individual activity

  • Adding Edit Mode

  • Handling form Submission

  • Adding Create activity

  • Adding Delete functionality

    Install Dependency

    • npm install uuid
    • npm install @types/uuid

Branch: Reactstructure

  • Update API route: Route("[controller]")

  • Create an agent.ts (Axios support)

  • Adding delay our API(activities) method

  • Adding Loading component

  • Adding loading indicator for submission or delete Data

  • Setting Up a Mobx Store (activityStore.ts)

  • Adding async and await in our method

  • Refactoring activity List

  • Refactoring (Create, Delete, Edit) method

  • Enabling Mobx strict mode

    Install Dependency

    • npm install mobx mobx-react-lite

Branch: React route

  • Setting up React Router

  • Adding NavLinks

  • Getting activity from API

  • Moving Home Page outside

  • Scrolling to the top of the page

  • Styling the activity list

  • Styling activity details page (Header, Info, Chat, Sidebar)

  • Styling activity Form

  • Styling Home Page

    Install Dependency

    • npm install react-router-dom
    • npm install @types/react-router-dom