DEV Community: Mahlil Mahee

Using React Leaflet with React tutorial

Mahlil Mahee — Thu, 09 Feb 2023 18:27:18 +0000

Lets go through a short description of it

**What is React Leaflet ?

React-Leaflet is a library for integrating the popular open-source JavaScript library for maps, Leaflet, into React applications. It provides a React-friendly API for rendering maps, markers, popups, and other map-related components, making it easier to work with Leaflet in React. React-Leaflet also provides a set of higher-level components for working with common map use cases, such as adding markers and popups to the map, or rendering paths on the map. With React-Leaflet, developers can build interactive, mobile-friendly maps with ease, while still taking advantage of the full feature set offered by the Leaflet library.

I did not have credit card to work with google map Api then I found it to work, and it worked superb.
** How to set up React leaflet in react ?

To set up a React-Leaflet project, you will need to follow these steps:

Create a new project: You can create a new React project using Create React App (CRA) by running the following command in your terminal:

npx create-react-app my-app

Install React-Leaflet:

Run the following command in your terminal to install the React-Leaflet library:
npm install react-leaflet

Install Leaflet:

Run the following command in your terminal to install the Leaflet library:

npm install leaflet

Import the libraries in your React component:

In your React component, you need to import the necessary components from the React-Leaflet library.
For example, to use a Map component, you can import it like **this:

** import { Map, TileLayer } from 'react-leaflet' ** **

I have used here a basic map lets go through the codes here

And that's it! You now have a basic React-Leaflet map in your project. You can customize it further by adding markers, popups, and other Leaflet components.

Now let me help you with a common error most of the case I have deal with this

after following this steps you will see your map like this :

To solve this you have to do two things

First one , you have to import the css into your project root folder may be in index.js or app.js

Second one , you have to set the height and width of your mapContainer component .And then it will work fine

** How to add marker in React leaflet ?

To add a marker to a React-Leaflet map, you can use the Marker component provided by the library. Here's an example of how to do it:

In this example, the position variable is used to set the initial center of the map, while the marker Position variable is used to set the position of the marker on the map. The Marker component is added to the Map component, and the position prop is set to the marker Position variable.

This will add a marker to the map at the specified position. You can customize the marker further by using additional props, such as icon, popup, etc. I will try to discuss them later.

and now I will show the final result with these codes :

Finally , it is really useful and easy to use for showing maps on the webpage . I have a brief story about this framework and I will give credit to open Ai to help me write this story related to React leaflet and it's uses .

Once upon a time, there was a software engineer named Alice who was building a web-based application for a tour company. The company wanted to allow customers to explore the locations of their tours on a map.

Alice heard about React-Leaflet and thought it would be a great fit for the project. She quickly got started by setting up a new React project and installing React-Leaflet and Leaflet.

She created a new component for the map, and added a basic map to the component using the Map and TileLayer components from React-Leaflet. She then added markers for each tour location using the Marker component.

Next, she wanted to display information about each tour location when a user clicks on the marker. She used the Popup component from React-Leaflet to create a popup for each marker, and displayed information such as the tour name, description, and price.

The customers loved the map and found it very helpful in selecting a tour. The tour company was impressed with Alice's work and asked her to add more features to the map, such as a search bar to search for specific tours and a legend to show the different types of tours.

Alice added these features, and the map became even more user-friendly. The tour company was thrilled with the results, and the customers loved using the map to explore and select their tours.

And so, the story ends with Alice being praised for her excellent work using React-Leaflet to build a user-friendly and interactive map for the tour company.

How Does JavaScript Work ???

Mahlil Mahee — Wed, 08 Feb 2023 06:37:09 +0000

In a short JavaScript work asynchronously with help of event loop in a single threaded environment to run non stop in the browser .

Now going To explain it more deeper .

Basically JavaScript run in the browser with the help of a interpreter which interprets each line of JavaScript code according to the given order and execute it in the browser .JavaScript is a high level , dynamic and interpreted programming language which is widely used for building web apps though it has a wide range of using field. JavaScript can interact with the DOM (document object model ) to dynamically modify the content , structure and styles of the page . When a user interact with the page , JavaScript respond to events such as clicking on a button and updating the DOM and executing code .The code is executed in JavaScript engine which are mostly in-build with the browsers, which parses and runs the code . JavaScript
can also make network requests to fetch data from a server allowing for dynamic and up to date information to be displayed on the page .

what is JavaScript event loop? want to here a story from me ?

Once upon a time, there was a busy little town called JavaScript Land. The town was always bustling with activity, as the inhabitants went about their daily tasks. One day, the mayor of JavaScript Land realized that the town was growing rapidly, and the number of tasks that needed to be completed was increasing every day.

To keep up with the demand, the mayor decided to create a new system for managing all the tasks in the town. He called it the "Event Loop." The Event Loop was designed to handle all the tasks that needed to be done in the town, one by one.

Each task in JavaScript Land was placed in a queue, and the Event Loop would work its way through the queue, completing each task in turn. When a task was completed, the Event Loop would move on to the next task in the queue.

At first, things ran smoothly in JavaScript Land. The Event Loop worked efficiently, and the inhabitants were happy with the new system. However, as time went by, more and more tasks were added to the queue.

The Event Loop started to get bogged down, and the townspeople grew frustrated. Some tasks were taking much longer to complete than they should have, and others were being pushed aside and forgotten.

The mayor of JavaScript Land realized that he needed to find a solution to the problem. He decided to prioritize certain tasks, so that the most important ones would be completed first. This way, the townspeople could get back to their daily tasks as quickly as possible.

And so, the Event Loop was improved, and JavaScript Land ran smoothly once again. The Event Loop continued to handle all the tasks in the town, one by one, making sure that the most important tasks were completed first. And the townspeople lived happily ever after.

So , did you understand the main theme of this story event loop is mechanism which helps JavaScript to interpret one piece of code at a time in an asynchronous way to run smoothly in the browser.

Now lets explain the asynchronous term here with a new story :::)))

Sure, let's consider a real-life scenario to understand asynchronous processing in JavaScript.

Imagine you're at a fast-food restaurant and you place an order for a burger and fries. You have to wait for your food to be prepared, but you don't want to stand around and do nothing while you wait. So, you decide to use the time to do something else, like browsing your phone or reading a book.

This is a classic example of asynchronous processing in real life. While you wait for your food to be prepared, you can do other things, and you'll be notified when your food is ready.

In the same way, asynchronous processing in JavaScript allows you to carry out long-running tasks in the background, without blocking the main thread of execution. So, your website or application can continue to respond to user interactions, even while a task is being processed in the background.

This makes your website or application more responsive and efficient, and your users won't have to wait for long-running tasks to complete before they can continue using your website or application.

That is all for today, you see how JavaScript had evolved to serve us more efficient and good user experience in this digital world as he knows time is valuable, so he saves a lot of time helping the website to be more efficient.

Building my First Chrome extension with React js

Mahlil Mahee — Tue, 31 Jan 2023 03:05:07 +0000

Suddenly a thought come in my mind to see how people are building chrome extensions for themselves . I searched on google then read some blogs and after that I got my hand dirty on making a chrome extension for my brain dopamine rush .

It is really simple to build just a few process we need to follow here to make any website or web-app into a extension.
The important thing we need to do here is to change our manifest.json file with the codes I am writing here

It is a basic version so You will not have any problem to understand it lets explore what I have written here

There we have manifest version it should be an integer and a name and short-name for the extension ,also we have a description here for the extension .
then here comes the action field and inside here we have key named "defauld_popup" and the here we need to give the name the html file we want to show as a chrome pop-up here . And a logo for the pop-up as you see .

and wait our 80% work is finished here you can add more fields in the manifest.json according to the need of your app.

Other important things that we can do with manifest file but not neceassary for this project
1.Extension name
2.Description
3.Version number
4.Permissions required by the extension
5.Background scripts to be executed
6.Content scripts to be injected
7.Icons for the extension
8.Popup pages for the extension
9.Options pages for the extension
10.Browser action or page action
we can take any permision that we need for our web-app.

Now move forward to the next level in the manifest file I have linked the [index.html] file as I am using React and all my Main data is linked with that html file .

Before publishing it to the chrome first create the build folder here to deploy it .

with the command ## npm run build

then go to *### chrome://extensions/ *

switch to developer mode and there you will see an option name *Load Unpacked * go there and deploy the build or dest folder that you have created for your project .

note :

If you are not using React then you donot need build folder just simply create a manifest file and add all the commands there and deploy it .

then you will see your extension there like this

go to the extensions tab and pin your extension then open it . As I have created a simply quote generator with react it will show me the website as a extension .

Note : Every time you make changes there you have to make the build folder every time and had to reload the extension to see the changes . I will bring more detailed blog about chrome extensions . Till then try the simple and basic one

Take full-shot of your Websites

Mahlil Mahee — Wed, 04 Jan 2023 02:18:19 +0000

As a developer or designer everyone must need a tool to fully capture their design to show others. It might sound easy but not for the software available in the market mostly are paid .

And for that I make a way out for myself with a chrome extension which is fully free to use .

with more than 5M users its a really free to use productive tool .
you can find it "GoFullPage - Full Page Screen Capture" on google just write and it will appear than add it to your chrome . That is all a problem is solved with a free tool !!!!

Deploy Node App in Vercel

Mahlil Mahee — Sun, 01 Jan 2023 15:28:19 +0000

After the finishing of the era of Heruku free tiar , I had to find out a hosting platform for deploying my server codes or backend codes. I have tried cyclic, render, railway and vercel .
Among them Railway do not allow us to host our app live more than 21 days in the free plan .

And Render allow us this feature but it goes sleep in every 15 minutes of inactivity of the api we have called.

For that I loved using the free version of Cyclic and Vercel.

Today I am going to discuss about how to deploy node app in the vercel and Next day I will be showing the same method for Cyclic.

Check out the process donot miss any of them otherwise it will make you Mad like me :

1 . We need to export our node file so that others can access the files or codes from the file .
just write the code at the end point of your node js file
module.exports = app;

Then the most important things to do is adding a vercel.json file in the root of your project . And write down the following code their in the file

and the file structure should be like this

Now make a github repository and push all the codes there . And go to vercel and log in with github it will make easiar for you to find all the repository you added and finding the needed one .
Now go to dashboard and click on add new select project and then select the github repository which contain all of your project files .

Then it will show you the project configuration page . You donot need to add anything there . But If you have env variable then their is a section for you where you can add them

And then deploy . And it will take you to the project page .There you will get a domain section and click on them it will take you to the live site of your project .

That is all for today .Deploy you site and share with your clients .

Deploy your webapp in Netlify

Mahlil Mahee — Wed, 28 Dec 2022 17:22:54 +0000

As a developer we need to show our works to different persons for that we can not use our local server to show them.That is the time we need a platform to host our website .And hosting our website we can easily share our webapp with anyone who wants to see. Though there are a lots of hosting platform avaiable at the moment paid and free , I am gonna share the easiest one I think and Thats is Netlify .

To host a website into netlify there are also a few paths exist and one of them is to simply drag and drop !!!! hurrah !! your website is live now .

To host a website we need some procedure to follow and it is really easy . Lets get start

We can not drag the whole webapp there it will take a huge space and memory . For that we need something called build or dist folder .

And we need to use the command : npm run build

Then you will see that a 'build' or 'dist' named folder has been created at the root of your project .

3 Now go to the netlify website and just take the 'build' or 'dist' folder from your application and just drop it here . Just wait for a few seconds and your website is live.

It's always seems impossible until its done .---Nelson Mandela