Create React App From Scratch Part 1: Setting Up
Series Introduction
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 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, if you don't have any installed, you can check my post about Top 5 Best Text Editors. 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.
To learn React much deeper, I recommend you to read this book:
The Road to learn React: Your journey to master plain yet pragmatic React.js.
If you prefer a video course, I highly recommend you to take a look at this course on Udemy:
The code from the course is available on GitHub: Create React App From Scratch on the branch: 01-setting-up.
Next part: Create React App From Scratch Part 2: Into Components
Tweet