React Fundamentals: What It Is, Why We Use It, and How to Get Started

#webdev #javascript #react #beginners

Hey there!

If you've been following along with our series, you've already seen the roadmap for our journey into the world of React. We've talked about the "why" and the "what," and now it's time to get our hands dirty.

In this article, we're making the exciting leap from theory to practice. We'll start with a simple, jargon-free explanation of what React is, explore why it has become the go-to choice for developers everywhere, and then walk you through the simple steps of setting up your very first React project. By the end of this post, you will have a live, running application on your computer.

Let's not wait any longer. Let's get started!

What Exactly Is React?

React isn't a full-fledged framework; it's a JavaScript library for building user interfaces (UIs) or the "view layer" of an application. It was created by Facebook to solve a big problem: making it easy to build complex, interactive UIs where the data changes all the time.

At its core, React is all about components. Think of a website like a Lego model. Instead of building the entire thing from a single block, you create smaller, self-contained pieces—like a button, a navigation bar, or a user profile card. You can then reuse and arrange these components to build your entire application. This modular approach makes your code cleaner and more manageable.

React also follows a declarative approach. Instead of telling the app how to change the UI (e.g., "find this button, change its color, then add text"), you simply tell it what the UI should look like for a given state (e.g., "when the user is logged in, show the profile button"). React handles all the complex updates behind the scenes.

Image generated using Gemini

Why Do Developers Use React?

So, why has React become so incredibly popular? It boils down to a few key advantages:

Reusability and Efficiency: Components can be reused across different parts of your application, saving you time and effort. This is the cornerstone of modern web development.
The Virtual DOM: When you update a React component, it doesn't immediately change the browser's Document Object Model (DOM). Instead, it updates a "virtual" representation of the DOM in memory. React then calculates the most efficient way to apply these changes to the real DOM, making your app incredibly fast.
Performance: The efficient updates from the Virtual DOM, combined with React's streamlined architecture, lead to highly performant and responsive applications.
Huge Ecosystem: React has a massive, active community. This means there's a huge library of tutorials, tools (like Next.js and Redux), and components available to help you solve almost any problem.

How to Get Started: Setting Up a React Project

Ready to get your hands dirty? The best way to start with React is by using a tool that sets up the entire project for you. We'll use Vite, a modern and very fast build tool.

Prerequisites
Ensure you have Node.js and a code editor, such as VS Code, installed on your machine. You can check if you have Node.js by running node -v in your terminal. If you do not have it, you can install it from the following links:
Install VS Code from here
Install Node.js from here

The Commands
Open your terminal and run the following command to create a new React project:

npm create vite@latest my-react-app

npm create vite@latest: This command uses npm (Node Package Manager) to run the latest version of the Vite project creation tool.
my-react-app: This is the name of your new project's folder. You can name it whatever you want.

The installation will look something like this:

Next, navigate into your new project folder and run the command to install all the necessary dependencies:

cd my-react-app
npm install

Now, it's time to run your application! Use the following command:

npm run dev

Your terminal will show you a local address where your app is running (usually http://localhost:5173). Open this URL in your browser.

This is going to be your folder structure:

├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── node_modules/
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   └── react.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

The Result:
Congratulations! You've successfully created your first React application. You should see a page like this in your browser:

Your First Homework

Congratulations on getting your first React app up and running! Now it's time to take the next step and make your first change to the code.

For this homework project, your task is simple:

Image created using Canva

This is a small but important first step that shows you how changes in your code instantly reflect in the browser.

How to Submit Your Solution
If you want to share your work or get feedback, you can share a screenshot of your finished project in the comments below. You can also paste your updated App.jsx code directly into the discussion to get feedback from me and the community.

What's Coming Next?

In our next article, we'll dive into the core of what makes React so powerful. We'll explore JSX, the special syntax that lets us write HTML-like code inside our JavaScript. Then, we'll use it to build our very first component and create our "Hello, World" program.

References

Official React Documentation: react.dev
MDN Javascript Documentation: developer.mozilla.org/JavaScript

Let's Connect!

If you found this article helpful, please consider following me on Dev.to. You can also connect with me on these platforms for more content and conversation: