Learn ReactJS - Pre-Requisites Skill & Setup Environment

#Introduction

Welcome to the Learn ReactJS series! This series will take you from zero to production-ready using React — the most popular JavaScript library for building interactive user interfaces. There are 24 episodes in total, organized into six phases, and we'll go through all of them step by step.

But before writing your first component, there are a number of foundational skills and software you need to prepare. Why are these prerequisites important? Because React isn't a framework — it's a library that runs on top of JavaScript. All JSX syntax and hooks are pure JavaScript. If your JavaScript foundation is weak, every subsequent episode will feel heavy.

Episode 0 is your roadmap: we make sure your foundational skills are sufficient, set up Node.js and tooling, then create your first React project with Vite. Once this episode is done, the entire series can be followed comfortably.

#Foundational Skills You Must Master

#HTML, CSS, and Modern JavaScript ES6+

React renders HTML in the browser, so you must understand the structure of HTML elements like div, section, button, and input, plus how to lay out pages with CSS. What matters even more is modern JavaScript ES6+: arrow functions, destructuring, the spread operator, template literals, let and const, as well as classes.

Modern JavaScript habits

const nama = "Arman"
const sapa = (orang) => `Halo, ${orang}!`
const [pertama, kedua] = [10, 20]
const gabung = { ...{ a: 1 }, b: 2 }
console.log(sapa(nama), pertama, kedua, gabung)

The code above uses destructuring const [pertama, kedua] = [10, 20] and the spread operator { ...{ a: 1 }, b: 2 }. Both will keep showing up throughout the series, so get used to reading this syntax.

#DOM, Event Handling, and Async Programming

React works on top of the DOM, and event handling in React is an abstraction of the browser's built-in addEventListener. You should also understand Promises, async/await, fetch, and setTimeout — because the data fetching in episode 8 relies entirely on these concepts.

#Command Line, Git, and Package Manager

Almost every React workflow runs through the terminal. You must be comfortable navigating directories with cd, running npm commands, and using Git for version control. You only need one package manager — this series uses npm, but pnpm and yarn are fully compatible too.

node --version
npm --version
git --version

The output of node --version must show version 20 or newer (LTS). If not, download the installer from the official Node.js website.

#Software You Need to Prepare

#Node.js LTS and npm

Node.js is the runtime that runs JavaScript outside the browser — it's what executes the React build toolchain. Make sure to use the LTS version, not a beta version, so you stay compatible with the package ecosystem.

node --version

Version 20.x or 22.x is the stable LTS at the time this series was written. The LTS version of Node.js also bundles npm automatically, so there's no need to install it separately.

#Browser and VS Code

A modern browser like Chrome, Firefox, or Edge is where you'll see the results and open React DevTools in episode 15. For the editor, VS Code is the most popular choice. Extensions worth installing:

• ES7+ React/Redux/React Native snippets: React component snippets.
• ESLint: shows lint errors directly in the editor.
• Prettier: automatically formats your code.
• Tailwind CSS IntelliSense if you use Tailwind later.

After installing VS Code, the ESLint and Prettier extensions will be used again in episode 19 for code quality.

#Recommended Hardware

React development isn't heavy work, but the build process and a browser with many tabs need memory. At least 8GB of RAM is recommended on Windows, macOS, or Linux. Any modern processor is more than enough for day-to-day development.

#Scaffolding Your First React Project with Vite

#Creating a New Project

Vite is the modern build tool used throughout this series. Run the following scaffold:

npm create vite@latest belajar-react -- --template react
cd belajar-react
npm install
npm run dev

The command npm create vite@latest belajar-react -- --template react creates a belajar-react folder with a ready-to-use React template. After npm run dev, open the URL shown in the terminal, usually http://localhost:5173 — if the boilerplate page appears, your environment is ready.

#The Folder Structure That Appears

Vite generates a structure we'll dissect in detail in episode 3:

belajar-react/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.jsx
    └── App.jsx

index.html is the entry point, src/main.jsx attaches React to the DOM, and src/App.jsx is your first component. Don't worry about the details — episodes 2 and 3 will break all of this down.

#Verifying the Environment

Before moving on, make sure the entire toolchain works. Open a new terminal and run:

node --version
npm --version
git --version
npm --prefix belajar-react run build

The command npm --prefix belajar-react run build runs the Vite production build. If it finishes without errors and creates a dist folder, your toolchain is fully functional.

One habit we'll use constantly: npm run dev for development and npm run build for production. Memorize these two commands because they'll appear in almost every episode.

#Conclusion

In episode 0 you've prepared the foundation for the entire series: making sure your foundational JavaScript ES6+, DOM, async programming, and Git skills are solid, setting up Node.js LTS and VS Code, then creating your first React project with Vite and verifying it with a production build.

Key takeaways:

• React is built on modern JavaScript: master ES6+, DOM, and async first.
• Node.js LTS, npm, and Git are the three must-have tools.
• Vite is the primary build tool: npm create vite for scaffolding.
• npm run dev for development, npm run build for production.
• VS Code with React, ESLint, and Prettier extensions speeds up your workflow.
• Final check: npm run build completes without errors.

In the next episode, episode 1, we'll discuss the history, background, and why ReactJS is needed — from React's birth at Facebook, the declarative UI philosophy, the DOM manipulation problem solved by the Virtual DOM, to why React became the primary choice for interactive apps and SPAs. Make sure your npm run dev is running, because the Learn ReactJS journey has only just begun!