Understanding React Components and Core Concepts

What is Component?
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

React components are mainly classified into two types:

• Functional Components

• Class Components

1. Function Components
Functional components are like normal JavaScript functions. They take input called props and return UI elements to display on the screen.

function Welcome() {
  return <h1>Hello React</h1>;
}

2. Class Components
Class components are used for more complex components where we need detailed control over state and lifecycle methods.

import React from "react";

class Welcome extends React.Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

.js
A .js file contains standard JavaScript code and is mainly used to write logic and functions.
It is commonly used for regular JavaScript operations and does not necessarily include UI-related code.

.jsx
JSX (JavaScript XML) is a JavaScript extension that allows developers to write HTML-like syntax inside JavaScript code.

Babel
Babel is a JavaScript compiler that converts modern JavaScript and JSX code into browser-compatible JavaScript.

XML
XML (eXtensible Markup Language) is a flexible, text-based markup language designed to store, organize, and transport data in a structured and self-descriptive format.

export
export is used to share variables, functions, or components from one file so they can be used in another file.

This type of export is called a named export.

export default
export default is used when a file exports only one main value, usually a React component.

import
import is used to bring exported code into another file so it can be used.