<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: shubham thakre</title>
    <description>The latest articles on DEV Community by shubham thakre (@shubhthakre).</description>
    <link>https://dev.to/shubhthakre</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F396944%2F04d831b0-6a39-4a21-bbac-5dce8d5513b9.jpeg</url>
      <title>DEV Community: shubham thakre</title>
      <link>https://dev.to/shubhthakre</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/shubhthakre"/>
    <language>en</language>
    <item>
      <title>Step-by-Step Guide: Installing Jenkins on Docker</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Tue, 23 Apr 2024 06:08:11 +0000</pubDate>
      <link>https://dev.to/shubhthakre/step-by-step-guide-installing-jenkins-on-docker-en7</link>
      <guid>https://dev.to/shubhthakre/step-by-step-guide-installing-jenkins-on-docker-en7</guid>
      <description>&lt;p&gt;🚀 Excited about DevOps automation? Learn how to set up Jenkins on Docker for seamless CI/CD workflows! 🛠️&lt;/p&gt;

&lt;h2&gt;
  
  
  Prerequisites :
&lt;/h2&gt;

&lt;p&gt;Before we begin, ensure you have the following prerequisites:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Docker installed on your machine&lt;/li&gt;
&lt;li&gt;Basic familiarity with Docker commands&lt;/li&gt;
&lt;li&gt;Internet connectivity to pull Docker images&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;🔹 Step 1: Pull the Jenkins Docker Image&lt;br&gt;
Start by pulling the latest Jenkins LTS image from Docker Hub:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker pull jenkins/jenkins:lts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 Step 2: Run Jenkins Container&lt;br&gt;
Launch Jenkins as a Docker container with port mappings:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -d -p 8080:8080 -p 50000:50000 --name my-jenkins jenkins/jenkins:lts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 Step 3: Access Jenkins Web UI&lt;br&gt;
Navigate to &lt;a href="http://localhost:8080"&gt;http://localhost:8080&lt;/a&gt; in your web browser.&lt;/p&gt;

&lt;p&gt;🔹 Step 4: Retrieve Initial Admin Password&lt;br&gt;
Retrieve the admin password from the container logs:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker logs my-jenkins
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🔹 Step 5: Complete Jenkins Setup&lt;br&gt;
Follow the setup wizard in the web UI, paste the admin password, and install plugins.&lt;/p&gt;

&lt;p&gt;🔹 Step 6: Start Using Jenkins&lt;br&gt;
Begin automating builds, tests, and deployments with Jenkins!&lt;/p&gt;

&lt;p&gt;Ready to streamline your development pipeline? Try Jenkins on Docker today! 🌟&lt;/p&gt;

&lt;h1&gt;
  
  
  DevOps #ContinuousIntegration #ContinuousDelivery #Jenkins #Docker #Automation #CI/CD
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Docker Setup with Standalone Browser Using Selenium Container</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Thu, 21 Mar 2024 04:53:25 +0000</pubDate>
      <link>https://dev.to/shubhthakre/docker-setup-with-standalone-browser-using-selenium-container-5gcb</link>
      <guid>https://dev.to/shubhthakre/docker-setup-with-standalone-browser-using-selenium-container-5gcb</guid>
      <description>&lt;p&gt;Prerequisites:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Docker installed on your system.&lt;/li&gt;
&lt;li&gt;Basic understanding of Docker commands.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Step 1: Pull Selenium Standalone Chrome Container&lt;br&gt;
The first step is to pull the Selenium standalone Chrome container from Docker Hub. This container includes a standalone instance of the Chrome browser along with the Selenium WebDriver.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker pull selenium/standalone-chrome
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This command will download the latest version of the Selenium standalone Chrome container to your local Docker environment.&lt;/p&gt;

&lt;p&gt;Step 2: Run Selenium Container&lt;br&gt;
Once the container is downloaded, you can start it using the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker run -d -p 4444:4444 --name selenium-container selenium/standalone-chrome
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Explanation of Flags:&lt;/p&gt;

&lt;p&gt;-d: Runs the container in detached mode (in the background).&lt;br&gt;
-p 4444:4444: Maps port 4444 on the host to port 4444 on the container. This is where Selenium server listens for WebDriver requests.&lt;br&gt;
--name selenium-container: Assigns the name "selenium-container" to the running container.&lt;/p&gt;

&lt;p&gt;Step 3: Verify Selenium Container is Running&lt;br&gt;
To verify that the Selenium container is running, execute the following command:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should see the selenium-container listed among the running containers.&lt;/p&gt;

&lt;p&gt;Step 4: Write Selenium Tests&lt;br&gt;
Now, you can write your Selenium tests using your preferred programming language (e.g., Java, Python). Ensure that your tests are configured to connect to the Selenium server running inside the Docker container.&lt;/p&gt;

&lt;p&gt;Example Python Selenium Test:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;from selenium import webdriver

# Connect to the Selenium server running inside the Docker container
driver = webdriver.Remote("http://localhost:4444/wd/hub", desired_capabilities={"browserName": "chrome"})

# Perform browser automation actions
driver.get("https://www.example.com")
print(driver.title)

# Close the browser
driver.quit()

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Step 5: Run Selenium Tests&lt;br&gt;
Execute your Selenium tests from your local environment. The tests will communicate with the Selenium server running inside the Docker container to perform browser automation actions.&lt;/p&gt;

&lt;p&gt;Step 6: Stop and Remove the Selenium Container (Optional)&lt;br&gt;
Once you're done with your testing, you can stop and remove the Selenium container using the following commands:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker stop selenium-container
docker rm selenium-container
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Conclusion:&lt;br&gt;
By setting up a Docker environment with a standalone browser using a Selenium container, you can easily manage and execute browser automation tests in a controlled and reproducible manner. This approach allows for seamless integration of Selenium tests into your CI/CD pipelines and simplifies the setup process across different environments.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Beginner’s Guide to Performance Testing With Apache JMeter - Basic Tutorial</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Wed, 01 Feb 2023 09:17:02 +0000</pubDate>
      <link>https://dev.to/shubhthakre/beginners-guide-to-performance-testing-with-apache-jmeter-basic-tutorial-43di</link>
      <guid>https://dev.to/shubhthakre/beginners-guide-to-performance-testing-with-apache-jmeter-basic-tutorial-43di</guid>
      <description>&lt;p&gt;In the last few decades, we're seeing intense growth in the Software Testing industry. It's also important for us to ensure the performance of a software application is required to ensure that the application runs without any failures.&lt;/p&gt;

&lt;p&gt;This article will provide in-depth knowledge about the Apache JMeter performance testing tool for analyzing and measuring in the following sequence:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What is Performance Testing?&lt;/li&gt;
&lt;li&gt;What is JMeter and how does it work?&lt;/li&gt;
&lt;li&gt;Advantages of JMeter&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  What is Performance Testing?
&lt;/h1&gt;

&lt;p&gt;Performance testing is a practice to determine how a system performs in terms of responsiveness, stability under a particular workload. It may be from different geo-locations and for different user scenarios.&lt;/p&gt;

&lt;p&gt;A few years ago, Flipkart, India’s largest E-Commerce company, encountered issues on its Big Billion Day sale progressed. The payment gateway was down and consumers could not finalize their purchases. Also, in its attempt to limit access only via the mobile application, Flipkart’s sale began with application crashes due to unknown reasons. On the day of the Big Billion Day sale, Flipkart’s customers could not properly access the website due to slow server access.&lt;/p&gt;

&lt;p&gt;Poor performance, whether website crashes or slow page loading, equals an immediate and long-term loss of revenue and needs immediate churn.&lt;/p&gt;

&lt;p&gt;Any website, big or small, have downtime, and there are disruptions, however negligible. Be it payment gateway downtime, app crashes or server issues, the fact of the matter is, when the load gets heavy or the traffic is pouring in, website applications and mobile applications tend to face severe performance issues.&lt;/p&gt;

&lt;h1&gt;
  
  
  Performance Testing also serves to investigate, measure, validate different attributes of a system such as -
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Speed: The system is tested and evaluated to check the speed with which it responds -Scalability: Checks the variation in response time/scalability as the load on the system varies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reliability: Validates whether the app is reliable under prolonged periods of high user traffic.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stability: Evaluates if the system is stable under heavy concurrent user load.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  What is JMeter and how does it work?
&lt;/h1&gt;

&lt;p&gt;Apache JMeter™ is a pure Java-based, Open source software application used to load test functional behaviour and measure performance.&lt;/p&gt;

&lt;p&gt;It's a non-functional testing tool used to simulate a heavy load on a Server or Group of Servers in a network to test the strength or to analyse and measure the performance of different software services and products under different load types.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5uybxxcmb1r1gs9wqzua.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5uybxxcmb1r1gs9wqzua.png" alt="Image description" width="727" height="550"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  Advantages of JMeter
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;Open Source - As its an open-source software. We can download free of cost.&lt;/li&gt;
&lt;li&gt;User-Friendly - It's GUI helps to create a Test Plan easily and configuring respective elements. Just need to right-click on the scenario and add them.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Recording - It also allows user to record HTTP/HTTPS to create a Test plan using Recording. Uses Proxy Server that allows JMeter to watch and record actions while browsing web application with a normal browser.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reporting - Supports different kinds of dashboard report generation. A host of reports are generated through JMeter which helps the user to understand Performance test execution results.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Support other non-functional tests - It is not only designed to perform Performance Testing but also supports other non-functional tests such as Stress Testing, Distributed Testing, Web service testing, etc.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  JMeter Installation Process
&lt;/h1&gt;

&lt;p&gt;As Apache JMeter™ is a pure Java-based application, it requires the latest JVM. To know if your system holds the latest version of Java you can just type the below command in the command prompt.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Java -version
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The latest version can be downloaded here. Once done, you can simply unzip the zip/tar file into the respective directory you want JMeter to be installed. Here, we don't have any installation screen to deal with.&lt;/p&gt;

&lt;p&gt;Once downloaded, you can just navigate to the below path to start JMeter in Graphical User Interface.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/bin/jmeter.bat for Windows machine
/bin/jmeter.shell for Mac or Linux machine

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You must be able to view the below screen once launched.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fliyf7o8v6jj68t1bqe9m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fliyf7o8v6jj68t1bqe9m.png" alt="Image description" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>crypto</category>
      <category>airdrops</category>
      <category>web3</category>
      <category>blockchain</category>
    </item>
    <item>
      <title>Introduction to software testing</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Thu, 21 Jul 2022 14:14:17 +0000</pubDate>
      <link>https://dev.to/shubhthakre/introduction-to-software-testing-37dc</link>
      <guid>https://dev.to/shubhthakre/introduction-to-software-testing-37dc</guid>
      <description>&lt;p&gt;In 2002, a study commissioned by the US Department of Commerce’s National Institute of Standards and Technology concluded that software errors cost the US economy about $59 billion annually.&lt;/p&gt;

&lt;p&gt;Testing is about the most crucial part of software development. You definitely don't want your customers to be the first to report a bug.&lt;/p&gt;

&lt;p&gt;Software testing allows you to discover and fix a bug before they get to production. There are different ways to test your applications; you are either testing manually or automated. For this article, we are concerned about manual testing.&lt;/p&gt;

&lt;p&gt;Testing your application can be very challenging. Even though it's impossible to figure out all the defects of your application in your test suites, testing your application gives you confidence that your application works really well as expected to a large extent. At least, you can sleep well at night.&lt;/p&gt;

&lt;p&gt;For many organizations, all they want is just to push out new product features as soon as possible. Have you worked in an organization where your boss says you need to push out a feature within the next few hours — a timeline you know is not feasible to get this feature ready and error-free? There are many bosses like that.&lt;/p&gt;

&lt;p&gt;This puts you in a fix and allows you to write crappy and hacky code that are not testable or predictable.&lt;/p&gt;

&lt;p&gt;You are not alone. I've been in this situation as well. Don't be like these bosses, be different, make testing a part of your software development life cycle as it should be.&lt;/p&gt;

&lt;p&gt;In this article we'll learn how to test our applications manually and effectively and then in the next article we'll talk about how to automate your testing, the techniques, the tools, and how to get started.&lt;/p&gt;

&lt;p&gt;So, let's get started with manual testing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Table of content
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;The objective of testing&lt;/li&gt;
&lt;li&gt;Types of testing&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The objective of testing
&lt;/h2&gt;

&lt;p&gt;The objective of testing is to first find defects and to prevent defects before they get to production.&lt;/p&gt;

&lt;p&gt;The information you get from testing can help you perform a proper risk assessment that will contribute to allowing you to deliver software that is fault-tolerant, maintainable, and scalable.&lt;/p&gt;

&lt;p&gt;Although different testing techniques have different objective the primary objective is to find defects and to fix them as soon as possible as it might become more expensive to fix when found in production.&lt;/p&gt;

&lt;h2&gt;
  
  
  Types of Testing
&lt;/h2&gt;

&lt;p&gt;Below are a few types of testing techniques that software teams often use;&lt;/p&gt;

&lt;h2&gt;
  
  
  Functional Testing types include:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Unit Testing&lt;/li&gt;
&lt;li&gt;Integration Testing&lt;/li&gt;
&lt;li&gt;System Testing&lt;/li&gt;
&lt;li&gt;Sanity Testing&lt;/li&gt;
&lt;li&gt;Smoke Testing&lt;/li&gt;
&lt;li&gt;Interface Testing&lt;/li&gt;
&lt;li&gt;Regression Testing&lt;/li&gt;
&lt;li&gt;Beta/Acceptance Testing&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Non-functional Testing types include:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Performance Testing&lt;/li&gt;
&lt;li&gt;Load Testing&lt;/li&gt;
&lt;li&gt;Stress Testing&lt;/li&gt;
&lt;li&gt;Volume Testing&lt;/li&gt;
&lt;li&gt;Security Testing&lt;/li&gt;
&lt;li&gt;Compatibility Testing&lt;/li&gt;
&lt;li&gt;Install Testing&lt;/li&gt;
&lt;li&gt;Recovery Testing&lt;/li&gt;
&lt;li&gt;Reliability Testing&lt;/li&gt;
&lt;li&gt;Usability Testing&lt;/li&gt;
&lt;li&gt;Compliance Testing&lt;/li&gt;
&lt;li&gt;Localization Testing
You can find more details about these testing techniques &lt;a href="https://www.softwaretestinghelp.com/types-of-software-testing/"&gt;here&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's it for now, next article will be focused on Unit Testing with Java and Selenium.&lt;/p&gt;

&lt;p&gt;Stay safe.&lt;/p&gt;

</description>
      <category>manual</category>
      <category>testing</category>
    </item>
    <item>
      <title># Finally! I Created my First Portfolio! 📂🎉</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Fri, 23 Apr 2021 19:59:10 +0000</pubDate>
      <link>https://dev.to/shubhthakre/finally-i-created-my-first-portfolio-14pk</link>
      <guid>https://dev.to/shubhthakre/finally-i-created-my-first-portfolio-14pk</guid>
      <description>&lt;p&gt;For the last few months, I've been working on a personal portfolio. I've always believed that a separate portfolio is important for any dev since it connects you to future opportunities and it helps you to grow your network.&lt;/p&gt;

&lt;p&gt;Today I deployed it on - &lt;a href="https://nifty-bell-e34c2f.netlify.app/"&gt;shubh.dev&lt;/a&gt; .There's still some stuff to improve, like testing browser compatibility, tweaking some UX, etc, so it's still a WIP, for sure. But hey, everyone has to start somewhere, right?&lt;/p&gt;

&lt;p&gt;I tried to document everything during the process and thought it would be useful to share the planning phases, technical execution, and the major takeaways from the project.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>reactjsdeveloper</category>
    </item>
    <item>
      <title># How To Build a Weather App with React</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Fri, 09 Apr 2021 14:46:17 +0000</pubDate>
      <link>https://dev.to/shubhthakre/how-to-build-a-weather-app-with-react-2eho</link>
      <guid>https://dev.to/shubhthakre/how-to-build-a-weather-app-with-react-2eho</guid>
      <description>&lt;h2&gt;
  
  
  Prerequisites
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You’ll need to have Node &amp;gt;= 8.10 and npm &amp;gt;= 5.6 on your machine.&lt;/li&gt;
&lt;li&gt;You’ll need to have some familiarity with how to open and use a command-line tool.&lt;/li&gt;
&lt;li&gt;Internet connection.&lt;/li&gt;
&lt;li&gt;You’ll need a code editor (I recommend VS Code).&lt;/li&gt;
&lt;li&gt;A browser other than IE. It does not support the way we are going to call the API (fetch).&lt;/li&gt;
&lt;li&gt;OpenWeatherApi Account.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Open a new terminal window and navigate to a comfortable directory.
2. Run  [npx create-react-app weater-app]  in the new terminal. The download process will take a few minutes.
   *  npx is a program that we are giving a command to.
   *  create-react-app is the command that makes a new React project
    *  weather_app is an argument we are passing to name the project root directory
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt;Once the download process is done, jump into the project by executing cd weather_app. There are a lot of files but don’t worry, I will keep things simple for this tutorial and will focus on the necessary items.&lt;/li&gt;
&lt;li&gt;Open your text editor. I am using Visual Studio Code, so I can use the command-line-interface provided by the editor. In the root project directory, I can enter code .&lt;/li&gt;
&lt;li&gt;Back in the terminal at the root of the project run npm start. This starts the development server on our local machine so the project will compile every time we make a change and save. When the project tries to compile in development mode it informs us of any mistakes that we have made in editing. This is very helpful when starting out.
After a few moments, a new browser tab will open to the URL &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt; and you should see the project.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;snap:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ytimg.com%2Fvi%2FctLFWAanxcI%2Fmaxresdefault.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.ytimg.com%2Fvi%2FctLFWAanxcI%2Fmaxresdefault.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We now have a React application running on our machine. Before we choose a weather API we are going to clean up a few items.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Open /public/index.html. This is the page that will be given to browsers when our domain is requested. Notice that there is only one HTML file in the whole project. This is why many ReactJS applications are called single-page-apps, or SPAs.&lt;/li&gt;
&lt;li&gt;We will only make one change in this file: locate the title tag and change the text inside to Weather App, or anything you would like the title of the page to be. You should see the change reflected in the tab of your browser after you save.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Choosing a Weather API
&lt;/h2&gt;

&lt;p&gt;Our React weather app needs weather data, so we are going to take a look at openweather api : &lt;a href="https://openweathermap.org/api" rel="noopener noreferrer"&gt;https://openweathermap.org/api&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsimple-circuit.com%2Fwp-content%2Fuploads%2F2018%2F08%2Fopenweathermap-api-key.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsimple-circuit.com%2Fwp-content%2Fuploads%2F2018%2F08%2Fopenweathermap-api-key.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Click it. The Open Weather Map API information page (the page you should already be on) gives us more detailed information. On the far left side, we have a list of API endpoints, each giving us different data, and displaying what kind of HTTP request it uses.The middle section gives us more detailed information describing the selected endpoint and the parameters. Parameters are predefined labels for data that we are going to give to the API (i.e city=Seattle).On the right, my personal favorite of the three sections is an interactive help center that shows us code snippets from a variety of different languages, libraries, and sample responses from the endpoints. This will save us a lot of time. Notice the responses we want are in JSON, Javascript Object Notation, which is a logical way to display information using objects and key-value pairs. TIP: the section on the right will respond to changes we make in the middle section. If we change parameters in the middle, the URL on the right should change.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;In the code dropdown at the top of the right section select Javascript (fetch).&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fhackster.imgix.net%2Fuploads%2Fattachments%2F386539%2Fscreen_shot_2017-11-28_at_13_47_26_I2nTnJIsTX.png%3Fauto%3Dcompress%252Cformat%26w%3D900%26h%3D675%26fit%3Dmin" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fhackster.imgix.net%2Fuploads%2Fattachments%2F386539%2Fscreen_shot_2017-11-28_at_13_47_26_I2nTnJIsTX.png%3Fauto%3Dcompress%252Cformat%26w%3D900%26h%3D675%26fit%3Dmin"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Notice at the end of the URL string we see “q=London%252Cuk”. That is a URI encoded string for the ‘q’ parameter. Essentially, URI encoded strings are the URL compatible versions of the same string, but they account for special characters (i.e spaces and commas). Remember that for later.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;In the middle section, underneath where it says GET Current Weather Data, in the Required Parameters section, change the ‘q’ parameter from ‘Nagpur’ to ‘Seattle’.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fapipheny.io%2Fwp-content%2Fuploads%2F2020%2F04%2F8-6-1024x640.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fapipheny.io%2Fwp-content%2Fuploads%2F2020%2F04%2F8-6-1024x640.jpg"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now, the end of the URL simply has ‘seattle’, and it looks the same as how we typed it in the parameter input because we did not have any special characters.&lt;br&gt;
This is the code that we are going to copy &amp;amp; paste directly into our app. However, in order for us to test and use this code, we will need to have an account on OpenWeatherApi and a subscription to Open Weather Map. You can quickly set up an account and subscribe to the basic plan, which gives us 100 calls per day (not exceeding 10 calls per minute) for free using the Open Weather Map API. It’s important to track our API calls.&lt;/p&gt;

&lt;h3&gt;
  
  
  Fetching api
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
useEffect(() =&amp;gt; {
  async function fetchWeather() {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${City name}&amp;amp;units=metric&amp;amp;appid=bf60f4bf1bb530da7a5290db1d82675f`
    ).then((res) =&amp;gt; res.json());

    if (response) {
      setcity(response.main);
    }
  }

  fetchWeather();
}, []);

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Modify our fetchWeather function to convert the response into a JSON object and then assign the response value to the responseObj variable in our state. The inner workings of asynchronous programming are beyond the scope of this article, but the then function is what happens after we get our data from the API.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphotos.app.goo.gl%2Fp3WEnvASDTQp8Gg46" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphotos.app.goo.gl%2Fp3WEnvASDTQp8Gg46"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Live App :&lt;a href="https://weather-app-ebon-sigma.vercel.app/" rel="noopener noreferrer"&gt;https://weather-app-ebon-sigma.vercel.app/&lt;/a&gt;&lt;br&gt;
github_repositorie : &lt;a href="https://github.com/shubhthakre/weather_app" rel="noopener noreferrer"&gt;https://github.com/shubhthakre/weather_app&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>react</category>
      <category>programming</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>What I Learnt so far??</title>
      <dc:creator>shubham thakre</dc:creator>
      <pubDate>Tue, 02 Mar 2021 17:37:57 +0000</pubDate>
      <link>https://dev.to/shubhthakre/what-i-learnt-so-far-no9</link>
      <guid>https://dev.to/shubhthakre/what-i-learnt-so-far-no9</guid>
      <description>&lt;p&gt;1.How to get started with reactjs with vscode.&lt;br&gt;
2.Must have extension as a reactjs-developer.&lt;br&gt;
3.Hello React program.&lt;br&gt;
4.what is jsx,&lt;br&gt;
5.What is jsx attribute.&lt;br&gt;
6.what is and how to use React fragment.&lt;br&gt;
7.what is component and how to create a component in react.&lt;br&gt;
8.what are props in react.&lt;br&gt;
9.how to install and use material-ui icons in react.&lt;br&gt;
10.what is state.&lt;br&gt;
11.waht are React hooks&lt;br&gt;
12.what is destructing and examples.&lt;br&gt;
13.what is and how to use useState hook.&lt;br&gt;
And so on....&lt;/p&gt;

</description>
      <category>100daysofcode</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
