Setting up your first React Project!
Tags: react, npm, node, webpack
Published: 2020-04-05 14:25:12

<p style="text-align: justify;">&nbsp;</p>
<p><span style="font-weight: 400;"><img src="https://miro.medium.com/max/2760/1*hrrakxVFbJDP0jKrC5D_VA.png" alt="Learn React.js from Top 45 Tutorials for the past year (v.2018)" width="624" height="242" /></span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Hang on, wait I will tell you how to set up your first react project as magic.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">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:</span></p>
<ol style="text-align: justify;">
<li><strong> Manually (CDN or Linking files)</strong></li>
<li><strong> Package Managers</strong></li>
</ol>
<p style="text-align: justify;"><span style="font-weight: 400;">Okay Let's see the whole process in both ways</span></p>
<h3 style="text-align: justify;"><strong>Manually (CDN or Linking files)</strong></h3>
<p style="text-align: justify;"><span style="font-weight: 400;">Basically a normal React project required three main files in the project folder in its initial state. Those three files are mentioned below:</span></p>
<ol style="text-align: justify;">
<li><strong> React.js (react.js)</strong></li>
<li><strong> ReactDOM.js (react-dom.js)</strong></li>
<li><strong> Babel.js (babel.js)</strong></li>
</ol>
<p style="text-align: justify;"><span style="font-weight: 400;">After linking above the files the React-project is ready to work, all the JSX or React Component&rsquo;s code is written under the </span><em><span style="font-weight: 400;">&lt;div id=&rdquo; root &rdquo;&gt; &lt;/div&gt; </span></em><span style="font-weight: 400;">tag in the body of </span><strong>index.html</strong><span style="font-weight: 400;">.</span></p>
<p style="text-align: justify;"><strong>Note:</strong><span style="font-weight: 400;"> 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.</span></p>
<h3 style="text-align: justify;"><strong>Package Manager</strong></h3>
<p style="text-align: justify;"><span style="font-weight: 400;">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:</span></p>
<p style="text-align: justify;"><strong>NPM (Node Package Manager)</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">It is used to take advantages of a vast ecosystem of third-party packages and easily install or update them.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"><a title="npm" href="https://www.npmjs.com/" target="_blank" rel="noopener">NPM</a></span></p>
<p style="text-align: justify;"><strong>Webpack</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">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.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"><a title="Webpack" href="https://webpack.js.org/" target="_blank" rel="noopener">Webpack</a></span></p>
<p style="text-align: justify;"><strong>Yarn</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">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&rsquo;t ever have to worry.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;"><a title="Yarn" href="https://classic.yarnpkg.com/en/" target="_blank" rel="noopener">Yarn</a></span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">I selected </span><strong>npm</strong><span style="font-weight: 400;"> 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.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">For installing npm and node.js on your respected machine you can take reference of blog link mentioned below:</span></p>
<p style="text-align: justify;"><a href="https://phoenixnap.com/kb/install-node-js-npm-on-windows"><strong>Guide to install npm and node.js on machine.</strong></a></p>
<p style="text-align: justify;"><strong>About NPM</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">npm is the world&rsquo;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.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">After installation as windows, users use there Powershell and mac/Linux user can access npm via terminal as npm CLI.</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Some basic command you can use with npm are:</span></p>
<p style="text-align: justify;"><strong>For checking version</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Command: </span><span style="font-weight: 400;">npm -v</span></p>
<p style="text-align: justify;"><strong>For upgrading npm globally</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Command:</span><span style="font-weight: 400;"> npm install npm@lastest -g</span></p>
<p style="text-align: justify;"><strong>For installing any Module/Packages via npm</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Command:</span><span style="font-weight: 400;"> npm install &lt;packageName&gt;</span></p>
<p style="text-align: justify;"><strong>After installing package through npm results to the generation of two files:</strong></p>
<ol style="text-align: justify;">
<li style="font-weight: 400;"><strong>package.json</strong></li>
</ol>
<p style="text-align: justify;"><span style="font-weight: 400;">It contains all the necessary file or module information required for the project.</span></p>
<ol style="text-align: justify;">
<li style="font-weight: 400;"><strong>package.lock.json</strong></li>
</ol>
<p style="text-align: justify;"><span style="font-weight: 400;">It consists of a version (a specific version of dependencies).</span></p>
<p style="text-align: justify;"><strong>For starting the packages</strong></p>
<p style="text-align: justify;"><span style="font-weight: 400;">Command:</span><span style="font-weight: 400;"> npm start</span></p>
<p style="text-align: justify;"><span style="font-weight: 400;">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.</span></p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p style="text-align: justify;">&nbsp;</p>
<p>&nbsp;</p>