Building React From Scratch

In a previous post we looked at creating a react application using create-react-app tool. Although it is an effective way to start developing your web app there will be some developers (like me) who are just not satisfied and will want to dig deeper till they hit rock bottom. In this post we'll get into setting up react from scratch with only the bare essential constituents.

Pre-requisite

Make sure you have these installed,

  • Node (v 8.10 and above)

  • NPM (v 5.6 and above)

Laying the Foundation

Open command prompt/terminal in the directory that you want to create your project. We start by creating a package.json file. In the terminal enter the command

npm init

You will be prompted to input a few details like package name, version etc. You can fill the details now or just press enter key to all and edit later.

Next we install the core library - React. To do this enter the command in the terminal,

npm install react react-dom

react-dom is another library which must be paired with react and serves as the entry point to the DOM .


Note: Keep the terminal/command prompt open till the end of the tutorial.


Create a folder named 'src'. The src folder will hold all the components and other code files.

Inside the src folder create an index.html file. Copy paste the below code


<div id="root"></div>


Note: The directory structure followed in this tutorial is my recommended convention. The reader is encouraged to follow his/her conventions provided it works.

Bring in the bricks

Next up we need to install some more dependencies for your react application to work and by dependencies I mean other libraries that are needed to build your application. We'll look at them one by one.


1.Webpack

Webpack is a module bundler. It packages your assets (code, css, images etc.) in a form easily usable by the browser. To know more click here. To install webpack and it's dependencies copy paste the below command,

npm install webpack webpack-cli webpack-dev-server webpack-cli html-webpack-plugin

For webpack to work it requires a configuration file to be present. Create a file webpack.config.js in the root directory (where package.json is present) and add the below code,


const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {

entry: path.resolve(__dirname, 'src/index'),

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'bundle.js'

},

module: {

rules: [{

test: /\.js$/,

include: path.resolve(__dirname, 'src'),

use: ['babel-loader']

},

{

test: /\.css$/,

use: ['style-loader', 'css-loader'],

},

{

test: /\.(jpg|png)$/,

use: {

loader: 'url-loader',

},

}

]

},

devServer: {

contentBase: path.resolve(__dirname, 'dist'),

port: 9000

},

plugins: [

new HtmlWebpackPlugin({

template: "src/index.html"

})

]

};



Finally in package.json under scripts add the following line


"dev": "webpack-dev-server"


2.Babel

Babel is a transpiler, meaning it converts your ES6 JavaScript code to ES5 JavaScript code so that it can run in browsers. Read more about it here. To install babel and it's dependencies copy paste the below command in the terminal,

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader

Similar to webpack, babel also requires a configuration file to be present. Create a file named ".babelrc" (yes the dot in the beginning was intentional) in the root directory and copy paste the below,


{

"presets" : [

"@babel/preset-env",

"@babel/preset-react"

]

}


3.Other dependencies

The above two are the essential dependencies to run react. But there are other dependencies that I recommend to use (and a must if you have used the above webpack config) for the proper functioning of assets like css, urls, images etc. Once again copy paste the below command to the terminal

npm install url-loader css-loader style-loader bootstrap

That's the end of the bare minimum dependencies that you'll need to run react.

Time To Build

It's time for our most favorite four letter word - CODE! We have everything that we need to build our application so without further ado we'll begin.

Open src folder and create an index.js file which is going to contain our App component. Import the required libraries and our App component and render it to the 'root' element which we created in index.html

index.js


import React from "react";

import {render} from "react-dom";


import 'bootstrap/dist/css/bootstrap.min.css';


import App from "./components/App";


render( <App/>

,document.getElementById("root"));


Create a folder named components in src which will contain your App component. Inside the component folder create a file App.js.

Now by the holy ritual upheld by developers world wide it is time to say a big HELLO to the world. Write a function named App which returns a div and then export it.


App.js


import React from "react";

function App(){

return(

<div className="app">

HELLO WORLD

</div>

);

}


export default App;


Our application is now complete. Let's run it. Open command prompt/terminal in the root directory and enter the command,

npm run dev

On successful compilation, open localhost:9000 to view your application.

Wrapping Up

Whew That's it folks! Now you have your very own react application that you built from scratch. It's up to you on how to scale and design your application as you wish. Although there are tools like create-react-app, next.js for quick starting your react application and starting from scratch is tiresome compared to that, it's always good to know a new technology end to end to dive further.



#Programming #React

©2020 by DevDecimal.