Another user ran into this issue while attempting to install React using the Visual Studio 2022 Standalone React project. The problem was that his project name was visible in capital letters in Visual Studio, however, the folder label had been in small caps. As a result, the discrepancy in directory capitalization is the primary source of the above problem.
Also Read: Vue vs React: Which has Better Performance?
Because Windows filesystems are usually case-insensitive, accessing files with a different capitalization is still possible. The module loader, on the other hand, does not consider paths with distinct capitalization to be similar (and certain OS path manipulation methods will come back to the canonical path), which is why the error occurs.
Step 1: Create a New React Project with Create React App
In this step, you’ll use the npm package manager to construct a new application that will run a remote script. The script will install all dependencies and copy the essential files into a new directory.
Also Read: How To Setup React Native Development Company
Whenever you downloaded Node, you automatically installed npm, which is a package manager. npm will install JavaScript packages and maintain track of project details in your project. .json guide if you want to learn more about npm. npm also comes with a tool called npx, which allows you to run executable packages. That is, you will be able to run the Create React App code despite having to first download the project.
The second step is to use react-scripts.
This phase will teach you about the many react scripts that come pre-installed with the repo. To run the test code, you must first run the test script. The build script will then be used to create a jpg version. Finally, you’ll see how the eject scripts may provide you total customization control.
Take a peek around now that you’re inside the project directory. The Script for Building
Also Read: What is Headless CMS for beginners?
You can launch any npm script by typing npm run script name in your terminal. You can remove the execute part of the command in a few unique scripts, but it’s always good to run the entire command.
Step 2:The script for the test
The testing process is one of those unique scripts that doesn’t need the run keyword but still works if you do. This script will launch the Jest test runner. The test runner searches your project for files ending in.spec.js or.test.js, then executes those files. There are a couple of things to keep in mind here.
Also Read: 10 Free Instagram Reels Video Download Online
First, it recognizes any files having test extensions, such as.test.js and.spec.js, as previously stated. There will be only one test suite in this case—that is, only one.test.js file—and that test suite comprises only one test. Jest can discover tests in the hierarchy of your code, thus you can stack tests in a directory and Jest will discover them.
Step 3: Launch the Server
You’ll set up a local server and run the app in your browser in this stage.
Another npm script is used to begin your project. This script, like npm test, does not require the run command. Once you run the script, it will launch a local server, run the project code, start a watcher for code changes, as well as open the project in a web browser.
Step 4: Modifying the Homepage
In this phase, you’ll make changes to the public/ directory’s code. Your base HTML page can be found in the public directory. That’s the page which will act as the project’s starting point.
Step 5: Modifying the Heading Tag and Styling
You’ll create your first change to a React component in the src/ directory in this stage. You’ll make a simple change to the CSS and JavaScript code, which will update your browser automatically utilizing the built-in hot reloading feature.
Step 6: Constructing the Project
You’ll turn the code into a package that can be distributed to external servers in this phase. Return to your terminal as well as complete the project. You’ve already used this command, but it’s worth repeating because it runs the build script. The merged and minified files will be saved in a new directory.
Also Read: 14 Best Website to Watch Cartoon Online
You may see an error like this while compiling your react app. But what does it mean when it says “fix error: plugin “react” was conflicted between “package.json » eslint-config-react-app »?”
