Create-React-App from Scratch

Rakesh — Thu, 23 Jul 2020 11:12:16 +0000

Learn how to create Your First React App From Scratch.

Building UI nowadays has become relatively easy as it used to be with the evolution of frontend javascript libraries and frameworks.React, Angular, Vue are some of the prominent ones.React being the most widely used one.

Getting started with react requires some configuration with webpack and babel.Thankfully developers of react have provided us with a boilerplate react app to get started instantly.To get started assuming you have one of npm or yarn package package manager.

npx create-react-app YOURAPPNAME

or

yarn create-react-app YOURAPPNAME

This will create a biolerplate react app .


npm start

Visit localhost:3000 to start your react-app.

But if you want to get started from scratch then this article is for you.

How to get started with react from scratch?

Step 1:Create a folder of your desired name and inside that folder run


npm init -y

This will create a starter package.json file

Step 2 :Install necessary dependencies


npm i --save-dev webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react html-loader html-webpack-plugin inline-source-map


npm i --save react react-dom

or 


yarn add -D webpack webpack-cli webpack-dev-server @babel/core babel-loader @babel/preset-env @babel/preset-react html-loader html-webpack-plugin inline-source-map


yarn add react react-dom

Step 3: Create a **webpack.config.js* file alongside package.json file.


var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [new HtmlWebpackPlugin()],
 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot:true,
    liveReload:true
  },
devtool:'inline-source-map,
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
      },
{
      test: /\.html$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'html-loader',
      }
    }
  ]
}
};

Step 4: Create a src directory and index.js ,App.js ,index.html inside it.

Step 5: Babel config.Create a .babelrc file in your root folder.

 {presets: ['@babel/preset-env',@babel/preset-react]}

Step 6:create react app


**index.js**

import React from 'react'
import {render} from 'react-dom'
import App from './App

render(<App/>,
documentElementbyId('root')
)


**App.js**

import React from 'react'

export default function App(){
return (<div>Hello</div>)
}


**index.html**

<html>

<head>
</head>

<body>

<div id='root'></div>

</body>

</html>

Step 6: Create scripts in package.json


"start":"webpack-dev-server",
"build":"webpack --watch"

All Set.

 npm start

For production build

 npm run build

This is the setup behind the create-react-app.

Check out my website C7ech from more.

DEV Community: Rakesh

Create-React-App from Scratch