A little React Starter App :

Every where now it’s a single page application, Though it’s React or Angular. Most of the beginner’s face difficulties to set up the working repositories. Here is my small attempt that may help.

Lets get into a small introduction of javascript libraries that is used to build a React application :

React : It is a Javascript Library, maintained by Facebook and used for creating single page application. (https://reactjs.org/) ( Not to forget it’s virtual DOM. ).

Webpack : is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging. (https://webpack.js.org/concepts/).

Babel : Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript. With Babel, you can use the newest features of JavaScript (ES6 — ECMAScript 2015). Babel is available for different conversions. React uses Babel to convert JSX into JavaScript. (https://babeljs.io/).

*****************************************************************

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.

Package.json : (path : react-starter-kit/package.json)

4.

{  
"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"
}
}

5. Add .gitignore file to the folder

6. Add /node_modules and /package-lock.json to .gitignore file. (path : react-starter-kit/.gitignore)

/node_modules
/package-lock.json

7. add .babelrc file. (path : react-starter-kit/.babelrc)

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

8. Create index.html file. (path : react-starter-kit/src/index.html)

<html> 
<head>
<title>React Redux Starter Kit</title>
</head>
<body>
<div id=”app”></div>
</body>
</html>

9. create an index.js inside it. (path : react-starter-kit/src/index.js)

import React from ‘react’;
import ReactDOM from ‘react-dom’;

ReactDOM.render(
<div>Welcome to React Application</div>,
document.getElementById(‘app’)
);

10. create a configuration for Web Pack with name “webpack.config.js”.

(path : react-starter-kit/webpack.config.js)

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’
}),
]
};

After setting all this up .

Make sure of the following steps :

  1. Download all the dependences through “npm i

2. after downloading, at the root level of the repository, use “npm start”. Application will start running at Port 8080 (According to my mac).

TADA !!! You basic application is running on the port and displays, “Welcome to React Application”.

From here take it, with your preferred state management libraries like :

Flux (https://facebook.github.io/flux/),

Redux (https://redux.js.org)

or Facebook’s most popular combination : React + GraphQL (https://graphql.org/)+ Relay (https://relay.dev/).

Note : This is just a basic example for a starter kit. Any comments and suggestions are always worthy.

Full stack developer, Blogger, Poet, Writer