What is JSX (JavaScript Syntax Extension)? 💡

JSX is a syntax extension for JavaScript used in React to describe what the UI should look like. It allows you to write HTML elements in JavaScript and place them in the DOM without using methods like createElement() or appendChild(). JSX makes it easier to write and add HTML in React.

// Without JSX
const element = React.createElement('h1', null, 'Hello, world!');

// With JSX
const element = <h1>Hello, world!</h1>;

What is a Component? 🧩

A component in React is a reusable piece of UI. It is a JavaScript function or class that optionally accepts inputs (props) and returns a React element that describes how a section of the UI should appear. Components let you split the UI into independent, reusable pieces.

Types of Components:

Stateless / Functional Components 🌀 They do not manage or hold any internal state. They simply receive data through props and render UI based on that data. They are essentially functions that take props as an argument and return a React element.

Stateless Components are ideal for presentational purposes where you just need to render the data passed via props. They are simpler and easier to test.

// Functional Component
function Greeting(props) {
  return <h1>{props.message}</h1>;
}

// Usage
<Greeting message="Hello, World!" />

Stateful / Class Components ⚙️ They can be referred as functional components with Hooks, i.e. they maintain their own internal state. They manage the state and can change it over time usually in response to user’s actions or subsequent events.

// Class Component
class Greeting extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}

// Usage
<Greeting message="Hello, World!" />

Stateful Components are useful when you need to manage state and respond to user interactions or other events. With the introduction of Hooks in React, functional components can also be stateful, which has led to a preference for functional components in modern development.

What are Props? 📦

Props (short form for for "properties") are read-only attributes used to pass data from one component to another. They are passed to the component similarly to how arguments are passed to functions. Props allow you to customize the behavior and appearance of components.

Example Usage of Props:

// Parent Component
function App() {
	return (
		<div className="App">
			<Job salary={900000} position="Senior SDE" company="Amazon" />
			<Job salary={70000} position="Junior SDE" company="Google" />
			<Job salary={110000} position="Project Manager" company="Netflix" />
		</div>
	);
}

// Child Component
function Job(props) {
  return (
	  <h1>{props.salary}</h1>
	  <h1>{props.position}</h1>
	  <h1>{props.company}</h1>
  );
}

// Rendering the App
<App />