The React Application Example

Example

Replace all the content inside the <div className=”App”> with an <h1> element and view the changes in the browser after clicking Save.

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

The result:

What’s Next?

With your React environment set up, you’re ready to explore key concepts in React. To follow along, simplify the src folder to just index.js and remove any unnecessary code to match the example shown in the “Show React” tool below.

Example

Click the “Run Example” button to view the result.

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';

const myFirstElement = <h1>Hello React!</h1>

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);