DEV Community

Cover image for Kicking Off My React Learning Journey -Day 1
Sathish 226
Sathish 226

Posted on

Kicking Off My React Learning Journey -Day 1

#webdev #javascript #react #payilagam

Hello Coders!!

Today I started my React JS learning journey and I’m excited to share what I learned. If you are also a beginner, this post will help you understand the basic.

1.What is React?

React is a JavaScript library used to build user interfaces (UIs), especially for web applications.

Example:

const element = <h1>Hello, React!</h1>;
Enter fullscreen mode Exit fullscreen mode

In the above code, this looks like HTML — but it’s actually called JSX (JavaScript XML) — which React uses to describe UI.

2.History of React:

1.Created by Jordan Walke at Facebook in 2011.
2.Open-sourced in 2013.
3.Today, companies like Facebook, Instagram, Netflix, and WhatsApp use React to build their UIs.

3.Why Use React?

  • Component-Based: Build reusable components.
  • Fast Rendering: Thanks to the Virtual DOM.
  • SEO Friendly: Fast load time helps SEO.
  • Large Community: Easier to get help.
  • Used in Industry: React skills are in high demand.

4.Library vs Framework (Simple Explanation)

Library Framework
Gives pieces to build Gives full structure
You control flow Framework controls flow
Example: React Example: Angular

React = Library - You choose how to build your app.

5.What is NPM (Node Package Manager)?

NPM is a tool to install libraries/packages into your project.

Example:

npm install react
Enter fullscreen mode Exit fullscreen mode

This command will install React into your project.

6.How to Install NPM?

You need Node.js to use NPM.

Steps:

1.Download from [(https://nodejs.org.)]

2.Install Node.js — NPM comes automatically.

3.Check installation:

node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

7.What is NPX? How to Use It?

  • NPX runs Node packages without permanently installing them.

Example:

npx create-react-app myApp
Enter fullscreen mode Exit fullscreen mode

This command creates a new React app quickly.
No need to install create-react-app manually.

8.JS DOM vs React DOM:

JS DOM React DOM
Real Document Object Model Virtual DOM (in memory)
Slow updates on large changes Fast, efficient updates
Example: Example: 
document.getElementById("root").innerHTML = "Hi";
Enter fullscreen mode Exit fullscreen mode 
ReactDOM.render(<h1>Hi</h1>, document.getElementById("root"));
Enter fullscreen mode Exit fullscreen mode

React updates only what is needed using Virtual DOM — faster and smoother.

Recap:

  • React is a JS library, not a framework.
  • Used for building fast, reusable UI components.
  • We install it using NPM/NPX.
  • React DOM uses Virtual DOM for speed compared to normal JS DOM.

Reference:

[(https://www.geeksforgeeks.org/software-engineering/software-framework-vs-library/)]

[(https://www.shiksha.com/online-courses/articles/framework-vs-library/)]

Learn!! Build!! Repeat!!...

Top comments (0)