In this example I have demonstrated that how to Create a react app with minimum configuration required.
Run following commands.
mkdir react-appcd react-appnpm init(npm init will ask you a bunch of questions. Just press enter for the defaults.)
Run following commands.
npm install --save reactnpm install --save react-domnpm install --save typescriptnpm install --save-dev @babel/preset-reactnpm install --save-dev @babel/preset-envnpm install --save-dev parcel-bundler
Create the .babelrc file. This file tells parcel that we are using ES6 and React.
{
"presets": [
"@babel/preset-react"
]
}
Create the tsconfig.json file. To define compiler options.
{
"compilerOptions": {
"jsx": "react"
}
}
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')
);
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>
Copy following code to index.css file.
body {
background-color: #282c34;
color: #ffffff;
text-align: center;
}
"start": "parcel index.html"
- Run
npm installto install packages - Run
npm startand navigate tohttp://localhost:1234/to view app.