As we already are done with the successful installation of our first application in ReactJs. In Today’s article, I will try to make you understand the whole struture of your first Application.
The Topics,which we are going to cover are :
- Understanding of JSX and why JSX.
- Structure of ReactJs Application.
- Your first “Hellow World” in ReactJs Application
- JSX
In the world of React, JSX is the word you are probably going to see and read alot.So it is really very important that you should know what is JSX and why it is used.JSX stands for JavaScript XML. Which is Extension of JavaScript language syntax.With React library, it’s an extension to write XML like code for elements and components and just like html, JSX tags have a tag name, attributes, and children.
Why do we use JSX?
JSX isn’t necessity to write React applications, you can use react without JSX, but JSX makes your react code simpler and if you are familiar with HTML ,It’s simpler for you as well. JSX makes it’s optimization faster while compiling code to JavaScript and most of the errors can be caught during the compilation.
2. Structure of ReactJs Application
We saw how simple it is simple to create react app, let’s start with the understanding files and folder structure and how control flows when you run your application.
In the [Figure-1], you can clearly see at the root level we have 3 folders and 4 files to begin with.
Let’s start with package.json[Figure-2], This File contains the dependencies and the scripts required for the project.You can also see the version of your react here which is “16.12.0” that is listed as dependency and you also can see other scripts which help in running/testing/building your application.
On based, Whether you have just NPM or yarn as package manager you are going to see yarn locks or package lock file, it simple show installation of your dependencies and you really don’t have to worry about them.
We also have .gitignore file. which is having the files which will be ignored while uploading your code to the GitHub and we also have READ.md file, contains information about other files in a directory or archive of computer software.
Next, Let’s talk about the folders:
The first one is node_modules folder, As you can see in [Figure-1], This is the folder in which all dependencies are installed.This folder is generated when you when you run create react app command or NPM install.
The next folder is the public folder [Figure-4] ,Which is having 3-Files. out of which our concerned is only with index.html.
Let’s Discuss about the Index.js file [Figure-5],You Want react to control your app for that purpose we have one div tag with ID equal to root, at the run time the react application takes over your div tag and ultimately responsible for UI.
Typically, You aren’t going to add any code in this file, but may be some changings in head tag but not in the body tag.
Let’s Move to the folder with which you will be working the most duing developement which is Source Folder named as src in [Figure-6].
The start point for our application is, index.js.
In this file [Figure-7],we define root component which is app component and Dom element which will be controlled by react. In the up coming articles we will also discuss about the Dom. As You can observe here, the component is having “root”, which is the id of div in [Figure — 5].So we can call that div as root Dom node, beacuse inside it ,everthing is controlled by react.
For the “hellow world”, the app component is rendered inside the root Dom node. App component is the view we will see in the broswer, which is responsible for the HTML displayed in the browser.With app.js,also generates App.css,which is responsible for styling and App-test.js,which is used for unit testing. We also have index.css which is for the body styling and logo.svg,which is referenced in app component. Also serviceWorker.js and setupTest.js are of concerned with progressive web app at the beginner level you don’t have to worry about them.
3. “Hellow World” in React
In the [Figure-9], App component contains the HTML,renders in the browser.
Thanks for Reading. I hope it helped you in understanding the structure of react, In the next article, i will be explaining — Dom in ReactJs. Thanks for reading :)
Feel free to add a comment below. Contact me directly if you have any question, Through linkdin. I’ll be more than happy to help.
Articles that you might have missed
Environment Setup — For Your First Application In React.js.
Everything You Need to Know About Google App Engine.
Keep sharing.
