DEV Community

Cover image for Getting Started with React.js: What, Why, and How
Megha M
Megha M

Posted on

Getting Started with React.js: What, Why, and How

#react #frontend #createreactapp #vitejs

I’ve Started Learning React.js!

Today marks the beginning of my React.js journey, and I’m super excited to share what I’ve learned so far. If you’re also curious about React or just starting out, this post will give you a quick overview of what it is, why we use it, and some essential setup details.

What is React.js?

React.js is an open-source JavaScript library created by Facebook for building fast, interactive user interfaces.

  • It’s component-based, meaning we build small, reusable pieces of UI.
  • It uses a virtual DOM for better performance.
  • It’s mainly used for single-page applications (SPAs).

Why Do We Use React?

  • Reusable Components – Write once, use anywhere.
  • Faster Rendering – Virtual DOM makes updates quick.
  • Easy to Learn – If you know JavaScript, you can pick it up quickly.
  • Strong Community – Tons of tutorials, libraries, and support available.
  • Scalability – Works well for small and large projects.

What is CRA and Vite?

CRA (Create React App)

A command-line tool by Facebook to quickly set up a new React project with all configurations done for you. It’s beginner-friendly but slower during development.

Vite

A modern build tool that’s super fast because it uses native ES modules and builds only what’s needed. Many developers are switching to Vite because of its speed.

Difference Between CRA and Vite

Feature CRA Vite
Speed Slower start time Lightning-fast startup
Bundler Webpack ESBuild + Rollup
Configuration Pre-configured, less flexible More configurable, modern setup
Learning Curve Beginner-friendly Also beginner-friendly but faster
Popularity Widely used earlier Growing rapidly now

Commands to Install CRA and Vite

Create React App:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

Vite:

npm create vite@latest my-app
cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

How the Application Looks

CRA: Shows the default React spinning logo with "Edit src/App.js and save to reload."

Vite: Shows a clean starter template with “Vite + React” text and a clickable counter.

My takeaway:

Starting with React feels like opening the door to endless possibilities in front-end development. I’m planning to experiment with both CRA and Vite so I can choose the one that fits my workflow best.

Top comments (0)