Let's create a Clean React Js Project with Typescript And Mongez Part I: Introduction
Tags: react, typescript, mongez
Published: 2022-09-02 14:53:06

---
title: Let's create a Clean React Js Project with Typescript And Mongez Part I: Introduction
published: true
description: 
series: React Mongez
tags: reactjs, typescript, mongez
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

This article is an introduction to work with Mongez (An Arabic word means the booster) Packages and react js to write a clean, structured code.

Because there are a lot of things happen here, i'll make it a series of articles so you can follow up what's going on with me step by step.

## What are Mongez packages

Mongez Packages are packages with Organization `@mongez`, it provides some good utilities for nodejs projects and other packages for React Js Exclusively.

The packages are meant to be built to work together and standalone, in these series will illustrate how it works together, alternatively, you are free to visit the documentation of each package solely.

## What you'll need before you get involved here

- Basics Of React Js.
- Basics Of Typescript.
- VSCode
- Terminal for linux/mac and [Git Bash](https://git-scm.com/downloads) for windows.
- [Yarn](https://yarnpkg.com/cli/node) As Package Manager.

### Let's getting started

We'll work with `React 18` (Latest version of React js in the time of writing this article) but it works also on React 16 and 17 as well.

Make sure you've installed [Prettier Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

All set now and we're ready to start.

## Create the App

Open your terminal and write the following command to create a new project.

`npx create-mongez-app react blog`

If a prompt message popped to ask you if you're sure to install for the first time, accept and write `y` and it will start installing the project.

Another message will appear to ask about your desired styling system wether it is sass `Using sass package` or Styled Components `Using Emotion Styled` or Both, select your preferred one then hit Enter.

![Style Selection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t1v073yw00mzc0ugzrv.png)

Once the installation is done, you will see the following message:

![Successful message of creating the project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lko8tpet8bhfd6h22b5h.png)

Now let's go to the `blog` directory and open it in the code editor or write `cd ./blog && code .` in the same terminal to open the project in vscode.

> Once the installation is done, `CMA` will initialize an empty git and make an initial commit.

When you start the project using `yarn start` you should see the welcome home page

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9botpcw40l3i8wlmlrj.png)

### Used Mongez Packages In This series

- [Mongez React (MR)](https://github.com/hassanzohdy/react). The React Application Manager that links everything together.
- [Mongez React Router (MRR)](https://github.com/hassanzohdy/react-router) Simple yet powerful Router navigation system without the need to write JSX to define your routes.
- [Mongez Cache](https://github.com/hassanzohdy/mongez-cache) Simple Cache manager for local storage, `can be used with/without react apps`.
- [Mongez User](https://github.com/hassanzohdy/mongez-user) Application User handler for auth and profile data, `can be used with/without react apps`.
- [@mongez/http](https://github.com/hassanzohdy/mongez-http) Axios Based Package to manage ajax requests in more structural way, `can be used with/without react apps`.
- [@mongez/localization](https://github.com/hassanzohdy/mongez-localization): An i18n package for translation, `can be used with/without react apps`.
- [@mongez/react-form](https://github.com/hassanzohdy/mongez-react-form) Headless UI Form Data Manager.
- [@mongez/react-helmet](https://github.com/hassanzohdy/mongez-react-helmet) A React component to manage web page metadata.
- [@mongez/validator](https://github.com/hassanzohdy/mongez-validator) Simple Validation System, `can be used with/without react apps`.
- [@mongez/supportive-is](https://github.com/hassanzohdy/supportive-is) A simple utility to validate data types of values, `can be used with/without react apps`.
- [@mongez/reinforcements](https://github.com/hassanzohdy/reinforcements) A lightweight package with string, object and array utilities,`can be used with/without react apps`.
- [@mongez/events](https://github.com/hassanzohdy/mongez-events) An Event Driven Architecture package to work with events, `can be used with/without react apps`.
- [@mongez/dom](https://github.com/hassanzohdy/mongez-dom) General purpose utilities to work with dom, load fonts and so on, `can be used with/without react apps`.

Now we're done with the installation, feel free to try the project and have a look at the code and files until we meet again with the **second article in this series**, [The Project Filesystem Structure](dev.to/hassanzohdy/lets-create-a-clean-react-js-project-with-typescript-and-mongez-part-two-2022-28p5-temp-slug-2250195?).