Overview of the Lesson

Hello, space explorers! Get ready for an exciting journey into the React universe. Today, we'll learn what React is, how to create a simple functional component, understand the Virtual DOM, dive into JSX, and explore the basic structure of a React project. So, let's buckle up and get started!

Introduction to React: Library or Framework?

React is a JavaScript library developed by Facebook. As opposed to a framework, React gives you the flexibility to use only the parts you need, thereby making it a "library". If you were to imagine your React application as a house, the components would be its building blocks.

Creating a Simple Functional Component

Think of a React component as a piece of Lego that is reusable and can be used to build different shapes. Here's how to create a functional component:

We've composed a basic React functional component that returns JSX. It's like a Lego block that says, "Welcome to React!".

Anatomy of a Minimal Functional Component

The WelcomeMessage function is a popular type of React component, known as a functional component. The return statement outputs JSX, while export default WelcomeMessage; allows us to use our component elsewhere, akin to attaching it to a larger Lego structure.

Introduction to JSX
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal