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:
- Manually (CDN or Linking files)
- 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:
- React.js (react.js)
- ReactDOM.js (react-dom.js)
- 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.
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.
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:
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:
It contains all the necessary file or module information required for the project.
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.