DEV Community: Harshit Aditya

Setting up React Native environment on Windows

Harshit Aditya — Thu, 29 Jun 2023 06:03:29 +0000

You wanted to get started with React Native but stuck during the installation phase. Don't worry this blog will cover all the steps from installing necessary tools to running your first React Native application so that you get started with your mobile development journey ✨.

What is React Native?

If you are reading this blog then you must be knowing what React Native is, but if you don't know, then nothing to worry we have covered a simple definition of React Native in the next paragraph.

React Native is a UI library based on the React.js library for creating cross-platform mobile applications. It is a perfect choice for mobile developers already familiar with React.js. Setting up React Native environment becomes tricky if not done correctly.

There are two ways through which we can create React Native applications:

Expo CLI: Expo CLI provides predefined components which makes the whole developing process convenient. We can create React Native applications with expo within minutes. It's very fast compared to React Native CLI.

React Native CLI: React Native CLI is the pure way of creating React Native applications provided by the React Native team. It does not come with predefined components, we have to build all the components by our own. React Native CLI provides easier integration of source code with native source code. However creating React Native applications with React Native CLI is not as simple as creating applications in Expo.

In this blog, I have shared my experience on setting up React Native environment on my local machine using React Native CLI where I have also shared some errors which got me stuck for a while.

So lets get started ! ⚔️

1. Installing Node.js

Node.js is an open-source, cross-platform JavaScript runtime environment which is used for accessing server for JavaScript applications.

Steps to install Node.js:

Visit Node.js website. There are two versions, "Recommended for Most Users" and "Latest features". You can download any of these versions but I will recommend you to go with the "Recommended for Most Users" version as it's the most stable version.
After downloading, open .msi file (downloaded node.js installer) and just click on next button.

To check whether Node.js is correctly installed or not, open Command Prompt and type:



node --version

after executing this command if it shows the version then Node.js is successfully installed on your computer.

2. Installing Java Development Kit (JDK)

Steps for installing JDK:

Open JDK download website and download the MSI Installer version.

Open the installer and click on the Next button wherever it appeared.

JDK is now successfully installed on your computer. Now copy or save the path where JDK is installed, we will need this later in setting up the environment variables. For example path can look like:

C:\Program Files\Java\jdk-19

3. Installing and setting up Android Studio

Android Studio is a very important software for running React Native applications as it will provide emulator for testing and checking the progress of our application.

Installing Android Studio

Steps for installing Android Studio:

Visit Android Studio official website and click on the download button and also accept all terms and conditions, after this Android Studio will start downloading on your system.

Open Android Studio installer and just click on next button whenever it appears.
Android Studio is now successfully installed on your computer.

Setting up Android Studio

Steps for setting up Android Studio:

Open Android Studio, a welcome screen will appear. Click on more actions and then click on SDK Manager.

On SDK Platforms and SDK Tools panel click or tick on all the platforms and tools which are marked in blue color and then click on apply button which is on the down side. Clicking on apply button installs all the marked platforms and tools for Android Studio.

Also please copy or save the "Android SDK Location" path, there will be a major use of this in setting up the environment variables. Android SDK Location is listed on top of SDK Manager menu.

Now click on Virtual Device Manager and then click on "Create Device" button. This will create an emulator for testing your React Native applications.

Now select a phone of your choice, let us select Pixel 6 Pro and then click on next.

You can select the system image of your choice and then click on next.

Leave everything as default and then click on finish.

Now your new Pixel 6 Pro device is now ready. Click on Play button to run the device. Running the device for the first time may take some time to start.

Now your emulator is currently up and running 🔥

I have not show the whole installation process of node.js, JDK and Android Studio as I think it's simple to install. You just need to click on next whenever it appeared

4. Setting up the environment variables

Environment Variables as the name suggest is used to store the values or data that can be directly used by Operating System.

We need to setup environmental variables for JDK and Android Studio.

Steps for setting up the environmental variables are:

Click on Search bar and type "Environment" and you will see "Edit the system environment variables" and then click on it.
Now click on Environment Variables.
Now for both user and system variables click on New and enter the variable name as JAVA_HOME and variable value as the location of JDK and then click on OK.

Environment variables for JDK is successfully setup.

Before setting up the environmental variables for Android Studio, open the SDK location of Android Studio and after opening it we can see there is a folder which is named "platform-tools". Copy its location, we will be needing it for setting up the environment variables for Android Studio.

Now for both user and system variables click on Path and then click on Edit

Now click on New and then write "platform-tools" location and SDK location and then click on OK.

Now for both user and system variables click on New and enter the variable name as ANDROID_HOME and variable value as the location of Android Studio SDK and then click on OK.

Environment variables for Android Studio SDK is successfully setup.

5. Creating and Running React Native Application

Now we are ready to create and run our React Native application in the following steps 🚀:

Open a new folder and open Command Prompt or any terminal which you use.

Now write the command:



npx react-native init newproject

where newproject is name of the project, you can keep any name of your choice following the naming conventions.

Now execute the command.

After executing the command it will start downloading template dependencies and all the other necessary files for the application.

Hurray, we have successfully created a React Native Application 🥳.

Now open the newproject folder and open the Command Prompt or any terminal (on the newproject location) you use and run the command



npx react-native run-android

📝Before executing the above command it is recommended to open Android emulator (Virutal device) first which will open the app in fastest way possible.

Metro bundler will open after executing the above command. Just press a and the application will start running on the Android emulator.

🚨After running the above command if you are facing an error: "Failed to install the app. Command failed with exit code 1: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception.". This means that the environment variable ANDROID_HOME is not set properly, check whether you have set the environment variable properly or not. If you have set up the environmental variable correctly and still facing this issue then nothing to worry, you just need to restart your system and run the above command and open the emulator again. It will surely work.

Running the above command for the first time will take some time for the application to open. After the first time, it will hot refresh and wont take much time in opining the application.

Hurray ! We have successfully run our first React Native application 🎉.

Although you can find tutorial for setting up React Native environment from its official documentation. I will highly recommend you to do check that out. But I still faced some error while setting up React Native environment on my local machine, so this was my main reason behind writing this blog.

I hope this blog has saved you a lot of your time in setting up React Native environment on your Windows machine.

I wish you very all the best for your React Native journey 🫂👍.

At last, I would like you to thanks for reading my blog, if you find this blog useful then do share the blog and give it a like. If you have any queries or wanted to have a chat with me then feel free to contact me on Twitter @HarshitAditya1. You can follow me👍 there I do sometimes post tweets about Web Development. Also please feel free express your thoughts and feedback about this blog. I would love to read them.

Understanding CMS using Sanity

Harshit Aditya — Sat, 29 Jan 2022 15:17:50 +0000

Suppose you are a developer and you want to create a blogging site like DEV, Medium or a social media site like Facebook, Instagram then the most challenging part you are going to face is how are you going to code the post part where users publish the post/article. Here comes the CMS to rescue. In this blog, we will discover what a CMS is, why was it made, what is a headless CMS, examples of CMS including a simple demo on how you can use a CMS using Sanity.

What is CMS and why it was made?

In the early days of Web Development, developers faced a lot of issues in managing content which gave the rise of building CMS. CMS refers to Content Management System. It is a tool that is used to manage content which contains editing, creating, and publishing content from various authorized users. In simple words, CMS is a tool that is used to create a website without having extreme knowledge of programming, or even if you don't know programming you are good to go with CMS. Content of CMS is stored in a database. Using a CMS is very user-friendly, allows multiple users to manage the content, improves site maintenance, and much more.

How CMS is made?

CMS is made up of two applications :

1. CMA (Content Management Application)

CMA stands for Content Management Application. In simple words, CMA is the frontend of CMS. CMS gives a lot of templates that help in managing and editing the content.

2. CDA (Content Delivery Application)

CDA stands for Content Delivery Application. CDA is the backend of CMS. It helps the content to get stored in the database and also it publishes the content in the platform and helps it to reach the viewers.

Examples of CMS

WordPress

WordPress is one of the most popular CMS currently used. You can create a full working website using WordPress.

Drupal

Drupal is an open-source web CMS that is written in PHP. It acts as an open-source backend framework for CMS.

Sanity.io

Sanity is a headless CMS that is best for users for collaboration of the project. It is a very powerful platform for generating and modifying content. We will use Sanity.io to show the working of CMS later in this blog.

✏️Note: Headless CMS is a backend-only CMS where content is accessible through APIs.

Strapi

Strapi is a headless CMS that is based on node.js. It's highly customizable and self-hosted.

GraphCMS

GraphCMS is a headless CMS this is based on GraphQL API. It's highly lightweight and it provides a lot of extensions for customizing the UI (User Interface).

There are many more CMSs available the once mentioned above are some popular ones.

Using CMS through Sanity.io

In this section, we will show the simple working and setting up of CMS using Sanity.io. Sanity provides a lot of templates to demonstrate its system and workings. We will learn how to use Sanity.io CMS through following steps:

1. Open Sanity.io and click on get started.

2. There are two ways to use Sanity, you can create a new project from start and start customizing it using Sanity or you can use the templates provided by Sanity to just explore it and customize it according to your wish. I will be using templates to just show the working of Sanity. There are a lot of templates provided by Sanity. You can choose any templates of your wish. I will be using Next.js Landing Pages template. So click on the “Next.js Landing Pages” section.

3. After clicking on the “Next.js Landing Pages” section, a new page with all the next steps for the deployment of projects appears. First, you have to authenticate to use Sanity. There are three ways you can authenticate to Sanity, I will recommend you to authenticate it through GitHub as it will help you in the next step. You can revoke Sanity access anytime from GitHub. I have authenticated using Google.

4. After authentication you have to authorize Sanity to access your GitHub access. After giving the access, Sanity will create a repository in your GitHub account, and it's your choice to keep the repository public or private.

5. After the repository is created we have to give Netlify access to sanity as they will use Netlify for deploying the website.

6. After completing all the steps mentioned above, the project is ready to use. Open Sanity Studio and open the website.

7. First we will see the website we just deployed. I will be changing the section marked with a blue lining. I will be changing the background image and text.

8. Open Sanity Studio. You need to authenticate before using Sanity Studio.In simple words, Sanity Studio is a tool through which we can easily edit the content of the website and do a lot of things. Open pages and click on Frontend.

9. A sidebar appears where you can edit the different parts of the website and content as per your wish. After making changes click on publish. Wait for approx. 2 to 5 minutes to get the website updated.

10. Visit the website and you can see the changes are implemented.

Hurray 🥳, we just used the Sanity CMS to change the content of our website 🎉.

The main purpose behind this blog was to explain what a CMS is as I was also not knowing about CMS previously and this blog is my research about it as I am going to use CMS in my future projects. At last, I would like to thank you for taking the time for reading this blog. Please comment and do express your views about this blog. If you have any queries, feedback regarding this blog feels free to comment and contact me on Twitter(@HarshitAditya1). I am highly active on Twitter and I would happy to solve your queries and have a conversation with you.

Mistakes I made while learning Web Development as a beginner

Harshit Aditya — Fri, 03 Dec 2021 12:42:58 +0000

This blog is all about mistakes I made while learning Full Stack Web Development as a beginner. I started my Web Development journey in November 2020. I made a lot of mistakes in Web Development and realized it while learning throughout the year. I have been doing Web Development for the past 1 year and am still learning it. In this blog, I will be talking about some of the major mistakes I made while learning Web Development and also provide solutions for them so that you won't make these mistakes. My major mistakes include:

Not taking breaks

I was very enthusiastic when learning Web Development in the beginning but I was not taking breaks after completing one part or portion of the course which I was following which broke my enthusiasm. Taking breaks is very important whether you are learning or building projects. If you are tired while learning then take a break and do it later when you feel free and energetic. If you got stuck in an error while building any project and you are trying to solve that issue for the last 2 to 4 hours then I would highly recommend leaving that problem and try to solve it the next day with a fresh mind. Most of the time I found that the very next day the issue or problem is solved. This technique has worked with me 95% of the time. Working in a fresh mind and mood is very important. Do take breaks in an interval of time.

Not Building Projects

// Detect dark theme var iframe = document.getElementById('tweet-1392722604046176258-387'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1392722604046176258&theme=dark" }

Building projects are very important while learning any tech stack. Building projects will make your concepts clear and memorable. I will highly suggest you to start building projects while and after learning any concepts. For example, if you are learning HTML and CSS then you can create many static websites, and also if you have completed JavaScript you can create a ton of new projects. If you are following any course then most probably you will also get projects to build but I will recommend you to also build projects separate from the courses. This will help you to learn and grab more things faster related to the tech stack you are learning. YouTube and blogs are some great resources where you can get awesome project ideas.

// Detect dark theme var iframe = document.getElementById('tweet-1392722605669457922-675'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1392722605669457922&theme=dark" }

Not using Developer Tools

This was one the biggest mistake I committed with myself while learning Web Development. We can do a lot of things with Developer Tools. One of its features is that we can inspect our web app and find errors on it. When I started building projects I faced two types of errors which are simple errors and internal errors. Simple errors include typing errors, missed semicolons, etc. Whereas internal errors are those which happens when you missed some important or major line of code or you typed it completely wrong. A simple error does not take much time to debug but an internal error takes a lot of time in debugging if we can't find where the problem is. Missing an import in React is an example of an internal error. I will also add a screenshot of an internal error that I faced while I was building a project.

One of the internal error I faced while creating app in React

Developer tools save a lot of time in debugging. You can open Developer Tools in your browser by pressing Ctrl+Shift+I in windows and ⌘ + ⌥ + I in Mac and start exploring the tools. There are various videos on YouTube where you can learn about Developer Tools and how to use them.

Chrome Developer Tools

Not taking help from internet and developer communities

One of the mistakes I made in the beginning while learning Web Development is that I don't take help from the internet. If you are stuck in an error then do take help from Google and Stack Overflow. Googling is a very important skill. You can also take help from documentation for additional reference. Also, I will recommend you to take help from Developer communities. You can get one on one guidance and doubt clearing in developer communities. Also in Developer communities, you get an opportunity to grow your network and collaborate with more like-minded folks for a project or hackathons.

Community FTW 💯🎉

These are some of the major mistakes I made while learning Web Development as an absolute beginner. I hope that this will save you a lot of time while learning web development. Mistakes will always happen while developing or building projects and these mistakes will give you the experience to become a better developer so never get scared or tensed when an error or issue occurs instead think that you are going to learn something new. At last, I would like to thank you for taking the time for reading this blog. Please comment and do express your thoughts on this blog. If you have any queries regarding this blog, Web Development, etc. then feel free to contact me on Twitter (@HarshitAditya1). I am highly active on Twitter and I would be happy to solve your queries and have a conversation with you.

All About Cryptocurrencies for absolute beginners

Harshit Aditya — Sun, 01 Aug 2021 11:05:34 +0000

History Of Cryptocurrency

Cryptocurrency the most trending word right now originated in the year 1983 founded by David Chaum an American cryptographer who created an anonymous cryptographic electronic money called ecash from which the whole idea of cryptocurrency was originated. In 1995 DigiCash an advanced version of ecash was created which uses software to withdraw notes from the bank and assign an encrypted key before it is sent to the recipient. This allowed the money details to be hidden from issuing bank, government, and any third-party agent which generated the whole idea and concept of cryptocurrency.

What Is Cryptocurrency and how it works?

Cryptocurrency is a digital currency that can be used to exchange products which include goods and services. There are more than 10000 + cryptocurrencies available now. Bitcoin, Ethereum, and Dogecoins are some popular examples of cryptocurrencies. In 2009 the first decentralized cryptocurrency, Bitcoin was created by Satoshi Nakamoto. Transaction of Cryptocurrencies is based on Blockchain technology which is one of the most secure processes in the world. In Blockchain information or data is stored in a chain of blocks. Blockchain makes the transaction process of the cryptocurrency very efficient. Blockchain assigns a cryptographic key to the cryptocurrency which makes it decentralized. The GIF shown below illustrates how blockchain works.

Investing In Cryptocurrencies

In cryptocurrency, there is no middle agent between the transaction due to which there is no external interaction of banks, government, etc. In cryptocurrency trading, there are no predefined rules which make the market of the cryptocurrency very volatile due to which investing in cryptocurrency is not as safe as investing in stocks. In stock trading, there are many rules which make it a safer option compared to investing in cryptocurrencies. For example in stocks, there is a regulatory body such as BSE (Bombay Stock Exchange), NSE (National Stock Exchange), etc which regulates the market which prevents the market from falling heavily but in cryptocurrency, there are no regulating bodies due to which the market is volatile. But that doesn’t mean we should not invest in cryptocurrency, we can invest in cryptocurrency by giving some small amounts to analyze the crypto market.

Future Of Cryptocurrency

Can cryptocurrency replace the physical currency which we use daily use? The answer is no for now but in the future, no one knows because cryptocurrency is not stable due to which it is not possible to replace the physical currency but companies like KFC, Pizza Hut, Microsoft, etc companies have stated using bitcoins as an alternate option of payment. When it comes to world of finance, cryptocurrency has always been a topic of great discussion where many tech founders like Bill Gates and Elon Musk portrays cryptocurrency as the future whereas business tycoon like Warren Buffet says that cryptocurrency will never replace physical currency as it is very unstable.

Is Cryptocurrency legal in India?

Cryptocurrency trading is legal in India but transaction or buying products through Cryptocurrency is not legal in India as of now. Wazirx,Coinbase,Binance are some popular trading platforms where you can trade and buy cryptocurrencies. To stay protected always read company’s prospectors and see what projects and investors are involved before buying their cryptocurrencies because many malpractices happen with the transaction of cryptocurrencies such as it is used in buying illegal weapons and it is used in dark web too and many illegal activities.

At last, I would like to thank you for taking the time to read this blog. This is my first blog. Please comment and do express your thoughts on this blog so I can improve in my next blog.