React Introduction

What React is and why it is popular.

✍️ 3 exercises + code challenge in this lesson

Next ❯

React is a JavaScript library for building user interfaces, created at Facebook (Meta). It powers Facebook, Instagram, Netflix, Airbnb and countless other apps.

Key ideas

Components: build the UI from small, reusable pieces.
Declarative: describe what the UI should look like for a given state, and React updates the page for you.
Virtual DOM: React calculates the minimum changes needed, which keeps updates fast.

You should know HTML, CSS and modern JavaScript (arrow functions, destructuring, array methods) before learning React.

Key Takeaways: React Introduction

Mastering React Introduction helps you write clean and reliable React code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

React Introduction Code Example

React

<div id="root"></div>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.25.6/babel.min.js"></script>

<script type="text/babel">
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
function App() {
  return <h1>Hello, React! 👋</h1>;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>

Free sign-in required · Google login available

React Introduction Practice Exercises

Check what you learned in “React Introduction”.

/ 3 solved

Fill in the blank

A component returns JSX.

function App() {
   <h1>Hello</h1>;
}

✓ Correct! Not quite. Try again.

Multiple choice

What is React?

A JavaScript library for building user interfaces A database A CSS framework A server language

✓ Correct! Not quite. Try again.

Code challenge

Make the App component render an <h1> with the text "Hello React".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Next ❯

React Get Started

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

React Introduction

Key ideas

💡 Key Takeaways: React Introduction

React Introduction Code Example

React Introduction Practice Exercises

Key Takeaways: React Introduction