How to React. Create React App.

on December 21, 2017

Create React App is a powerful tool to build React application with zero configuration. You should not install environment and tune Webpack, Babel, and other necessary tools; you can write code at once, without any distress.

Let's go ahead and install the boilerplate.

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

That is all! Now you can write a business logic for your application.

Pros.

  1. Create React App is a tool created by React.js developers. These guys really know how the app should work.
  2. You can quickly update your configuration. Just change the react-scripts version in your package.json file.
  3. There are no unnecessary files like .rc files or webpack.config or something else. Your app folder is much cleaner than usual.
  4. It is stable. Extremely stable. It will work on each OS and each environment. You will not waste your time trying to fix your crashing app.
  5. It is extendable. There are a lot of plugins and extensions so that you can build your own environment.

Cons.

  1. If you want to customize your webpack configuration and run npm run eject, you will not be able to receive configuration updates. Also, it will move all config files to your project folder.
  2. It does not support server-side rendering out-of-the-box.

Let's describe the project structure.

In the root folder of the project you can find a package.json file. It contains the project info and a list of dependencies which are located in the "/node_modules" folder and can be installed by the "npm install" command, and a list of scripts which can be run with "npm run" command. There are four scripts by default: "start" runs the application in development mode; "build" assembles the production files; "test" runs the unit tests. The "eject" script unpacks the react-scripts to the project folder, do not use it if you want to receive updates.

The next important part is the "/public" folder. It can be accessed by a user. Here you can find an index.html file where you can change app layout, page title, and favicon.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

The source of your app is placed in the "/src" folder; you will write your code here. Also, here you can see how to interact with styles, images, and other assets. The entry point is index.js, where we import and mount our app to the div with "root" id via ReactDom library. Also, here we import styles from index.css. Usually, they are global styles; I recommend importing small CSS files for each component. It will help make the components reusable.

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

ReactDOM.render(, document.getElementById('root'));
registerServiceWorker();

The next is App.js. It is a React component; here, you can view JSX markup. The other important thing to know is how to import and render images. Here, you can see an example in logo.svg  

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">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Finally, we have App.test.js.

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);
});

Here, you can write unit tests and ensure that your app works correctly. I also recommend creating one file for each component if you need tests, of course.

These are the basics of Create React App. In the next article, we will talk about React Router.

Share This Article