React | Application Structure Part II
Tags: react, beginners, structure
Published: 2020-12-30 19:45:04

Hello developers! In my last blog, we learn more about two fundamental parts of your React App: 

1.node_modules 
2.public


Today we will discuss one of the most important folders inside your application: <strong> src </strong>. Short for "source", <strong>src</strong> contains your working files that will be used later to create the build. 

Let's stop for a minute and talk a little bit about <strong>build</strong>. Build is where a compiled version of assets is placed when you run <code>npm build</code>. This is what will get delivered to the user. Something important to remember is that <strong>build</strong> is not part of the default <code>create-react-app</code> structure.</i> 

Now, going back to <strong>src</strong>, this folder would look something like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zdf6lw4xy02sag7dq8ud.png)

<strong>App.css:</strong> This file determines the styling of your application. App.css is a global styling file. <code>create-react-app</code> uses webpack for handling all assets. Webpack offers a custom way of extending the concept of import beyond JavaScript. If a JavaScript file depends on a CSS file and you need to import the CSS from the JavaScript like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qveo1xo1dbj5ne7fwham.png)

That's the reason why this CSS file is global. This file is exported to your full app when added to the App.js.

As well, index.css takes you to at even deeper level. By default this file contains basic fonts and margins from your application. You can think about this file like the bond of your app and just that. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q7f4nz4y7ep4ta3wlww7.png)

<i>For a React app, the best practice is to put every component in its own directory containing its corresponding JS and CSS files. The App component is the <strong>topmost</strong> component in a React app but there aren't any predefined rules for using App.css or index.css for global CSS but me recommendation is to use your App.css as your global CSS file because that's what you would see the most.</i>

Like we're already talking about index.css let's talk about <strong>index.js</strong>:

- Do you remember the super important line of code in our HTML file <code>id-"root"</code> in my last blog? Well, this file access to that root element in our DOM!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k18x2a4bflm6yx6iaod3.png)

As you can notice above it renders our React application with the render method. Another significant part about this file is a reference to the App object imported from the App file.

<pre><code>import App from './App';</code></pre>

Now, let's talk about our last file: <strong>App.js </strong>. 

- App.js (second picture in this blog) is the only React component we have in the starting application. 
- React lets you define components in two forms: <strong>classes</strong> or <strong>functions</strong>. In my next blog we'll talk more about components but what you need to understand is that in your component is where you start building your application for real. Everything you'll see in <code>localhost:3000</code> lives inside your App.js. 

These are the fundamentals of your first React App using <code> create-react-app </code>. All the other files are more familiar like <strong>images</strong> and <strong>test</strong> files for your application. Once this structure is clear to you, building components will be really easy. Trust me, you'll love how clean your code will look using the components folder but I'll talk about that next week.

Thanks for reading and have a Happy New Year!