Author: M Abo Bakar Aslam

Convert Simple Webpages into ReactJs-TSX Environment

Before doing this assignment, you should have webpages design by HTML, CSS and JavaScript DOM. In this assignment, you will convert all pages into React JS TSX Environment.

For example, you created webpages according to following folder-structures and files

Project-Name/
│
├── index.html
│
├── cssFile/
│   └── globalStyles.css
│
├── sources/
│   ├── image1.png
│   ├── image2.png
│   └── all-images-here/
│
├── jsFile/
│   └── jsFunctions.js
│
└── pages/
    ├── login.html
    ├── signup.html
    ├── dashboard.html
    ├── services.html
    ├── contact.html
    └── navbar.html

After completion of this assignment, make sure one thing "Each component and page don't have more than two CSS classes" This condition, you also followed in creation of simple pages.

You can follow below steps to create solution of the assignment.

Step 1; Creation of React Application using TypeScript

You can create the application by using respective lesson. You can view the lesson again by click on below button.

Step 2; Notice Folder Structure of the Application

You will see folder structure just as below, when you will create the application by following above step.

app-name/
│
├── node_modules/
│
├── public/
│
├── src/
│   │
│   ├── assets/
│   │
│   ├── App.tsx
│   ├── App.css
│   ├── index.css
│   └── main.tsx
│
└── index.html

Step 3; Updating CSS Files

You will use simple external CSS as used in existing webpages. Don't use Tailwind CSS here

• Step 3.1. Open file index.css and remove all of its content. Don't delete the file. Just make it empty
• Step 3.2. Open file App.css and remove all of its content. Don't delete the file. Just make it empty
• Step 3.3. Copy content of globalStyles.css and paste into index.css

Step 4; Moving all images into the application

Create a new folder in public folder and set its name as images. Paste all images in this new created folder

Step 5; Components Creation

The component is the part of application that is called by many pages. For example, navbar is a component that would be shown on multiple pages. Similarly, footer is also a component. If your webpages has some header, then it would also be considered as component.

Create these components according to below folder structure. Notice followings in the structure

• All components' name as start with Capital Letter. Folder is created by same name as the component has.
• Each component's folder contian a file page.tsx

app-name/
│
└── src/
    │
    └── components/
           │
           ├── Header/
           │   └── page.tsx
           │
           ├── Navbar/
           │   └── page.tsx
           │
           └── Footer/
               └── page.tsx

Step 6; Pages Creation

The page is the part of application that would be displayed for a URL. For example, dashboard is a page. Similarly, login, signup, services and contact are also pages.

Create these pages according to below folder structure. Notice followings in the structure

• All pages' name as start with Capital Letter. Folder is created by same name as the page has.
• Each page's folder contian a file page.tsx

app-name/
│
└── src/
    │
    ├── components/
    │   │
    │   ├── Header/
    │   │   └── page.tsx
    │   │
    │   ├── Navbar/
    │   │   └── page.tsx
    │   │
    │   └── Footer/
    │       └── page.tsx
    │
    └── pages/
        │
        ├── Home/
        │   └── page.tsx
        │
        ├── Login/
        │   └── page.tsx
        │
        ├── Signup/
        │   └── page.tsx
        │
        ├── Dashboard/
        │   └── page.tsx
        │
        ├── Services/
        │   └── page.tsx
        │
        └── Contact/
            └── page.tsx

Step 7; Use React Router and Navigate between Pages using Navbar

As there are multiple pages, you will have to use Navbar to navigate between differnt pages. You can click on below button to see detail about navigation and react-router.

Above folder structure is NOT complete but it is just a part. There will be more files and folders but you can ignore them at this stage.