DEV Community

Cover image for React Learning Journey - Day 2
Sathish 226
Sathish 226

Posted on

React Learning Journey - Day 2

#webdev #react #javascript #payilagam

Hello, dear readers!!

Welcome to Day 2 of my React learning journey. Today I learned some very interesting and important concepts related to JavaScript, JSX, Components, Props, and more. Let’s explore these in a simple and easy way!!

1.What is JavaScript (JS)?

JavaScript is a scripting language used to create dynamic and interactive content on websites. Without JS, web pages would be static like simple text and images.

Example:

let name = "React Learner";
console.log("Welcome " + name);
Enter fullscreen mode Exit fullscreen mode

2.What is JSX?

JSX stands for JavaScript XML. It allows us to write HTML inside JavaScript easily, especially useful in React for designing UI.

JSX Example:

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

- Difference between JS and JSX:

JavaScript (JS) JSX (JavaScript XML)
Pure scripting language. Syntax extension for JS (XML-like).
Cannot directly write HTML. Allows writing HTML tags in JS file.
Used for logic, DOM handling. Used in React for UI building.

3.What is SPA (Single Page Application)?

  • SPA is a web app that loads a single HTML page and dynamically updates content as the user interacts.
  • No page reload required.
  • Fast and smooth user experience.

4.What is MPA (Multi Page Application)?

  • MPA loads a new HTML page from the server whenever you click a link.
  • Each request sends a new page.
  • Traditional websites follow MPA.

- Difference between SPA and MPA:

SPA MPA
Loads a single HTML page. Loads multiple pages.
Faster after first load. Slower, reload on each page visit.
Example: Gmail, Facebook. Example: Amazon, Flipkart.

5. What is a Component in React?

A Component is like a reusable block of code that returns HTML using JSX.

  • There are two types:

1.Functional Component
2.Class Component

Functional Component Example:

function Welcome() {
  return <h1>Hello from React Component!</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Rules of React Components:

  • Always start component names with uppercase.
  • Components must return a single parent element.
  • Should not modify props directly (read-only).

6.What is <noscript> Tag?

  • If JavaScript is disabled in the browser, the content inside <noscript> will be displayed.
  • Useful to show a message for users with JS turned off.

Example:

<noscript>Your browser does not support JavaScript!</noscript>
Enter fullscreen mode Exit fullscreen mode

7.What is node_modules?

  • A special folder where all installed libraries and dependencies (via npm or yarn) are stored.
  • Auto-created when running npm install.

Note: Never push node_modules to GitHub; use .gitignore.

8.What is an Empty Fragment (<> </>)?

React components must return a single parent element. To avoid adding unnecessary <div>s, we use empty fragments.

Example:

<>
  <h1>Title</h1>
  <p>Description</p>
</>
Enter fullscreen mode Exit fullscreen mode

9.What are Props in React?

  • Props are short for "properties".
  • Used to pass data from parent to child component.
  • Read-only.

Example:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Welcome name="Sathish" />
Enter fullscreen mode Exit fullscreen mode

Output:

Hello, Sathish!

Reference:

[(https://react.dev/learn)]

[(https://developer.mozilla.org/en-US/docs/Web/JavaScript)]

Recap:

That’s all for Day 2! I learned many core concepts like JS, JSX, SPA, MPA, Components, Props, and more. Slowly but surely, React is becoming clear and fun to learn.

Stay tuned for Day 3!!

The expert in anything was once a beginner!! Keep Learning!!

Top comments (0)