Progress:0%

React Core 6 min readLesson 1 of 1

React Introduction & JSX

Understand React components, virtual DOM, and JSX syntax.

### What is React? React is a JavaScript library created by Meta for building fast user interfaces based on reusable components.

What is JSX? JSX stands for JavaScript XML. It allows us to write HTML-like markup inside JavaScript code:

jsx

function WelcomeCard({ name }) {
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React learning portal.</p>
    </div>
  );
}
```

Interactive Sandbox

React Live State Component

Live W3-Editor

Edit code below and see instant live output in the preview box

Source Code InputHTML / CSS / JS

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>
</body>
</html>

Live Browser Result Live Result

Test Yourself With Exercises

Verify your understanding before moving to the next topic

Chapter Quiz

What is JSX in React?

First Lesson of Course

Course Completed! 🎉

Ask Gemini AI Assistant