Create a React App From Scratch

02/02/2018
02/02/2018 erbileren
The estimated reading time for this post is 2 minutes

Here is the easiest way to start a new react project:

npm install -g create-react-app
create-react-app my-app

It can take several minutes to install all packages. After creating project is completed, you can start the project with the following commands:

cd my-app
npm start

In that case, you will see all necessary node modules are installed inside your project. When you create a react app using create-react-app, all configurations are set automatically. This situation may cause a need to change on default configuration if you want to add extra packages into your project. If you have not a high level knowledge about webpack configuration, it is easier to start from scratch.

For more information, you can check the official documentation page on https://reactjs.org/docs/add-react-to-a-new-app.html.


Here are instructions for set up a scratch react project…

Our project folder structure will be like in the following at the end:

+ node_modules
+ src/
- App.js
- index.html
- index.js
- package.json

Let’s get started!

First, we need to create a project directory:

mkdir react-app-scratch
cd react-app-scratch
npm init

In the above snippet, npm init helps us to start a new node project. During initialization, you will be prompted to input some information about your project. You can fill them or just press Enter for all.

Next, we will install react and style related packages:

npm install --save react react-dom
npm install --save-dev style-loader css-loader less-loader
npm install --save-dev less

style-loader, css-loader, and less-loader will help us to append style tag into the index.html directly.

We also need to install and configure babel to convert the es6 code to es5.

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register

After babel and supporting libraries are installed, we will configure our app updating package.json with the following lines:

"babel": {
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

All of the code files will be inside the src/ folder. Let’s create our main app file, App.js inside the src/.

mkdir src
cd src
touch App.js

Open the App.js file and add the following code to it.

import React, {Component} from 'react';

class App extends Component {
  render () {
    return (
      <p>This is my new react app</p>
    )
  }
}

export default App

Now, it is time to create our index.html file inside the project root directory, and fill with following lines:

<!DOCTYPE html>
<html>
  <head>
    <title> React App Scratch </title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="/bundle.js"></script>
  </body>
</html>

The configuration file of the project needs an entry point. So we will create the index.js file in the same path with the index.html.

Here is how our index.js file looks like:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './src/App';

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

And this is it! You have a react project now…

Also the entire source codes are on Github: https://github.com/erbileren/react-app-scratch/tree/master/part1-react

, ,

Comment (1)

Leave a Reply

Your email address will not be published. Required fields are marked *