Sitemap

React for Beginners

4 min readOct 3, 2022

--

React is a Javascript library. So it is important to have a basic knowledge about HTML, CSS and JS. React is used for building user’s interfaces, it helps in building rich UI. The user interface is the point of human-computer interaction and communication in a device. This includes display screens, a mouse and the appearance of the desktop. So by considering the above information we conclude that react is used in building rich UI in a faster and efficient way. Before going deep into it let’s focus on some general knowledge about react.

This JS library is created by a software engineer named Jorden Walke who was working in Facebook (may be still working I don’t know) and since then it is being maintained by the Facebook itself. It was first deployed for Facebook News feed around 2011. Later on in 2013 React was open sourced at JS conference. An open source project is where the code to a certain project is completely open that means like anybody can readily see the code that went into a project. Open source project are community based and accept help from other programmers globally as a part of contribution.

Press enter or click to view image in full size
Facebook’s headquarters

One of the basic doubt often students face about its naming notations like React.js , React or something like ReactJS → so all these naming notations can be used; different websites use different notations.
React creates a Virtual Dom in computer memory which is why we don’t need internet connection once it gets loaded to the browser. React knows only one thing that is to create an awesome UI.

About React

React follows the component based approach. A component is one of the core building blocks of react. We can say that every application we are going to develop in React will be made up of pieces called components. Components make the task of building UIs much easier and reduce the repetition of code.
React uses a declarative approach means react only changes what it needs to be changed (i.e., suppose you went into a hotel and ask for some food later on you are served with food, now you don’t care how the food was prepared likewise the declarative process works ).
React is designed for speed, simplicity and scalability.

How to Use

To use and learn React, one should set up a React Environment on computer. It uses create-react-app tool which is an officially supported way to create React application.
Node.js (node-modules) is also required to use the react application so make sure you have installed node.js !

Get AJIT SHARMA’s stories in your inbox

Join Medium for free to get updates from this writer.

→Open Visual studio code
→Click on terminal
→Click on new terminal
→You will see a pop up to the bottom of window !
→ Run the command
npx create-react-app app-name !
note that npx always uses the latest version of create-react-app
→ Wait for some time (it may take more time depending on the strength of your PC or Computer).

Press enter or click to view image in full size

After it installed you will see something like this

Press enter or click to view image in full size

Now run the command cd app-name in order to change the directory and then again run another command npm start and press ENTER to see the magic in your default browser.

Press enter or click to view image in full size
rotational geometry of default react app

→Open your folder by selecting your project name ( app-name )

Press enter or click to view image in full size

→ Go to app.js file of src folder and start coding in react

Press enter or click to view image in full size
src --> App.js
PROGRAMMING IS A GAME, PLAY IT ON YOUR OWN WAY !

AJIT SHARMA

--

--

AJIT SHARMA
AJIT SHARMA

Written by AJIT SHARMA

|| CS student || Working on my JS skills || Gorakhpur University || IGNOU || Frontend dEveloper & Freelancer || Love writing about random topics ||