Setup

Boilerplate code

In order to create a React application, run the following commands:

npx create-react-app bookstore --typescript
cd bookstore
npm start

We are using typescript because we can optionally add types to give us better autocomplete in our editor.

There are 3 files that are of importance:

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <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/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      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 main part of this file is: <div id="root"></div> This div tag is where we will eventually render our React application

src/index.tsx

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

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

In this file, we apply our global css and then render our app component to our "root" div tag above. The service worker part is for offline caching and other Progressive Web App functionality.

src/App.tsx

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" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

This is our App component, which will be our top level component. All React components must have a render function that return an HTML element. This is the default html that create-react-app gives us. Notice, that we are writing HTML directly inside our Typescript file. This is because it is actually .tsx and not .ts, which is Typescript Extension, a new language mainly used by React. Notice that some of the HTML tags have a property "className". In React, the "class" property on components is reserved, so if you want to apply a CSS class, you have to use "className" instead of "class". Also notice the curly bracket notation on line 10. In JSX or TSX, if you want to use anything other than a string inside an HTML element, you use this curly bracket notation to

To run the application:

$ npm start

If you use Yarn:

$ yarn start

The default Typescript configuration for create-react-app turns strict mode on, adds more strict type checking. If you want to turn this feature off, you can edit the "tsconfig.json" file

tsconfig.json

...
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true, <-- change this value to false
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
...
PreviousPrerequisitesNextStep 1

Last updated

Was this helpful?