Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 14, 2021 10:46 am GMT

Create React-App

React is a javascript library used for creating user interfaces. People who are new to create don't seem to fully appreciate how far we have come with React.js when it comes to setting up projects. It seems so simple now and that is the point of technology, for innovations to become as automated as possible.

Writing a single line of React code was quite intricate when compared to now, with so many build tools that we had to manually set as well as the numerous dependencies and requirements such as webpack and babel, all these before we could think of writing a react code.

As time went on there was the need to automate this process and to make React beginner friendly. The Create React App CLI came to save the day.

What is create react app?

create-react-app CLI is a tool created by Facebook to automate the process of setting up a react project so users could only concentrate on writing code only. It was the abstraction we yearned for and setting up a react project takes less than a minute now.

Requirements

create-react-app works on many operating systems we have today and it is maintained by Facebook. Before creating a react app we are required to have Node Package Manager (NPM) >= 10 on our local development machine.

We can then create a react app using the following methods;

npm
Alt Text

npx
Alt Text

yarn
Alt Text

npm, yarn and npx

npm is the acronym for Node Package Manager. It is the default package manager for the JavaScript runtime environment Node.js.

yarn is the acronym for Yet Another Resource Negotiator. It was created by Facebook at a time when npm was buggy.

npx; both npm and yarn install node packages globally while npx executes node packages. It runs a command of a package without installing it explicitly

Output

Alt Text

Now, we are going to explain what those folders mean.

node_modules: The node_modules directory contains the React library and all other downloaded dependencies you'd use for your project locally.

src: src or source folder is where the application lives. All the code we write for our application lives in the src folder. It contains the App.css, App.js, App.test.js, index.css, index.js, and serviceWorker.js files.

Image description

public: It contains all the public assets of the application. The public assets are created when we call the build scripts. React script converts all the Javascript files in the src folder into Javascript in HTML that the browser understands and the converted files are stored in the public folder

Image description

package-lock.json : its automatically generated for any operations where npm modifies either the node_modules tree, or package. json . It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

package.json: its used to store the metadata associated with the project as well as to store the list of dependency packages.

Image description

The package.json also contains the React-scripts. It is this script that allows us to not worry about manually setting up webpack and babel. It includes four scripts which perform various functions for us;

Start: This command starts our project and serves it up onto our localhost:3000

build:when your project has several components these separate files need to be merged or bundled to be precise in one single file. The build script does that. babel converts our Javascript into a version of Javascript that our browsers can understand. Webpack takes all our Javascript files and bundles them into one file. All these conversions and bundling of the src files are stored in the public folder.

****TO BE CONTINUED****


Original Link: https://dev.to/flt_s3nyo/create-react-app-ip9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To