React.js tutorial, step-by-step guide to create a React app.

In my last post, I informed you about what is React, why is it used, what are its benefits over using HTML, CSS and JavaScript, and what are its drawbacks. We discussed these topics in detail. Now, in this post I will guide you to make your first React app.







Step-by-Step guide for create a React app.

1. Pre-requisites 

  • A Code Editor - In this post, we will use Microsoft Visual Studio Code.
  • Node.js - Download and install node by visiting https://nodejs.org/ and follow all the instructions mentioned in order to install it. After installation you can verify the installation by running node -v in your terminal/command prompt.

2. Create a New React Project


Create a new directory for your React project and open Visual Studio Code in the directory.

  • Use the command npx create-react-app my-react-app to initialize your React project and create the app my-react-app. Your folder structure should look like this: 
    



  • After the installation, run the command cd my-react-app in the terminal.
  • Now, start the development server by using the command npm start.
  • The server should be running at http://localhost:3000.




Congratulations! Your first React app is created!

Comments

Post a Comment

Popular posts from this blog

Different types of hooks in React and their uses.

Image
  I n my last post, I gave a guide on how to to make our first React application. Now that you have created your first React application, it is time to know about the different kinds of hooks in React and when to use them. Before, following this post, you must have a React app set up and must be inside the directory. Different types of hooks and their use:-  1. useState hook:- The useState hook is used to manage the state of a function component. It accepts an initial state and returns two values, namely, the current state and a function to update the state.  In the given example count is the current state and setCount is the function to update the state. The useState hook can be used to store and update any type of data including primitive values, objects, and arrays. const [count, setCount] = useState(0); 2. useEffect hook:- The useEffect hook is used to perform side effects, such as fetching data or setting up subscriptions. It accepts a function that contains the side effect lo
Read more

Building a weather app using React.js

Image
In today's digital age, accessing weather information has become an essential part of our daily routine. Building a weather application not only provides valuable real-time data to users but also offers a great opportunity to learn and practice web development skills. In this post, i'll walk through the process of building a weather app using React, a popular JavaScript library for building user interfaces. Setting Up the Project: To start, make sure you have Node.js and npm installed on your system. Create a React app named weather-app. Learn how to create a React app by clicking here . Fetching Weather Data: Our weather app will rely on an external API to fetch weather data. We'll use the OpenWeatherMap API, which provides current weather data, forecasts, and more. async function fetchData ( cityname = 'Kolkata' ) {     if ( cityname === null || cityname == '' )     {       alert ( 'Please select a city!' );     }     else {       let url =
Read more