Express for beginners

Tanvir Hossain Fahim — Thu, 13 Jan 2022 16:01:07 +0000

What is Express: Express in a node js framework which provides huge features to build web applications. Based on a different route, URL or HTTP call it provides different calls or actions. Besides that, it gives a middleware facility to respond to HTTP requests.

Installation process:

Node install: Install node.js from windows downloading software and install it. Otherwise can install through chocolatey which is the command-line package manager and installer for Windows software.

If already installed you can upgrade node.js to its latest version to get the latest features and support.

Nodemon install: Install NODEMON globally.

Project Creation Steps:

Create Project: Make a new directory for you server-side project.

Change directory: Go to the new created directory using it’s given name.

Create package: Create environment for project package files.

Install dependencies: For MERN projects install initial all dependencies.

Add dependency: Add package.json scripts dependency if any are missing.

Express Run: Create a file name index.js. Then require express, app and set port at process.env.PORT or 5000. Check the server by request and listen to the response at the command line.

MongoDb setup:

Set initial info: To avoid any port connection error require cors. To secure your mongodb username, password, firebase private key create a .env file and require dotenv. For using mongodb requires MongoClient. For removing any cors error user cors and get data on json format use express.json().

.env file: Set mongodb network access and set IP address. Create database access by creating username and password. Now create .env file to keep username and password securely.

Connect MongoDB: Add mongo connection uri link and convert username and password by template literal. Also connect with the client using the async await function.

Set Database collection: Depending on different header requests create different API route into try block and apply different actions depending on client api request. Create database and database collection for specific data.

CRUD Operation:

Create/POST request: For header post request from client-side to server-side when post route matches. When the request matches the action occurred like inserting the post data into the database.

Here, insertOne() inserting the data to the database collection.

Read/GET request: For header get a request from client-side to server-side when getting route match. When the request matches the action occurred like getting the data from the database.

Here, find() will search or find the data to the database collection.

PUT request: For header put or update request from client-side to server-side when getting route match. When the request matches the action occurs like if the information is available then updates into the database. otherwise if not available then insert into the database.

Here, filter finding the specific id, options indicate is upserted true or false and updateDoc() gets the updated data. Finally updateOne updates data to the database collection.

DELETE request: For header delete request from client-side from server-side when getting route match. When the request matches the action occurred like deleting the information from the database.

Here, deleteOne() deletes the specific data from the database collection.

Core Concepts of React

Tanvir Hossain Fahim — Wed, 12 Jan 2022 15:52:04 +0000

JSX: In React JSX is the syntactic sugar of javascript. Where it looks like HTML syntax but actually it’s not the HTML. Under the hood, it used babel to convert HTML syntax into javascript.

State: In react, the state is used to keep the component updated after any changes are applied and update it. The state is managed by the component when anything changes on the component.

Here setCount updates the count and it is maintained by useState hook.

Props: Props are the value of the component which is not maintained by the component itself rather it shows in the component or is passed to another component.

Here, the count is the props that are used in the component using JSX.

Hooks: Hooks are the function that is used in react to maintain or make it easier to update the state or give different functionality to make an entire application easily with it. It is used in the functional components. useState, useEffect, useParams, useRef, useLocation, useHistory, useRouteMatch, useContext are some of the commonly used hooks. There are also custom hooks available that take hooks use case to the next level like logic and view shareable like props in custom hooks.

useState: useState update the state value if any change is applied. The updated state is then used for the component.

useEffect: If any types of side effects are applied frequently in this case useEffect is applied. Appling dependency on useEffect hook we can frequently update the specific state rather than updating the whole state.

useContext: useContext is used to make props passing highly easier. When props drilling become much complex the useContext makes props pass simple and organized way from the root. Where any component can use any exported props easily throw it.

useParams: Depending on route dynamic id matching it matches and goes to the route and shows the component.

useLocation: To work with query string parameters useLocation is generally used. It mainly gets pathname or state

useHistory: It is used to navigate the location from and pass to the new location using push. Other tasks are also applied depending on history action.

useRouteMatch: If any match the object find then access is provided by useRouteMatch. Depending on route match it provides the component.