Learn React: create React app with no build configuration

If you're looking for the best way to structure a React application, you can spend hours trying to find a good solution. So the developers at Facebook have built the Create React App tool that helps you to create a React application without having to specify any build configuration, instead you can just focus on the code. The Create React App works on macOS, Windows, and Linux and only takes a few minutes to set up.

Install npm and NodeJS

First, you will need npm installed on your machine. Node.js is required to install npm, so you will need to install Node.js also. You can install it from the official Node.js website. Downloads for  Linux, macOS, and Windows are available. To check if NodeJS is installed just run:

node -v

npm install npm@latest -g

npm -v

After successful npm installation, you are ready to install create-react-app package. You can also install create-react-app with other dependency management tools as Yarn, but for this article, we will use npm. To install create-react-app run:

npm i create-react-app

Creating an app

Run create-react-app init with providing application name as the last parameter:

npm init react-app my-app

This might take a couple of minutes, to install all of the dependencies as react, react-dom, and react-scripts. After that, you should see a successful message.

New directory should be created called my-app inside the folder where the init command was executed. The initial project structure with all the dependency will be created inside my-app folder.

Readme.md file contains all of the information on how to perform common tasks. Inside package.json will be all of the dependencies which are installed inside the node_modules folder. The src folder contains all of the JS and CSS files. Also, src is the only directory by default that is processed by Webpack, so you will need to put all js and css files there. You can create more subdirectories or rename and delete other files.

You can run the application inside the newly created folder by executing:

npm start

After that, you should see Compiled successfully message.

Application will start in development mode, and after every code change page will automatically reload with the new changes. It will be automatically started on  http://localhost:3000 on your browser.

Congratulations, you have successfully created and start React application. To add your own code inside src open App.js file. Inside App-intro paragraph delete default text and add your own e.g My first React application ! .Save it.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          My first React application !
        </p>
      </div>
    );
  }
}
export default App; 

Application should reload with the new changes, and new My first React application !  text should be displayed.

For further development or file changes, one thing to note is that

public/index.html is the page template and

src/index.js is the JavaScript entry point

so you can't delete or rename those files.

Available scripts

You have already run npm start to run the app in the development mode. There are also few other scripts available. To launch the test runner in the interactive watch mode run:

npm test

This will execute the tests. So far there is just one test available inside App.test.js, file.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

It checks if the App component will render successfully. Application created with create-react-app uses Jest as its test runner.

To bundle React application and get minified files run:

npm run build

A new directory called build will be created with a production build of your app. 

If you need full control over configuration files as Webpack, ESLint, Babel you can eject them.  

npm run eject

This command will remove single build dependency.

Conclusion

When you need to learn React in a feature-rich dev environment, you need to create a single page application or create examples with React for your libraries and components, create-react-app is a perfect choice for you. For further development check official User Guide.