Simple React Project

While creating a new React project using Create React App is easy to do, the application that the default template generates contains items and content that aren’t essential for learning React. Distilling the generated application down to its essential items and content removes all distractions and allows you to focus on the basics.

When you finish this article, you should be able to:

Using a custom template

Deleting files from the standard Create React App template can get tedious. To help save you time, App Academy has a custom template that you can use with Create React App to generate a simple React application!

Just run the following command:

npx create-react-app my-app --template @appacademy/simple

Feel free to change my-app to whatever you’d like. Once the command completes, browse to the generated application folder and run npm start to start your application!

If you like deleting files…

If you still just want to use the template that comes with Create React App and want to delete the files yourself, here’s that guide for you to follow.

To start, use Create React App to create a new application:

npx create-react-app simple-project

Then open the simple-project folder in your code editor.

Simplifying the public folder

In the public folder, you’re only going to keep the index.html file, so remove all of the following:

The favicon.ico and robots.txt files are useful for applications that will actually be released and used by actual users, but not necessary for learning projects. The logo192.png and logo512.png image files are referenced in the manifest.json file and are the icons that browsers use in various contexts (home screen, application menu, etc.) The manifest.json file provides the metadata that’s used when your web app is installed on a user’s mobile device or desktop.

Now you can simplify the content of the index.html to this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

To get to the above HTML, you can:

Simplifying the src folder

In the src folder, you’re going to keep the following files:

And remove all of the following:

The App.css file is where you’d add styles that are scoped to the App component and the App.test.js file is where you’d write unit tests for the App component. While you’re learning React, styling components and writing unit tests won’t be a focus. If you want to add some basic styles for your application, you can use the index.css file to add global styles.

The logo.svg file was part of the visual design of the generated application. The serviceWorker.js file contains code that registers a service worker which allows the application load faster on subsequent visits if/when the application is released into production. The setupTests.js file contains a single import statement for a module that helps make it easier to write unit test assertions on DOM nodes.

Now you can update the contents of the App.js, index.css, and index.js files to the following:

// ./src/App.js

import React from 'react';

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

export default App;
/* ./src/index.css */

/* TODO Add site wide styles */
// ./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

For your reference, here’s a repo containing the final simple React project: react simple project

What you learned

In this article, you learned how to: