1,651 reads

How To Create React Apps From Scratch: [Part 1 - Setting Up]

by AleksandarJanuary 26th, 2020

Too Long; Didn't Read

To follow this ReactJS course series you should have some basic knowledge in JavaScript programming language, even better if you know ES6. To create a React project we need to use a text editor or an IDE to open our React project. The most important file here is the "index.js" file, for now we see JSX code (we will see what it is) and remove all in the wrapping divX code. To start our development server with the command "npm start", our browser will open the app for us at localhost:3000.

Companies Mentioned

featured image - How To Create React Apps From Scratch: [Part 1 - Setting Up]

Since React is currently one of the most in-demand front-end technology, I have decided to start a course series that intends to show you how to create the React js app from scratch to finish.

Today most of the front-end applications are mostly showing real-time data fetched from some backend service, I have decided that it will be useful to create a cryptocurrency single page application that will show prices and chart history of cryptocurrencies that will be fetched from some backend service.

Note: To follow this ReactJS course series you should have some basic knowledge in JavaScript programming language, even better if you know ES6.

Setting Up React

Before we start setting up the ReactJS app, firstly we need to have node.js installed on our computer. To check if node.js is installed you should open up the terminal or PowerShell in Windows and type:

node -v

If this shows you the node version, you can skip the installing part, else you should open https://nodejs.org/ and there you will find the latest version of node.js.

Setting up React js is easy, Firstly we will name the app crypto-app. Next, we will open up the terminal with a path to the folder where we want the app to be stored. To create a React project we need to use the following command:

npx create-react-app crypto-app

Feel free to name your app differently if you want to, but in my case, I will name the app crypto-app.

After a couple of seconds, the setup will finish with a couple of messages about our new React app. We can now use the following commands when we are inside the directory of the app:

npm start       #starts the development server
npm run build   #bundles the app into static files for production
npm test        #starts the test runner

To start our development server, first, we need to go into the project folder with the command "cd crypto-app", when we are inside the project folder we can finally start the development server with the command "npm start", our browser will open the app for us at localhost:3000, where we should see the React welcome screen.

React File Structure

To open our React project we need to use a text editor or IDE. When we open up the project in the text editor we can see a couple of configuration files and folders.

- node_modules - contains all node dependencies

- public - public files that are served

- src - source code of our ReactJS app

.gitignore - record which files should git ignore

package-lock.json - contains an exact, versioned dependency tree

package.json - contains various metadata relevant to the project

README.md - readme markdown file

First, we will look into the public folder. Here we have one important file and that is the "index.html". This is a normal Html page which is a single page Html, in other words, we are not going to add more Html files to this project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Note: I have deleted the comments so the file will look a bit cleaner, as it is not that complex as it looks like.

If you need to add any inputs, libraries like CSS, or meta tags you can do that here, in this file. Most important part about this file that you should remember is that "<div id="root"></div>" is where the React application is mounted.

Another interesting place for us is the "src" folder. When we open our "src" folder we can see a couple of files here, these files are our React application. The most important file here is the "index.js". Let's see how does it look:

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: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Here the "ReactDOM.render(<App />, document.getElementById('root'));" method renders our React application. As the first argument we have "<App />" component (we will look into React components in depth later, for now, you can think of it like some element) which was imported at the top of our file.

The second argument is where we get access to the root element in our DOM, in the Html file, which we saw before in the public folder.

Now let's open the "App.js" file, our only ReactJS component for now.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</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;

Here we see JSX code (we will see later what it is), for now, we will remove all of the content in the wrapping div, also remove the logo import at the top and we will add h1 tag just for testing purpose with text inside it: Hello, World!, and then we will save it!.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

App.js

Because we have "npm start" command running, this will automatically trigger recompilation, and will also automatically reload your page (localhost:3000), which now you will see: Hello, World, instead of the old content. We can also remove the "logo.svg" file as we no longer needed. Lastly, let's see the two CSS files available, In the "App.css" we will delete everything but the first ".App" class.

.App {
  text-align: center;
}

App.css

The rest of the files are the "serviceWorker.js" which is related to the progressive web app, and some files related to unit testing.

Part Overview

In this part we have seen how we can create React application from scratch, also we have seen the project structure of newly created React application, and at the end, we have tweaked some of the components.

The code from the course is available on GitHub: Create React App From Scratch on the branch: 01-setting-up.

This post is a part of the series Create React App From Scratch you can find the other parts at CodeSpot

Next part: Create React App From Scratch Part 2: Into Components

(Originally Published here)