React 01 : setup

What is React?

React is a powerful JavaScript library used for building dynamic and interactive user interfaces (UI). It was created by Facebook and is now maintained by Meta along with a community of developers. React has quickly become one of the most popular tools for front-end development.

In this series, we’ll learn React, starting with the most fundamental step: setting up our React environment. Whether you're a beginner or looking to refine your skills, this guide will help you lay a strong foundation for building robust and efficient web applications.

Code editor, Browser and Node.js

For this series, I will use Visual Studio Code (VS Code) as my code editor. It's a free, open-source editor by Microsoft with many features. You can use any editor you prefer, like Sublime Text, Atom, or Vim. The examples and code snippets will work in any editor.

As we know, our JavaScript code gets executed in the browser, which is where users interact with web applications. However, node.js is a cross-platform JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. This means you can use JavaScript for server-side scripting, enabling you to build scalable network applications. With node.js, you can handle tasks like file system operations, database interactions, and more, all using JavaScript. This versatility makes node.js a powerful tool for full-stack development.

React Generates JavaScript for You

You might be wondering why we're discussing JavaScript execution inside and outside the browser when we're supposed to be learning React. Well, React is simply a tool that generates JavaScript code for us, making it easier to write code that would otherwise be too complex.

Now that we understand the environments where JavaScript can run, let's move on and start with our React setup.

Installation

If we look at the documentation, there are two ways to install React:

• With a framework

• Without a framework

With a framework

We can install React with open-source frameworks like Next.js, Remix, or Gatsby. We would normally use this method because, while we may not need these frameworks at the beginning of our project, as our JavaScript bundle grows with every new feature, setting these up will become more cumbersome.

Here's a quick overview of each.

• Next.js: A React framework that enables server-side rendering and static site generation. It’s ideal for building SEO-friendly and high-performance web applications.

    npx create-next-app@latest
  

• Remix: A framework focused on providing a better developer experience by making web development faster and more fun. It’s great for building fully interactive apps with server-side rendering.

    npx create-remix
  

• Gatsby: A framework designed for building fast, static websites with React. It’s perfect for creating content-heavy sites like blogs or portfolios.

    npx create-gatsby
  

Using these frameworks is a great choice for future scalability, as they include built-in features for performance optimization and routing.

Without a framework

We will be focusing more on this method. To install React without the added complexity of a framework, we can use bundlers like Vite and Parcel. These tools help manage your assets (JavaScript, CSS, assets) efficiently, especially as your project grows.

Before we discuss Vite, let me tell you about another method: Create React App, an officially supported way to create single-page React applications. We won't be discussing it in detail as it installs many other libraries like React Native and other testing and development libraries that we do not need at this point.

Instead of Create React App, we’ll use Vite because it offers a faster development experience with minimal configuration. Here’s how to get started:

Vite

A modern build tool that provides a fast and lean development experience. Vite is highly optimized for performance and is a great alternative to Create React App.

npm create vite@latest

Run this command on your terminal. If you have node and npm installed. This command will start your project setup.

1. You will be asked for the project name. Here i have given the name demo-project.

2. 

   Then you will be given options to select the library you want to use. Use the arrow keys to select React and press enter to make your selection.

3. After that you will be given options to select the language you want to use. Use the arrow keys to select JavaScript in this case, and press enter to make your selection. You can select any other language too depending upon your preference.

   

4. This will create a directory with the same name as your project name. It will also create public and src directories, along with several other files, one of which is package.json. Your directory structure will look something like this.

   

5. You will notice That there is no node_modules folder in here. You can generate that using this command.

    npm install
   

6. After you have your node_modules folder in place. To start your development server, you can simply run.

    npm run dev
   

   This command will launch your application on http://localhost:5173, where you can see your React app live.
   Your local server is now up and running.

   

7. When you open your web browser. You will see something like this.

   

Congratulations! You've successfully set up your React environment and are now ready to start building dynamic and interactive web applications. Setting up a project is the first crucial step in your React journey. At first, it might seem a little overwhelming, but with time and practice, it will become second nature.

This article was written by referencing Chai aur React series from Chai aur Code YouTube channel, By Hitesh Choudhary.

In the next article, we will write our first Hello World program in React. Stay tuned!

If you found this guide helpful, don’t forget to share it with fellow developers who are just starting their React journey. Stay tuned for the next article in the "React with Me" series, where we’ll dive into writing your very first "Hello World" program in React!

If you have any questions or you ran into any issues? Drop a comment below or reach out to me on LinkedIn, Twitter, or GitHub, I am here to help.