Build interactive UIs with React — our hands-on tutorial guides you from zero to building full applications.
React is a JS library for building user interfaces. Let's create your first component!
// App.jsx
import React from 'react';
function App() {
return (
<div>
<h1 className="text-3xl font-bold">
🎉 Welcome to React!
</h1>
</div>
);
}
export default App;
App.jsx
React apps are built using components - reusable UI building blocks that manage their own state.
function Button({ text }) {'{'}
return {'<'}button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">{text}</button>
{'}'}
JSX is JavaScript syntax with HTML-like elements that compiles to React.createElement calls for defining component UIs.
const App = () => {'{'}
return (''
{'<'}h1>Hello {user.name}</h1>
{''}
{'}'}
Dive deeper into React's ecosystem with these next steps, building on your HTML/CSS and JavaScript knowledge.
💡 Advanced React Patterns