Are you someone who have just found interest in learning React.js? So, for beginners welcome to the world of IT. This is the beginner-friendly guide on creating your first React.js application! React is a powerful JavaScript library for building dynamic and interactive user interfaces which is developed by Facebook.
But have you ever thought why hello world is the first thing one should know?
This program functions as an assessment of sanity to ensure that your development system is appropriately installed and that the programmers understand the fundamental grammar of the programming language. It lets beginners see the immediate effects of their code, thereby proving the relationship between cause and effect between their code and the output of the program. “Hello, World!” is also a popular cultural symbol that connects programmers from all over the world and overcoming language barriers creating a shared experience that can be a point of entry to learn and master programming.
In this video we’ll be taking your through each step needed to will help you set the development environments, and develop an easy “Hello, World!” app using React. If you’re just beginning your journey using React or are looking for an overview of the basics, this guide will assist you to learn the basics and start using quickly. Therefore, without further delay, let’s dive right into this blog.
Step 1: Set Up Your Environment
Ensure you have Node.js and npm (or Yarn) installed on your computer. You can verify this by running the following commands in your terminal:
text
node -v npm -v
Step 2: Create a New React Application
Use the create-react-app command to set up a new React project. Open your terminal, navigate to the directory where you want to create your project, and run:
npx create-react-app File_Name
You can replace the file_name with the name of your choice for the application.
Step 4: Run the Application
Start the development server by running:
npm start
This will start your application and make it available on http://localhost:3000 in your web browser.
Step 5: Modify the App.js File
Open the src/App.js file in your text editor or IDE. Replace the existing code with the following to display “Hello, World”:
javascript
import React from ‘react’; import ‘./App.css’; function App() { return ( <div className=”App”> <header className=”App-header”> <p>Hello, World!</p> </header> </div> ); } export default App;
Alternatively, you can simplify it further if you don’t need the additional HTML structure:
javascript
import React from ‘react’; function App() { return ( <h1>Hello, World!</h1> ); } export default App;
Step 6: Save and Refresh
Save the changes to App.js. The browser will automatically refresh to display the updated “Hello, World!” message. This setup ensures you have a basic React application running and displaying “Hello, World!”.
To Wrap Up
IT industry is booming with opportunities. Starting from job opportunities, high salary prospects and global opportunities, IT industry can provide you with prospective as well as huge growth opportunities. Additionally, react.js is in huge demand these days. If you want to start your journey as a skilled full-stack developer, you can become “the skilled one” with the assistance of full stack development course in Kolkata. With these courses you will be well-trained to become a full-stack developer. So what are you waiting for? Enroll in a full-stack development course in Kolkata and get into this booming sector.
