Exploring the Universe of React: From Ground Zero to Your First Functional Component

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: JSX function WelcomeMessage() {return (<div> Welcome to React! </div>);} export default WelcomeMessage; 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

JSX allows us to write HTML-like syntax within our JavaScript code, bridging the gap between HTML and JavaScript. JSX const element = <h1>Hello, World!</h1>; const element = <h1>Hello, World!</h1>; Although it looks like HTML, it's actually JavaScript with a special syntax.

React's Virtual DOM

Consider the Virtual DOM as an artist sketching their design before painting it on the canvas. React's Virtual DOM is a lightweight copy of the real DOM where React first applies changes. It then uses this to calculate the most efficient way to implement the same changes to the real DOM.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

JSX

const element = <h1>Hello, World!</h1>;

my-app
├── README.md
├── node_modules
├── package.json
├── public
│   ├── index.html
│   └── favicon.ico
└── src
    ├── App.js
    ├── index.js
    ├── App.css
    └── index.css

my-app
├── README.md
├── node_modules
├── package.json
├── public
│   ├── index.html
│   └── favicon.ico
└── src
    ├── App.js
    ├── index.js
    ├── App.css
    └── index.css

JSX

import React from 'react';

function WelcomeMessage() {
  return <div>Welcome to React!</div>;
}

export default WelcomeMessage;

import React from 'react';

function WelcomeMessage() {
  return <div>Welcome to React!</div>;
}

export default WelcomeMessage;

JSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import WelcomeMessage from './WelcomeMessage'; // assuming the WelcomeMessage is in the same folder

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<WelcomeMessage />);

import React from 'react';
import ReactDOM from 'react-dom/client';
import WelcomeMessage from './WelcomeMessage'; // assuming the WelcomeMessage is in the same folder

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<WelcomeMessage />);

JSX

// This is a single line comment in JavaScript
<div>
  Welcome to React! {/* This is a single line comment in JSX */}
</div>

// This is a single line comment in JavaScript
<div>
  Welcome to React! {/* This is a single line comment in JSX */}
</div>

JSX

/*
This is a multi-line comment
in JavaScript
*/

<div>
  {
    /*
    This is a multi-line comment
    in JSX
    */
  }
  Welcome to React!
</div>

/*
This is a multi-line comment
in JavaScript
*/

<div>
  {
    /*
    This is a multi-line comment
    in JSX
    */
  }
  Welcome to React!
</div>

my-app
├── README.md
├── node_modules
├── package.json
├── public
│   ├── index.html
│   └── favicon.ico
└── src
    ├── App.js
    ├── index.js
    ├── App.css
    └── index.css

JSX

import React from 'react';

function WelcomeMessage() {
  return <div>Welcome to React!</div>;
}

export default WelcomeMessage;

JSX

import React from 'react';
import ReactDOM from 'react-dom/client';
import WelcomeMessage from './WelcomeMessage'; // assuming the WelcomeMessage is in the same folder

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<WelcomeMessage />);

JSX

// This is a single line comment in JavaScript
<div>
  Welcome to React! {/* This is a single line comment in JSX */}
</div>

JSX

/*
This is a multi-line comment
in JavaScript
*/

<div>
  {
    /*
    This is a multi-line comment
    in JSX
    */
  }
  Welcome to React!
</div>