React Basics: Getting Started with Your First React App

What is React?
React is one of the most widely-used JavaScript libraries for building modern web applications. Its component-based architecture and efficiency make it a top choice for developers worldwide. In this tutorial, we’ll start from scratch by creating a simple React app and understanding the fundamentals of React components.

What will you learn?

• How to create your first React app

• Understanding React components basics

How to create a React app?
There are many ways to start a new React project, such as using <script> tags from a CDN, various toolchains, and frameworks. In this tutorial, we will use a toolchain.

What is a toolchain?
Simply put, a toolchain is a set of software development tools linked together to perform a complex task or create a software product. Each tool completes a specific function, and usually, the output of one tool is input for the next. This automation improves efficiency and consistency throughout the development process.

To create a React app, some popular toolchains and frameworks include:

• Vite’s React Template

• Gatsby

• Next.js

• Create React App (Deprecated)

Some might wonder why not build our own toolchains instead of using pre-built ones. While you can, it involves many complexities, including bundlers like webpack or parcel, package managers like npm or yarn, compilers like Babel, and React itself.

Now that you understand what a toolchain is and why we need one, we will use Vite — a modern build tool designed to provide fast and smooth development experiences for modern web projects, including React.

Creating a React App with Vite
Open your terminal and run either:

npm create vite@latest my_first_react_app --template react

or

npx create-vite@latest my_first_react_app --template react

After creating the app, navigate into your project folder:

cd my_first_react_app

Install dependencies:

npm install

Run the development server:

npm run dev

If everything is set up correctly, you should see a URL in the terminal that opens the live preview of your first React app in the browser.

---

Conclusion

Congratulations! You’ve taken the first step by creating your React app from scratch using Vite.! This sets the foundation for your React development journey. In the next post, we’ll explore the structure of your new app and start building simple components.

Stay tuned and happy coding!