What is React.js? Complete Beginner Guide
React is an open-source JavaScript library used for building user interfaces, particularly for Single Page Applications (SPAs). It was developed by Meta (Facebook) and is currently one of the most popular tools in modern web development.
What is React?
At its core, React allows you to build a website by breaking it into small, independent pieces called components. These components can be things like a Navbar, Button, or Profile Card.
Instead of refreshing the entire page when a user interacts with it, React updates only the specific part that has changed. This makes applications faster and improves user experience.
Core Concepts of React
JSX (JavaScript XML)
React allows you to write HTML-like code directly inside JavaScript. This is called JSX, and it makes the code easier to read and write.
What is TypeScript (TS)?
TypeScript is simply JavaScript with added type support. While JavaScript is loosely typed, TypeScript is strongly typed.
TS files (.ts) are used for logic such as functions, classes, and API calls that do not include UI code.
The main benefit of TypeScript is that it catches errors while you are writing code instead of when you run the application. For example, if a function expects a number but you pass a string, TypeScript will immediately show an error.
What is TSX?
TSX stands for TypeScript XML. It is the TypeScript version of JSX.
TSX files (.tsx) are used for React components because they include both TypeScript logic and UI elements (HTML-like code).
How to Start a React Project
The modern way to start a React project is by using Vite, which is faster and lighter than older methods.
Step 1: Install Node.js
Before creating a React project, make sure Node.js is installed on your system.
You can check using:
node -v
npm -v
Step 2: Install NVM (Optional)
To manage Node versions easily, you can install NVM.
nvm install 18
nvm use 18
Step 3: Create a React Project
Run the following command in your terminal:
npm create vite@latest my-react-app -- --template react
Step 4: Navigate to Project Folder
cd my-react-app
Step 5: Install Dependencies
npm install
Step 6: Run the Development Server
npm run dev
Then open your browser and visit:
http://localhost:5173
Understanding Important Concepts
Components: The Building Blocks
React applications are built using components. Instead of creating a whole page in one file, you create small reusable parts like Navbar, Sidebar, or ProductCard.
The benefit is that you can reuse these components across different parts of your application. If you update one component, the changes will reflect everywhere it is used.
JSX and TSX: Combining UI and Logic
In traditional development, HTML and JavaScript are separate. React combines them.
JSX allows you to write UI inside JavaScript, while TSX adds type safety using TypeScript. This helps prevent errors before running the code.
Virtual DOM: The Performance Advantage
React uses a Virtual DOM to improve performance.
In traditional DOM, updating one part may reload the entire page. In React, the Virtual DOM compares changes and updates only the required part.
This makes the application faster and more efficient.
State and Props: Data Flow
React uses State and Props to manage data.
Props (short for properties) are used to pass data from a parent component to a child component. This is a one-way data flow.
State is the internal memory of a component. When a user interacts with the application, the state changes, and React automatically updates the UI.
Conclusion
React is a powerful and efficient library for building modern web applications. It allows developers to create reusable components, manage data easily, and build fast user interfaces.
If you want to start your journey in frontend development, learning React is a great choice.
