The fastest and easiest way to create a basic react app is to run npx create-react-app, but have you ever wondered if you could complete the entire process by yourself? You can solve this how to fix “sh: react-scripts: command not found”, after all. If you have more experience with react, however, you might need to start from scratch when setting up your app. Therefore, we will show you how to correctly configure it in this article.
1. Run the commands listed below in your VS Code terminal:
npm init -y
with the aid of this command package. The creation of a JSON file that contains crucial data needed before publishing to NPM as well as defining project properties used by npm to install dependencies, execute scripts, and specify the project’s entry point.
npm install react react-dom
User interfaces must be created using React, and React-Dom serves as a link between React and the browser’s DOM.
After executing this command, package.lock.json and node modules will be produced. All of the npm requirements are stored as node modules. The dependency tree of each installed package is recorded in package.lock.json, along with the exact version of each item.
npm install –save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Babel is a JS Compiler that transforms contemporary JS code into standard Js code that can be supported in legacy settings and browsers.
2. Create a.babelrc file and paste the following code into it.
{
“presets”: [
“@babel/preset-react”,
“@babel/preset-env”
]
}
This file serves as a Babel configuration file, whereas presets serve as a shareable collection of Babel plugins and/or set-up variables.
npm install –save-dev webpack webpack-CLI webpack-dev-server
JavaScript modules, commonly referred to as module bundlers, can be compiled using the program Webpack. It creates a single file (or a small number of files) that runs your software from a big number of other files. The options interface that Webpack uses in its configuration file is provided by Webpack-CLI.
npm install –save-dev HTML-webpack-plugin style-loader CSS-loader file-loader
These are all loaders that aid in including several files using Webpack.
3. Copy the following code into the file webpack.config.js.
const HtmlWebpackPlugin = require(“HTML-webpack-plugin”);
const path = require(“path”);
module. exports = {
entry: “./src/index.js”,
output: {
filename: “bundle. [hash].js”,
path: path.resolve(__dirname, “dist”),
},
plugins: [
new HtmlWebpackPlugin({
template: “./src/index.html”,
}),
],
resolve: {
modules: [__dirname, “src”, “node_modules”],
extensions: [“*”, “.js”, “.jsx”, “.tsx”, “.ts”],
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve(“babel-loader”),
},
{
test: /\.css$/,
use: [“style-loader”, “CSS-loader”],
},
{
test: /\.png|svg|jpg|gif$/,
use: [“file-loader”],
},
],
},
};
This configuration file contains all the necessary details, including the entry point, bundle output filename and path, plugins, and several loaders that are used by Webpack to bundle and resolve different file types.
4. Create the folder “src” and the file “App.js” within it.
import React from “react”;
const App = () => (
<div>
<h1>Hello React</h1>
</div>
);
export default App;
A basic arrow function, Hello React is returned here and is enclosed in an h1 tag.
5. Create the “index.js” file, which will serve as the starting point for our coding.
import React from “react”;
import ReactDOM from “react-dom”;
import App from “./App”;
ReactDOM.render(<App/>, document.querySelector(“#root”));
6. Make a new “index.html” file.
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta HTTP-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>React</title>
</head>
<body>
<div id=”root”></div>
</body>
</html>
We indicated that it should read./src/index.HTML as a template in our settings. The inject option has also been set to true. If you are facing the problem “sh: react-scripts: command not found” By selecting that option, the HTML-webpack-plugin directly inserts a script with the path supplied by Webpack into the finished HTML page. Following the execution of npm run build, this final page appears in dist/index.html and is delivered from / when npm start is executed.
7. your package, please. The following lines of code should be written in JSON in place of the script tag.
“scripts”: {
“start”: “webpack serve –hot –open”,
“build”: “webpack –config webpack.config.js –mode production”
}
8. Done
You may now add multiple components to your React project and personalize it.
Even still, the process was rather drawn out, and create-react-app helps you with that. By replacing it with a single command, npx create-react-app filename, it simplifies the laborious process of creating each file.
