React is an open-source JavaScript library created by Jordan Walke, a software engineer at Meta. It is used to build user interface (UI) components on single-page applications. React was first used in Facebook news feeds in 2011 and then added to Instagram after Facebook purchased the app in 2012. It was released to the public under an open-source license in late 2013 and has gained massive popularity. React is the most widely used JavaScript library, with over 40% of developers using it, according to a past year Stack Overflow survey.
Why is React so popular?
Ask a web developer about the benefits of using their services, and you’ll get a long list in response. They talk about the components, The Virtual DOM, JSX and One-Way Data Binding. This thing makes developer life easier. That’s why React is so popular among the web developers
Setting Up the Environment
We now understand what React is and why it is so popular.
Let’s go through the process of setting up the environment to run React on our local machine.
First, open your preferred web browser and search for Node.js. Once you find the official Node.js website, navigate to the download tab and choose the appropriate Node.js file based on your computer’s operating system and architecture (32-bit/64-bit). After downloading the file, run it and proceed with the installation of Node.js on your local machine. To verify that Node.js is successfully installed on your machine, open your terminal and run the following commands:
node -v
npm -v
If they give their version, that means Node.js is successfully installed.
Creating a React Project
To set up a React project, open your preferred web browser and search for "Vite". Visit the Vite official website and copy the command "npm create vite@latest". Then, paste this command into your terminal. You will be asked to provide some information such as your project name, library, and preferred language for the React library. Once you’ve answered the questions, navigate to your project folder and open the terminal in this folder. Run the command "npm i" to download the required packages. To run the project, use the command "npm run dev" and the project will run on localhost:5137. Congratulations! You have successfully set up your first project. 🎉
Understanding the File Structure
After setting up the React project, open it in your favourite code editor. Once you open the project, you will see some files and folders. You will find the index.html file, which is the main file for rendering your HTML in the web browser. Inside the src folder, you can create folders and files to make your web application function and look the way you want. There are two main files: main.js, which is responsible for rendering components in React, and app.js, which serves as the entry point for components.
Conclusion
Congratulations! You have just built your first React app from scratch. Throughout this journey, you have learned how to set up your environment, create a project using Vite, and understand the file structure. React’s flexibility and component-based structure make it a powerful tool for building modern, dynamic web applications. Now that you have mastered the basics, you are ready to explore more advanced features and take your React skills to the next level. Keep experimenting, building, and learning – the possibilities with React are endless!
Top comments (1)
Thanks for the post. I could develop the app and study the react app structure without any prior knowledge of Vite utility.