<h3><strong><span style="color: #000080;">React Folder Structure</span></strong></h3>
<p>In this article we will talk about the folder structure of react application.If you want to know what is react and how to create react application go to my previous article <span style="color: #008000;"><strong><a style="color: #008000;" href="https://c1ctech.com/react-introduction-and-creating-react-app/">React Introduction and Creating react app</a></strong>.</span></p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="BYP60h975ew" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=BYP60h975ew" placeholder><amp-img src="https://i.ytimg.com/vi/BYP60h975ew/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/BYP60h975ew/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span></p>
<p>When we run the command in our terminal to create react application the following initial <strong>project structure</strong> get generated inside our project directory as shown below:</p>
<p><img class="alignnone wp-image-910" src="https://c1ctech.com/wp-content/uploads/2019/02/ignorefile-1.png" alt="ignorefile" width="418" height="476" /></p>
<p>Now one by one we will talk about each file and directory our react project contains :</p>
<h4><span style="color: #000080;"><strong>.gitignore</strong></span></h4>
<p>This is the standard file used by Git to determine which files and directories to ignore, before you make a commit.</p>
<p>A <strong><span style="color: #0000ff;"><em>.gitignore</em></span></strong> file should be committed into your repository, in order to share the ignore rules with any other users that clone the repository.</p>
<p><img class="alignnone size-full wp-image-911" src="https://c1ctech.com/wp-content/uploads/2019/02/ignore2.png" alt="ignore2" width="694" height="662" /></p>
<h4><span style="color: #000080;"><strong>package.json</strong></span></h4>
<p><img class="alignnone size-full wp-image-919" src="https://c1ctech.com/wp-content/uploads/2019/02/packjs.png" alt="packjs" width="492" height="695" /></p>
<p>This file defines all the settings for the React project.</p>
<ul>
<li><strong><span style="color: #000080;">name</span></strong> is the name of your app.</li>
<li><strong><span style="color: #000080;">version</span></strong> is the current version.</li>
<li><span style="color: #000080;"><strong>&#8220;private&#8221;: true</strong></span> is a failsafe setting to avoid accidentally publishing your app as a public package within the npm ecosystem.</li>
<li><span style="color: #000080;"><strong>dependencies</strong></span> contains all the required node modules and versions required for the application. In the screenshot above, the react version specified is <span style="color: #0000ff;">^<strong>16.8.3</strong></span>. This means that npm will install the most recent major version matching 16.x.x.</li>
<li> It contains bydefault three Third party packages, which allow us to use <span style="color: #0000ff;"><strong>react</strong></span> , <strong><span style="color: #0000ff;">react-dom</span></strong> and <strong><span style="color: #0000ff;">react-scripts</span></strong> in our react project.</li>
</ul>
<p style="padding-left: 60px;"><span style="color: #0000ff;"><strong>react</strong></span> : This package is used to build the UI of our application.</p>
<p style="padding-left: 60px;"><span style="color: #0000ff;"><strong>react-dom</strong></span> : This package is used by react for working with DOM.</p>
<p style="padding-left: 60px;"><span style="color: #0000ff;"><strong>react-scripts</strong></span> : It includes scripts and configuration for bable , webpack used by create react app.</p>
<ul>
<li><strong><span style="color: #000080;">scripts</span></strong> specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner. For example running <span style="color: #0000ff;"><strong>npm test</strong></span> in your command line will run <strong><span style="color: #0000ff;">react-scripts test</span></strong> behind the scenes.There are few scripts that you can use :</li>
</ul>
<p style="padding-left: 60px;"><strong><span style="color: #0000ff;">start</span></strong> : <span style="color: var(--color-neutral-600);">Runs the app in the development mode.It</span> is run by the <strong><span style="color: #008000;"> &#8220;npm start&#8221;</span></strong> command.</p>
<p style="padding-left: 60px;"><strong><span style="color: #0000ff;">build</span></strong> : <span style="color: var(--color-neutral-600);">Builds the app for production to the `<strong>build</strong>` folder. </span><span style="color: var(--color-neutral-600);">It correctly bundles React in production mode and optimizes the build for the best performance. It is run by the <strong><span style="color: #008000;">&#8220;npm run build&#8221;</span></strong> command.</span></p>
<p style="padding-left: 60px;"><strong><span style="color: #0000ff;">test</span></strong> : <span style="color: var(--color-neutral-600);">Launches the test runner in the interactive watch mode.It is run by the <strong><span style="color: #008000;">&#8220;npm test&#8221;</span> </strong>command.</span></p>
<p style="padding-left: 60px;"><span style="color: #0000ff;"><strong>eject</strong></span> : This script is only used when you want to customize react-scripts and go on with your own.It<span style="color: var(--color-neutral-600);"> is run by the <strong><span style="color: #008000;">&#8220;npm run eject&#8221;</span></strong> command.</span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<h4><span style="color: #000080;"><strong>package-lock.json </strong></span></h4>
<p>This file contains the exact dependency tree installed in <span style="color: #0000ff;"><strong>node_modules/</strong></span>.</p>
<p>This file is automatically generated by <strong><span style="color: #0000ff;">package.json</span></strong>.It makes sure that your version numbers of your dependencies are locked in so if I gave this project to anybody else anywhere around the world we make sure that the versions are correct so that it works 100 percent of the time.</p>
<p>It also contains a history of changes to <strong><span style="color: #0000ff;">package.json</span></strong>, so you can quickly look back at dependency changes.</p>
<h4><span style="color: #003366;"><strong>README.md</strong></span></h4>
<p>This file contains just the information that you remember. When you put it on <strong>Github</strong> it will display in the project directory.</p>
<h4><span style="color: #000080;"><strong>node_modules</strong></span></h4>
<p>This directory contains dependencies and sub-dependencies of packages used by the current React app, as specified by <span style="color: #0000ff;"><strong>package.json</strong></span>. If you take a look, you may be surprised by how many there are.There is no need to share this folder on github that&#8217;s why this folder is automatically added to the <strong>.<span style="color: #0000ff;">gitignore</span></strong>.</p>
<p>Now when we clone project from github ,Inside the project directory we have to run the command <span style="color: #008000;"><strong>npm install </strong></span>and it will create <span style="color: #0000ff;"><strong>node_modules</strong></span> directory inside your project directory and inside <span style="color: #000000;">node_modules</span> directory all the dependencies you have defined inside <span style="color: #0000ff;"><strong>package.json</strong></span> get installed automatically.</p>
<h4><span style="color: #000080;"><strong>public</strong></span></h4>
<p><img class="alignnone size-full wp-image-921" src="https://c1ctech.com/wp-content/uploads/2019/02/public2-1.png" alt="public2" width="272" height="145" /></p>
<p>This directory contains assets that will be served directly without additional processing by <strong><span style="color: #0000ff;">webpack</span></strong>.</p>
<p><span style="color: #000080;"><strong>index.html</strong></span> : provides the entry point for the web app.It consist of only one div element which we will grab in our <strong><span style="color: #0000ff;">src/index.js</span></strong>( javascript entry point) by its id and inside which we will render our main App javascript component ie, <span style="color: #0000ff;"><strong>App.js</strong></span>. When we run our app ,what we see up on the browser is App.js component.</p>
<p><span style="color: #000080;"><strong>favicon.ico (header icon)</strong></span> : It contains icon that can you see in the tab of your browser.There are online tools available like <a href="https://realfavicongenerator.net/"><strong><span style="color: #008000;">favicon generator</span></strong></a> using which we can create our own <strong>favicon.ico</strong> by providing it icon image.</p>
<p><strong><span style="color: #000080;">manifest.json</span> : </strong>The <strong><span style="color: #0000ff;">manifest.json</span></strong> is a simple JSON file that tells the browser about your web application and how it should behave when &#8216;installed&#8217; on the user&#8217;s mobile device or desktop.Here behave means if we talk about mobile devices then how it look like in mobile&#8217;s home screen, how the app is going to launch and how its going to look.</p>
<h4><span style="color: #000080;"><strong>src</strong></span></h4>
<p><img class="alignnone size-full wp-image-922" src="https://c1ctech.com/wp-content/uploads/2019/02/public.png" alt="public" width="308" height="269" /></p>
<p>This is the heart of the React app. For faster rebuilds, only files inside <strong><span style="color: #0000ff;">src</span></strong> are processed by Webpack. You need to <strong><span style="color: #0000ff;">put any JS and CSS files inside</span> src</strong>, otherwise Webpack won’t see them. Browsing this folder, you see the main App JavaScript component (<span style="color: #0000ff;"><strong>App.js</strong></span>), its associated styles (<span style="color: #0000ff;"><strong>App.css</strong></span>), and test suite (<span style="color: #0000ff;"><strong>App.test.js</strong></span>). index.js and its styles (<span style="color: #0000ff;"><strong>index.css</strong></span>) provide an entry into the App and also kicks off the <span style="color: #0000ff;"><strong>serviceWorker.js</strong></span>. This service worker takes care of caching and updating files for the end-user. It allows for offline capability and faster page loads after the initial visit. More on this methodology is available here <strong><span style="color: #008000;"><a style="color: #008000;" href="http://bit.ly/CRA-PWA">http://bit.ly/CRA-PWA</a>.</span></strong></p>
<p>As your React app grows,You may also create subdirectories inside src. it is common to add a <strong><span style="color: #0000ff;">components</span>/</strong> directory to organize components and component-related files and a <strong><span style="color: #0000ff;">views/</span></strong> directory to organize React views and view-related files.</p>
<p><strong>I hope now you have a clear understanding of your react application folder structure and also what exactly these files and folders contains when you create react application.</strong>