Created the app and steps

ashch · ashch · commit 971f607e44e8 · 2021-07-11T17:37:38.000-05:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-react"
+    ]
+}
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,8 @@
 /node_modules
 /.pnp
 .pnp.js
+/.cache
+/dist
 
 # testing
 /coverage
diff --git a/README.md b/README.md
@@ -1,2 +1,116 @@
 # react-app-with-minimum-configuration
-React app with minimum configuration
+
+In this example I have demonstrated that how to Create a react app with minimum configuration required.
+
+[![dependency Status](https://david-dm.org/ashfaqch/react-app-with-minimum-configuration.svg)](https://david-dm.org/ashfaqch/react-app-with-minimum-configuration#info=dependencies)
+[![devDependency Status](https://david-dm.org/ashfaqch/react-app-with-minimum-configuration/dev-status.svg)](https://david-dm.org/ashfaqch/react-app-with-minimum-configuration#info=devDependencies)
+
+## Demo
+
+https://stackblitz.com/github/ashfaqch/react-app-with-minimum-configuration
+
+## Steps:
+
+## Create a new folder for the react app:
+
+_Run following commands._
+
+-   `mkdir react-app`
+-   `cd react-app`
+-   `npm init` (_npm init will ask you a bunch of questions. Just press enter for the defaults._)
+
+## Install dependencies:
+
+_Run following commands._
+
+-   `npm install --save react`
+-   `npm install --save react-dom`
+-   `npm install --save typescript`
+-   `npm install --save-dev @babel/preset-react`
+-   `npm install --save-dev @babel/preset-env`
+-   `npm install --save-dev parcel-bundler`
+
+## Create .babelrc file:
+
+_Create the .babelrc file. This file tells parcel that we are using ES6 and React._
+
+```
+{
+    "presets": [
+        "@babel/preset-react"
+    ]
+}
+```
+
+## Create tsconfig.json file:
+
+_Create the tsconfig.json file. To define compiler options._
+
+```
+{
+    "compilerOptions": {
+        "jsx": "react"
+    }
+}
+```
+
+## Create index.tsx file:
+
+_Create startup react component._
+
+```
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+ReactDOM.render(
+	<>
+		<h1>React App</h1>
+		<p>With minimum configuration using Parcel and Typescript.</p>
+	</>,
+	document.getElementById('root')
+);
+```
+
+## Create index.html file:
+
+_Copy following code to index.html file._
+
+```
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>React App</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+</body>
+
+</html>
+```
+
+## Create index.css file:
+
+_Copy following code to index.css file._
+
+```
+body {
+    background-color: #282c34;
+    color: #ffffff;
+    text-align: center;
+}
+```
+
+## Add a script entry to package.json scripts:
+
+```
+"start": "parcel index.html"
+```
+
+## Build & Run
+
+1. Run `npm install` to install packages
+2. Run `npm start` and navigate to `http://localhost:1234/` to view app.
diff --git a/index.css b/index.css
@@ -0,0 +1,5 @@
+body {
+    background-color: #282c34;
+    color: #ffffff;
+    text-align: center;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>React App</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+</body>
+
+</html>
diff --git a/index.tsx b/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+ReactDOM.render(
+	<>
+		<h1>React App</h1>
+		<p>With minimum configuration using Parcel and Typescript.</p>
+	</>,
+	document.getElementById('root')
+);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/tsconfig.json b/tsconfig.json

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "presets": [
 +        "@babel/preset-react"
 +    ]
 +}