Search⌘ K
AI Features
Home
Courses
The Road to React: The One with Hooks

Simple React App

Explore the basics of React by running your first simple application in a sandbox environment. Understand the roles of important project files like index.js and app.js, and learn how to experiment with code safely to see immediate results.

We'll cover the following...

React is a library built on top of JavaScript, so having a good grasp of JavaScript for React is essential for building modern applications. This coding environment is built specifically for you to practice react in a sandbox setting, where you can experiment with code without any fear of breaking a real production system.

Here is the proverbial Hello World application in React. It is hosted in the Educative Single Page Application (SPA) widget. This will be our coding environment throughout this course, so you’ll see it over and again.

Press the RUN button to see hello world displayed on the output tab below:

import React from 'react';
require('./style.css');

import ReactDOM from 'react-dom';
import App from './app.js';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

Congratulations!🎉 You have run your first React app.

Let’s walk you through the SPA environment. The names of the files that are part of the project (index.js, app.js, and style.css) are displayed on the left-hand side. Clicking on any of these names will open the respective file in the code editor.

As you practice react, you may make changes to any file and click the RUN button to run the application with the modified code. This is the best way to see the immediate impact of your changes.

📜 Explore the code and the widget, without worrying too much about the syntax, as it will be explained soon.