Let's create a Clean React Js Project with Typescript And Mongez Part I: Introduction

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 for windows.
• Yarn 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

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.

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

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

Used Mongez Packages In This series

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