What is ReactJS? Uses, Components, and Example

What is ReactJS?

ReactJS is a JavaScript library for building user interfaces. A user interface is everything the user sees and interacts with buttons, forms, lists, navigation bars, dashboards.

The core idea is simple: instead of writing one long HTML file, you break the interface into small independent pieces called components. Each component is a JavaScript function that returns some UI.

Think of a student dashboard page. In React, you would not treat it as one page. You would treat it as:

• A Navbar component
• A ProfileCard component
• A CourseList component, which contains many CourseCard components
• A ProgressBar component

Each one is written separately, tested separately, and reused wherever needed.

Why is it Used?

Three reasons, in order of importance:

1. Reusability - Write a CourseCard once, use it fifty times with different data.
2. Automatic UI updates - Change the data, and React updates only the parts of the screen that need to change.
3. Maintainability - A bug in the progress bar lives in one file, not scattered across a 2,000-line script.

Example

Here is the smallest possible React component:

function Welcome() {
  return <h1>Welcome to ReactJS</h1>;
}

export default Welcome;

How It Works

• function Welcome() - a normal JavaScript function. In React, a function that returns UI is a component.
• return <h1>Welcome to ReactJS</h1>; this HTML-looking syntax is called JSX. It is not HTML, and it is not a string. You will learn it in Module 3.
• export default Welcome; makes the component available to other files.

Component names must start with a capital letter. Welcome is a component; welcome would be treated as a regular HTML tag and fail.

Output

When this component is used in a page, the browser displays a heading that reads "Welcome to ReactJS".