A little React Starter App :

Let’s look at the basic setup of React Application :

  1. Create a folder “react-starter-kit”.
  2. use terminal at the folder root level for terminal options or VSCode where it comes with in-built terminal.
  3. Use “npm init” to add package.json file.
{  
"name": "react-starter-kit",
"version": "0.0.1",
"description": "react starter kit",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack-dev-server --open --mode development --watch- content-base"
},
"keywords": ["react", "webpack" ],
"author": <Author name>,
"license": "MIT",
"dependencies": {
"html-webpack-plugin": "^3.2.0",
"lodash": "^4.17.15",
"path": "^0.12.7",
"raw-loader": "^4.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.4"
},
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"@babel/preset-react": "^7.7.4",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.0",
"sass-loader": "^8.0.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
}
/node_modules
/package-lock.json
{ “presets”: [“@babel/preset-env”, “@babel/preset-react”]}
<html> 
<head>
<title>React Redux Starter Kit</title>
</head>
<body>
<div id=”app”></div>
</body>
</html>
import React from ‘react’;
import ReactDOM from ‘react-dom’;

ReactDOM.render(
<div>Welcome to React Application</div>,
document.getElementById(‘app’)
);
const path = require(‘path’);
const webpack = require(‘webpack’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {
mode: ‘development’,
entry: ‘./src/index.js’,
output: { path: path.resolve(__dirname, ‘dist’),
filename: ‘starterKit.bundle.js’ },
module: {
rules: [ { test: /\.(js|jsx)$/, use: ‘babel-loader’ },
{ test: /\.txt$/, use: ‘raw-loader’ },
{ test: /\.css$/,
use: [
{loader : ‘css-loader’},
{loader : ‘sass-loader’}
]
},
]
},
resolve: {
extensions: [“.js”, “.jsx”, “.json”] },
plugins: [ new webpack.ProgressPlugin(),
new HtmlWebpackPlugin(
{
template: ‘./src/index.html’,
filename: ‘index.html’
}),
]
};
  1. Download all the dependences through “npm i

--

--

--

Full stack developer, Blogger, Poet, Writer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akarsh Saraff

Akarsh Saraff

Full stack developer, Blogger, Poet, Writer

More from Medium

Some Changes in React Router v6

Things to know about ReactJs