Key Topics

• Creating components JSX
• useState and State-based Rendering
• useEffect and Fetching Data
• Using Props

Overview: Summary

Creating components and JSX

How to Define a Component

A React component is simply a JavaScript function, but its name must start with a capital letter. With function MyComponent() {}, you define a JavaScript function with the name MyComponent, as shown in the example below.

export default function MyComponent() {}

How to Add HTML Markup Using JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML elements and components in a format similar to XML or HTML tags directly within JavaScript code. It is commonly used with React, a popular JavaScript library for building user interfaces.

JSX looks like regular HTML markup, but it is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

Below is an example of a JavaScript function that defines a React component using JSX syntax.

export default function MyComponent() {
	return (
		<div>
			<p>Hello World!</p>
			<img src="some_img.jpg" alt="some text" />
    </div>
	)
}