Basic understanding in React that every ‘Beginner’ should have…
React is a hot topic in Web development which is known as a library built by Facebook to build single-page web applications and mobile applications.
What is a Library in programming…?
In simple terms, a Library is a collection of a Pre-Written set of codes that can perform some common tasks like handling HTTP requests, manipulating data, creating user interfaces…etc. So the developers can use them when needed instead of writing from scratch.
How does it relate to React…?
React focuses on a specific task, which is building User Interfaces. So, React provides reusable functions, classes and modules… so it provides more flexibility for the developer when architecturing the application. A library focuses on problem-solving rather than providing the entire solution to the application. In simple terms, we have tools. We use them as we want.
A Framework is less flexible because the framework controls the application’s flow and the developer customizes it. Developer has to be familiar with the framework’s structure and conventions. It’s like that, a framework provides building blocks and developers have to customize and place it when needed. The framework defines the overall flow of the application and calls developer’s code. When it comes to library, the developer decides how to use the library when needed.
Understand the structure
Personally I think that, having some sort of understanding makes the life easier. Here I’m going to explain five important files that every beginner should know and how they’re connected to achive the final goal.
If you create a react app, you’ll see something like this in your editor.
node_modules
All the react library components (reusable code parts) are defined under node modules. For example, if you want to handle http requests, the re-usable code part is defined under react-http-request module. You can just import it and play.
package.json
Contains metadata associate with the project and lists the dependancy packages used in the project. It updates automatically when dependancy was changed (in node module level) and we can update manually as well for some cases. It is a braod topic to explain in this article.
Get Isuru Sathsara’s stories in your inbox
Join Medium for free to get updates from this writer.
index.html
The main html file for the entire web application.
if you familiar with HTML, you can see there is only one <div></div> tag with “root” id is placed inside the body section. So the entire React application is encapsulated into that single div element. That’s the beauty of a single-page application 🙂.
And the JS part for that root elemnt is liked via <script></script> tag. Note that the JS part is set as a Module rather than a single JS file. Modules allow us to seperate the whole code to seperate/multiple files. Modules can be imported from external files using import keyword. You’ll see in the following image that how node modules are imported to main.jsx file.
jsx..?
A jsx file is a combination of html + javaScript that discribes what we’re going to display.
main.jsx
This file is the skeleton behind the <div> tag in index.html file. It looks like this for example.
Here, basically what happens is, we create something from JS and inject it into that <div> element in index.html file.
In the above code you can understand that it get an element from index.html file under ‘root’ id and render a componenet called <App /> into that ‘root’ component. The App component is written on App.jsx which is a seperate Js file.
So, we’re displaying the whole <App/> component through that single <div> element in index.html file.
App.jsx
This file contains the entire content of your application. To output whole content to the outside (into the main.jsx file), there is a default export function which defines the arrangement of the componenets in your application. You can split your into multiple files and arrange them together nicely. So basically, this is the file that we’re going to write our code.
Final Thoughts…
As a beginner to React, I think you’ve got some entry level understanding on how different files are arranged in React. It is all about arranging your building blocks …😊
Thank you!
