Beginning with React JS
An introduction to web frameworks and libraries
Today almost every developers don’t develop web application just with html, css and javascript. Most developers go in search of any frameworks or libraries to use in their development process. Main purpose of using such framework is to develop fast, scalable, and simple web applications. Such frameworks can be limited only to front-end or complete web application development. We can mention Angular JS and Django as such where Angular JS is just front-end framework while Django is a framework that follows model-template-views architectural pattern. Which means you cannot build an entire web application with all front-end, backend and database connectivity with just Angular JS but you can use Django instead.
What is React JS
React JS is a front-end javascript library and it is not a framework. It was developed by facebook to build dynamic and interactive web pages. It targets only the UI elements of a web application. React update and renders only the required component when your data changes without refreshing the page. For example if you visit facebook page you can see that your contact lists in online keep on updating without updating the facebook stories. Then when you scroll down your stories keep on changing without affecting the other UI component. Each of the these components updates and renders independently. Most popular web applications built using React JS are facebook, Netflix and Amazon.
Installing and setting up react
Before installing React, you need to have installed node. If not you can get it from following site: https://nodejs.org/en/download/
Then type type npx create-react-app my-app and hit enter. If you are using windows you can you command prompt and if you are using Mac OS you can use terminal to enter the command. Then get in to the app directory by typing cd my-app . Here my-app is just the name of you application folder. It can be any name of your choice.
Now type npm start and hit enter. This loads the React application on your default browser. If you have successfully installed React you should be able to see following page.
The most preferred way to learn a new technology is by practically doing projects. If you wish to develop a React JS application you can use any code editors to open your file. VS code is the more loved among these. I too recommend VS code because it is lightweight and easy to use.
The image below shows the file structure react app folder. Here you can get rid all the files inside src folder and by creating a new index.js file inside src folder.
Here index.html file which located inside the public folder is an html file and all our react components load inside <div id=”root”></div> element.
Now let's add index.js which is found inside src folder with following code.
Now if you save the file and reload you should see Hello, world!
This is very basics of React JS and many more tutorials to come.
