React Component

This video introduces the concept of components in React, explaining how to create and use them to build reusable and modular user interfaces, with practical examples and best practices.

React is a simple library with main goal of giving you tools to create UI components. A component represents part of your user interface. Let’s take this image of academeez homepage as example:

If we would like to create this homepage using React, we can create a component for the Header, a component for those lesson cards, and basically create different ui components that together will construct this screen.

After we create a UI component with React, that component turn to a new tag (we use syntax similar to HTML that is called JSX - more on that later in the course), so if you created a UI component for Header, you can now reuse that component by placing the <Header /> tag.

Component in React is a function

A component in React is represented by a function that usually returns a syntax that is similar to HTML (JSX) which describes how the component should look like. Let’s take a look at a simple component that will render a button:

function MyButton() {
  return <button>Click Me</button>
}

Exercise - your first component

First lesson and you’ll already write your first React UI Component. No need to install anything, you can simply write the exercise solution here in the site. Create a component that will display a login form with 2 inputs - username and password, and a button to submit the form. There is a solution to the exercise below so you can see the result.

export default function Login() {
return (
	<h1>Write your solution here</h1>
)
}

Open Sandbox

Solution

export default function Login() {
return (
	<form>
		<div>
			<label>Username</label>
			<input type="text" />
		</div>
		<div>
			<label>Password</label>
			<input type="password" />
		</div>
		<div>
			<button type="submit">Login</button>
		</div>
	</form>
)
}

Read-only

Open Sandbox

Summary

React essence is to give you an easy api to create reusable UI components. A component is a function that returns a JSX syntax (resembels HTML) that describes how the component should look like.
You saw how easy it is to create your first React component