Understanding Standard React Project

Back to: ReactJS Tutorials

Understanding Standard React Project:

In this article, I am going to discuss Understanding Standard React Project. Please read our previous article where we discussed Creating a new React Project.

Understanding Standard React Project:

Let’s now have a look at the “src” folder because that is where we will spend the majority of our time,

It is the place where we will write our React code. The first thing you’ll notice here, in this project that we have two JavaScript (App.js and index.js) and one CSS file (index.css). And the most important takeaway here which we really want to emphasize right away is that React code is just JavaScript code. We are just going to write some JavaScript code throughout the entire course. We’re going to use React features and some special Syntax introduced by React, but ultimately, it’ll all be just JavaScript. Now let’s start with the index.js file.

This is actually the first code file that will be executed whenever this page is loaded. So, whenever you visit localhost:3000, this index JavaScript file holds to code which is executed initially.

Though we are also saying right away that it’s not exactly that code but a transformed version of that code. Remember when we said that our project setup here, involves some scripts which transform and optimize the code, which is happening behind the scenes? Basically, we will write code, in an easy-to-read developer-friendly way with some syntactic sugar, which makes our life as a developer easier, but we’ll write code that wouldn’t run like this in the browser, and especially not in all supported browsers.

Therefore, the npm start process, which we started as shown in the above images, started this development server which is watching our code, this process will not just watch our code and then take it and deliver it to the browser, but before it delivers it, it will transform it. So that certain extra features work in the browser, even though they wouldn’t work if just this code were taken.

For example, this import statement “import ‘./index.css’;” where we import a CSS file into a JavaScript file. That’s not something that would work in regular JavaScript. That would be an invalid syntax. You can’t import CSS into JavaScript. Well, here, in this project setup, it does work. Here, in the end, it tells the npm start process that we simply want to include this index.css file in our overall application. The CSS code present there should be considered and should be injected into this page. Another example of a syntax, which is not regular JavaScript syntax, would be,

It looks like some kind of HTML code inside of a JavaScript file. And normally this wouldn’t work in Vanilla JavaScript or normal JavaScript. But here it works. Because this is transformed before it’s delivered to the browser. And for the moment, you just need to be aware of that, that those transformations happen, and the idea of that is we can write code in a nice way and in an easy way.

Now the fact that the index.js file is the first file to be executed. It is just something you have to know. It’s one of the few things you need to remember. Now what’s that file doing though? What’s happening here?

Well, we are importing ReactDom from ‘react-dom’ which means we are importing something ReactDOM object from the ‘react-dom‘ third-party library, which is one of our dependencies. Which is downloaded and installed locally.

Now, in the package.json file, you actually see two React dependencies, ‘react’ and ‘react-dom’, technically these are two separate packages, you can think of them as React libraries. It’s split across two packages with different responsibilities, but in the end, ReactDOM and React these two dependencies together form the React library. So, whenever we import something from React or from ReactDOM, it’s basically both all about React and we’re using React features. As we’re doing in index.js, where we are importing from ReactDOM.

This simply makes a feature exposed by the library available inside of this index.js file. Because that’s how modern JavaScript works in general. If you define a feature, let’s say a function in file A and you want to use it in file B, to split your code across multiple files to keep every file small and manageable, then you have to export the feature in file A which you want to use in file B, and then import it in file B. And that’s what we’re doing in index.js.

The ‘react-dom’ package is exporting some ReactDOM objects and we’re importing them here into index.js. And we are importing it to then call a method, the render method on that imported object. The ReactDOM.create () method takes two arguments or two parameters here. The second argument is a default JavaScript DOM API. On the global document object, which is available in the browser site JavaScript. We have a get ElementByID (‘root’) method to select a certain DOM HTML element by its ID.

Now you might wonder which element? we have no HTML code besides this ‘<App/>. Well, there also is a public folder which we haven’t discussed about this.

This is a folder in which we will rarely work, but it holds one important file. The index.html file. This is the single HTML file, which is in the end loaded by the browser. Because with React, we build a single-page application. And we discussed that in the first core section. It basically means that only one HTML file is delivered to the browser and hosted by the browser therefore rendered by the browser. But on this single file, we import the finished React application code and its start code which then updates what we see on the screen.

So, we have one HTML file, but what we see on the screen constantly changes because of React. Now in this HTML file, we have div here. It’s basically the only HTML element in the entire body (except <noscript> element). And this div has an id of a root. Now this dive of root ID will be selected by the following code in the index.js file,

ReactDOM.createRoot (document.getElementById (‘root’));

We target that div with the ID of the root. Then we stored this in the root variable or constant. And in the end, we’re telling ReactDOM that we want to render something. So basically, the content of that div, or what’s inside of that div, should be replaced with ‘<App/>’.

This brings up another question. What is that </App> thing here? Well, first of all, it’s also something which we’re importing. We’re importing App from the ‘./App’ file. And that’s the App.js file in the src folder.

You have to omit ‘.js’ as an extension in your imports. If it’s another file, like a CSS file, you have to add it. But if it’s a third-party library or one of your JS files, you omit the ‘.js’. Now we can tell that ‘./App’ is one of our files because we have our relative import path here starting with ‘./’ which means look in the same folder as the index.js file is in and then use the App.js file. And from that file, we import the App. But that is definitely not regular JavaScript syntax here. This is a Syntax called JSX.

There’s one key thing you got to know about App. The app, in the end, is a component. And you might remember components are important. Here we see our first component inaction. It’s an App component, which is the end to render in the place of that element with an ID of root. So, in place of that div or inside of that div. So, therefore, let’s now have a look at this App.js file.

This is a fairly trivial file. It holds a function named App and we then export this function because as we mentioned in modern Javascript, if you have something like a function or a class or an object defined in one file and you want to use it in another file, you have to export and import it in the file where you want to use it. So here, in App.js where the function is defined, we export it, and then we import it in index.js. And that’s how these two files are connected and how we can use a feature, in this case, a function to find an App.js inside of index.js.

Now what’s this App function doing though?

It’s a function named App, starting with a capital character, it’s valid, JavaScript syntax. And here, we return something. But what are we returning? It’s HTML code inside of a JavaScript file. And again, that’s not something you regularly see. It’s also not something we’re used to. And it’s also not a valid JavaScript code, normally.

Yet here, everything seems to work. And the reason for that is, this is a feature called JSX. It’s a special Syntax invented and introduced by the React team. And it works in these JavaScript files because of our overall project setup and again, because of these transformation steps which are running behind the scenes. But let’s take a closer look at JSX in our next article.

In the next article, I am going to discuss the Introduction to JSX. Here, in this article, I try to explain Understanding Standard React Projects with Examples. I hope you enjoy this Understanding Standard React Project article.