Are you interested in React but haven’t got the opportunity to study it? Or maybe you’ve attempted tutorials in the past but failed to grasp the fundamental concepts? Or maybe you’ve learnt the fundamentals but want to solidify your understanding? In any case, this essay is for you.

We’ll create a basic React music player, adding additional React ideas as we go.

What exactly are react-scripts?

Creating a React app used to be a difficult task, you had to wade through a lot of settings, particularly with webpack and Babel.

That’s pretty much all you need to know to create and manage a React application. However, we will introduce it gradually.

Setup

The scenario is as follows: a tiny start-up has approached you for assistance. They’ve set up a platform where people may contribute music and have it rendered in dazzling color. But they need you to accomplish the difficult thing, which is to make it work.

To begin, create a new project directory and add the three files shown below.

“scripts”: {

“start”: “react-scripts start”,

“build”: “react-scripts build”,

“test”: “react-scripts test”,

“eject”: “react-scripts eject”

}

Use an up-to-date version of Chrome for this lesson; otherwise, the animations in the code above will not function.

Let’s get started by opening index.html in both a coding editor and a browser.

What exactly is a script?

A script is a set of instructions that tells another program what to do; React is no exception. The React App comes with four major scripts, which we’ll go through in more detail later.

But for the time being, we’ll concentrate on where to locate these scripts.

To discover readymade scripts, first build a new React app using the following command:

Create-react-app npx my-app

The command above generates a new React app using cra-template and all necessary settings. Examine the freshly generated project’s package.json file.

Scripts in React applications are found in the script part of the package.json file, as seen below:

The package.json file in the preceding JSON excerpt has several default scripts, but they may still be edited. These scripts may be run using your favorite Node package management CLI.

As you can see, a new React app comes with four scripts that utilize the react-scripts package. Now that we know what a script is and where to locate it, let’s have a look at each one and explain what it does to a React project.

start

On development, React utilizes Node.js to launch the app at http://localhost:3000, therefore the start script allows you to start the webpack development server.

You may use npm or yarn to perform the start script command on the terminal:

begin with yarn

start npm

This command will not only start the development server, but it will also respond to changes in the webpack’s Hot Module Replacement (HMR) capability and show the most recent version. Furthermore, if it fails to start the server, it will display any failures on the console in the form of informative error messages.

What exactly is React?

React is a framework for creating user interfaces. It simply cares about what you see on the front end. By dividing each page into components, React makes it relatively simple to create user interfaces. These are referred to as components.

Here’s an example of how to divide a page into components:

1*bvQNHjZOXcl-ds9A4AWYVg

Each of the sections indicated above is a component. What does this imply for a developer, though?

What exactly is a React Component?

A React component is a piece of code that represents a section of a page. Each component is a JavaScript function that returns code that represents a section of a web page.

To create a page, we run these methods in a certain sequence, combine the results, and display them to the user.

Let’s write a component inside the <script> tag in index.html with the type of “text/babel”:

When we call the OurFirstcomponent() function, we will get back a piece of the page.

How can I fix this problem?

So, in this post, we’ll look at fix the error “sh: react-scripts: command not found” after executing npm start.

This sort of problem is usually caused by a lack of node modules. Check to see whether the node modules folder is in your root folder. If not, type the following commands into your terminal:

If you’re working with npm:

install npm
start npm
If you’re working with yarn:
yarn
begin with yarn

If the node modules folder exists in your root folder, you may delete it with the following command:

node modules rm -rf

Now, do npm install or yarn.

Everything You Need to Know About React-Script Installation