Setting up your first React Project!

 

Hang on, wait I will tell you how to set up your first react project as magic.

Basically a React Project has a lot of dependencies as its very owned requirement. So, It is necessary to integrate all the required dependencies in the project folder which can be done mostly in two ways:

1. Manually (CDN or Linking files)
2. Package Managers

Okay Let's see the whole process in both ways

Manually (CDN or Linking files)

Basically a normal React project required three main files in the project folder in its initial state. Those three files are mentioned below:

1. React.js (react.js)
2. ReactDOM.js (react-dom.js)
3. Babel.js (babel.js)

After linking above the files the React-project is ready to work, all the JSX or React Component’s code is written under the <div id=” root ”> </div> tag in the body of index.html.

Note: This is the way of doing projects but it is not the best and hassle-free way to set up a React project because using this way results in lack of proper directory structure as well as every component and small task you have to write a long code.

Package Manager

With the help of Package manager you can set up any React project in just minutes and the process is also hassle-free.There are several package managers and bundler are available on the web. I mention some most popular and widely used package manager below:

NPM (Node Package Manager)

It is used to take advantages of a vast ecosystem of third-party packages and easily install or update them.

NPM

Webpack

Webpack is a static module bundler for modern Javascript applications. Webpack processes the application. It internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

Webpack

Yarn

Yarn is a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Yarn

I selected npm as my versatile package manager which helps me to set up the react project and also help me to start a separate node server on a local machine so it is so easy to create the web app smoothly and also provide features like build-run, start the server and terminate the server.

For installing npm and node.js on your respected machine you can take reference of blog link mentioned below:

Guide to install npm and node.js on machine.

About NPM

npm is the world’s largest software registry. Open-source developers from every continent use npm to share and borrow packages and many organizations use npm to manage private development as well.

After installation as windows, users use there Powershell and mac/Linux user can access npm via terminal as npm CLI.

Some basic command you can use with npm are:

For checking version

Command: npm -v

For upgrading npm globally

Command: npm install npm@lastest -g

For installing any Module/Packages via npm

Command: npm install <packageName>

After installing package through npm results to the generation of two files:

1. package.json

It contains all the necessary file or module information required for the project.

1. package.lock.json

It consists of a version (a specific version of dependencies).

For starting the packages

Command: npm start

As I started documenting my journey of React JS which always encourages me to provide the best and easiest learning resource to the beginner so they can do stuff in a smooth and efficient way. as I write my very first dev.to post of the Series "An adventurous journey of React JS" and I observed quite good response and I'm really thankful for all the readers who find my post helpful and also welcome suggestion to improve if any?. I hope you like this second chapter of the Series. Please provide your great suggestion in the comment section and share in your circle if you find it helpful.