Forem: Hammad Hassan

Series: How to structurize React Apps (Ep: Beginner Level)

Hammad Hassan — Mon, 19 Apr 2021 12:08:46 +0000

For any web or mobile application project, it is very necessary to structurize your code to possibly the best level, this not only does your code look clean but it also make other developers to understand it better when it will be structurize in a good manner. In this How to structurize React Apps series I will be sharing the best possible practice to create a good structure of your React Application with 3 episodes of Beginner, Intermediate and Advance level with one real world web application.

So let's start our first episode for beginner level react programmers by making a counter app. So, go to anywhere in your machine directory where you want to create your project and run the command npx create-react-app counter-app. It will create the default boiler plate provided by the react team.

In the above Image you can see that, I have created a very simple counter application in my App.js file and have put the UI and logic code in the same component. Does this sound good to you? of-course NOT! So first thing here we should do to separate our UI and logic components to make them more readable and maintainable.

In the above two images, you can see that I have separated my UI component of App.js from my logical component of Counter.js, which is something good to do as compare to our default boiler plate code but not the BEST PRACTICE.
So, what should we do to complete our article is to create the separate folders for UI which you could call Presentational components and may name them as Containers and other folder for logical code which you may simply call Components. It is also need to note that I've written my UI code in my main App.js file which is not good and what mainly should be in our App.js file that would be discuss in my next Intermediate level post.

In the above Image you can see that I have created two separated folders named as Containers for UI and Components for logical code which is now making easy to understand the project structure.

Here in the above image you can see that in my CounterUI.js file under Containers folder, I have put only my UI code.

Here in the above image you can see that I have put only my logical code in my Counter.js file under Components folder.

And then I have just imported my CounterUI.js file in App.js file and now it is looking much cleaner and better to understand.

Key Notes

1) Don't use your logical and UI code in the same file.
2) Separate them into their respective folders to better
understand your react app structure.

So, here I will be ending my article which was for beginner level react programmers who don't have any clear idea on how to structurize their small react apps.

Complete code link of sandbox

Getting Started Guide for Restful API using Node, Mongo & Express

Hammad Hassan — Thu, 03 Dec 2020 05:06:13 +0000

Before starting our guide let me introduce myself. I am Hammad Hassan a front-end (React) Developer.

Pre-Requisites

I am assuming that you have some basic understanding of JavaScript and have already installed NodeJS too.

First you have to create a folder and run a command of npm init to create our package.json file.

Packages we need in this guide.

const express = require("express");
const mongoose = require("mongoose");
require("dotenv/config");
const bodyParser = require("body-parser");

So all you need is to install these packages by running a following command
npm i express mongoose dotenv body-parser nodemon

After installing these packages, You have to make an app.js file (You can give any name) and add the following code in it.

    const express = require('express');
    const app = express();
    app.get("/", (req, res) => {
    res.send("Hello from Node js");
    })
    app.listen(3000);

Now, go to your terminal and run node app.js

Here we are importing our express server package and we are storing it in our app variable.
Then app.get method is simply stating our route with second argument of callback function in which we are sending what we want to print on our browser.
app.listen(3000) is telling us on which port we want to see our server has responded. (Instead of 3000 you can name it whatever u want).
Now, open your browser and hit http://localhost:3000 as url and you should see "Hello from Nodejs" printing up in your browser.

Creating GET and POST API's

Now, when you have learnt how to run the server in NodeJS, let's see how to create the the API's in NodeJS. We will be building an API to GET and POST some random data on to the server.

Models

Now, create a new folder in your root directory name as models and in this folder create a new file of Posts.js (you can give any other name you want) and in this file add up the following code.

const mongoose = require("mongoose");

const PostSchema = mongoose.Schema({
  firstname: {
    type: String,
    required: true,
  },
  lastname: {
    type: String,
    required: true,
  },
});

module.exports = mongoose.model("Posts", PostSchema);

Here, in our first line we are importing mongoose (a package, where data will be store).
Then, we are creating a method, named as PostSchema (give name of whatever you want) and in this method we are creating an object which is classifying the Schema (content) of our API.
After that we are simply exporting the file so we can use this PostSchema method in our other files (components) too.

Routes

Now comeback to your root directory and create a new folder name as routes and then create a new file in this folder name as posts.js (give whatever name you want) and in this file add up the following code

const express = require("express");
const router = express.Router();
//importing model
const Post = require("../models/Posts");

//Get the posts
router.get("/", async (req, res) => {
  try {
    const getPosts = await Post.find();
    res.json(getPosts);
  } catch (error) {
    res.json({ message: error });
  }
});

//Submit a post
router.post("/", async (req, res) => {
  const newPost = new Post({
     firstname: req.body.firstname,
    lastname: req.body.lastname,
  });

  try {
    const savePost = await newPost.save();
    res.json(savePost);
  } catch (error) {
    res.json({ message: error });
  }
});

In first line we are importing the express server.
Then we need a router method from express server so in second line we are creating a new variable name router and storing our express.Router() method in it.
In 3rd line we are importing our Posts.js file from models folder so we can access the schema of our API we had created in that file and storing in the Post constant.
Get Posts: Then, we are declaring a router.get method. In this method we are taking two arguments. First is specifying the route of the API and in second we are declaring a callback with two parameters of req (request) and res(response).
After that, we are declaring try/catch statement.
In try block we are using javascript's find method to get all the posts we are getting from our Post model (imported above), then converting it into json format and storing it in the getPosts variable.
In catch block, we are catching the error, only if try block fails to execute successfully.
Submit new Post: To submit a new post to our server, we are using router.post method, here we are also taking two arguments. First is specifying the route of the API and in second we are declaring a callback with two parameters of req (request) and res(response).
Then, we are making a new variable name as newPost. In this, we are creating an instance of the object we had created in our Posts.js file in (models folder).
After that, we are declaring try/catch statement.
In try block we are using javascript's save method to save our new post in our mongo database from our newPost variable we just declared above and converting it into a json format.
In catch block, we are catching the error, only if try block fails to execute successfully.

Here, we are done with our GET and POST API requests. Now, just comeback to your app.js file and add these lines of code.

//Importing routes
const postsRoute = require("./routes/posts");

//Adding middleware
app.use(bodyParser.json());
app.use("/posts", postsRoute);

//connect to DB
mongoose.connect(process.env.DB_CONNECTION, { useNewUrlParser: true }, () => {
  console.log("Connected to DB");
});
app.listen(8080);

Here first we are importing the route file.
Then we are adding middleware. A middleware is actually a function that can access the request and response objects.
app.use(bodyParser.json()); means whenever route request will execute a bodyParser will run.
app.use("/posts", postsRoute); means whenever we are on posts routes then this middleware will be called.
Then, we are connecting our server to mongo DB. That topic is a bit lengthy so I haven't covered it here. You can create your free account to access mongoDB here at this: Link.

So, here we go. We have successfully made our first API in NodeJS.
If you like this article then hit a favorite button to give it a big cheers up ❤

Generate Release APK (app-release.apk) in React Native for Android

Hammad Hassan — Wed, 17 Jun 2020 18:32:28 +0000

Here I'm writing some very simple and easy steps to generate release APK for android that is also used to upload and publish to play store.

Step One

First of all you have to generate your store key file. So, go to your
C:\Program Files\Java\jdk1.8.0_251\bin
folder and open command prompt (Open as an administrator that is a best practice) and paste this below line

keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize 2048 -validity 10000

Now you will be asked some simple queries like password, your organizational name etc. Give them an answer. After completing this process you will see your generated store key file at your

C:\Program Files\Java\jdk1.8.0_251\bin
folder.

Step Two

Now come to your android/gradle.properties and setup your gradle variables

MYAPP_RELEASE_STORE_FILE=your_keystor_ename.keystore
MYAPP_RELEASE_KEY_ALIAS=your_keyalias
MYAPP_RELEASE_STORE_PASSWORD=your_pass
MYAPP_RELEASE_KEY_PASSWORD=your_pass

Step Three

Now you have to come in your andoid/app/build.gradle and setup your signingconfig

android {
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
signingConfig signingConfigs.release
}
}
}

Now you are all done. Go to your android folder and generate release apk by this command

gradlew assembleRelease

Let me know if you get any sort of error! I will be glad to helping you out! Thanks

Html Webpack Plugin: Error: Child compilation failed: (in Reactjs)

Hammad Hassan — Tue, 03 Dec 2019 17:53:56 +0000

So yesterday, I was building some application in react and initially my application was just working fine but when I installed material UI framework with its npm command, npm install @material-ui/core, I got the error Html Webpack Plugin: Error: Child compilation failed: with so many other errors were showing.

I started to google this error and got just a few posts about it and no solution helped me. I also posted my question on StackOverflow (https://stackoverflow.com/questions/59144633/i-am-getting-an-error-of-html-webpack-plugin-in-reactjs/59145436#59145436) and someone suggested to update core-js-compat npm package.

Before implementing that suggestion I found out my Node.js version is 12.13.0 and version 12.13.1 is already released. So, I just updated my Node.js and my application is now working just fine and this error has been removed.

So, If you ever get this error while building your react application you should check your Node version and update it to its latest version. Thank You