React Js

React is a front-end js library or JavaScript library that is used for single-page applications and this was released in the year 29 th may 2013 by Facebook and maintained by meta.

React renders small pieces of code called components . These components can be utilized to create multiple copies , this also reduces the work enabling us to maintain the code simply and development is much faster .It is called a library because it needs extra third-party interfaces or API's to work as such as redux,routing tool kit etc to run server calls .

Why react?

React help us in faster development ,easy maintenance of code as well as it reduces the time of page rendering, only the component which is to be modified will be updated based on the user interaction and all the other components will be not be rendered again and the page will not refresh this makes the user experience better and you will have faster loading website than websites without react.Also comes with added advantages so learning react helps you a lot. Initially it might look little complex but its not that really that complex to learn so go with it .

React is a library where as Angular is a framework which provides with all the features with in itself or the code base is pre-built so as to make server calls and other stuff..

React is a front-end library used for UI(User Interface) development and makes the development process simpler.

Prerequisites :

• HTML :

• CSS (cascading style sheets)

• Java Script: click the link below to read more on js.

If you are perfect with the above mentioned languages you can easily master the React so please try to go through the sections ,they just give you the idea of the about technologies used in web development . also makes your life a little easy in understanding the React library and its concepts.

Getting started with react:

To start with react you need to know the prerequisites and knowing css frameworks will also helps you design very rapidly CSS frame works such as bootstrap ,tailwind-CSS,Ant-design etc. can help you to build the interfaces than much faster than the normal convectional methods and this saves time it up to you to use the frame works but also it the responsibility of the developer to make the UI responsive one , if you are using these frame works you will not be facing much of the responsiveness related issues.

TO START WITH REACT :

we need to install Node and npm (node package manager)

https://nodejs.org/en/download/

click on the above link and download the L.T.S version.

L.T.S (long term support) ,if you wish to go for current you can but there may be issues as they are still being developed so go for the L.T.S version .Complete the steps of installation by clicking add to path ,this will enable you to access the node in CMD/CLI (command prompt /command line interface) type the following command .

>>>node --version

I f you see anything of this sort as a response that means you have successfully installed the node and its working fine .

v16.16.0

you can access the CLI interface of node by just typing "node " and press enter

this is what you will see and you will get launched into the node js environment .

Welcome to Node.js v16.16.0.
Type ".help" for more information.
>

Next after you are in the node environment to exit from there in CLI just type the command given below in the node prompt.

.exit

Now to know the version of npm type ,you will see a response in the CLI with some version.

npm --version

Now exit from the CLI or CMD and create a folder in which you would like to install you react .

Move into that folder and open CLI or CMD from there or move to the folder using the CMD or CLI and type the following command in - npx stands for node package executor , this will install the React for you in the folder which are currently in that's it there you go your React is installed .

npx create-react-app <project name> 

Remember to move in to the folder of react or the project then you will be able to see some folders installed in you computer look at the folders present in it.Use command line in your VS CODE to move into the folder and To start with react or to fire up the react write the command given below this will start the react and a page will be opened with react symbol

npm start 

HTML :

HTML(hyper-text-markup-language)

HTML is the basic document that is create for the web development it is like a skeleton of the any website that is created so HTML-5 is the advanced version that is released in the structure of the web site is created the layout any website is layed in it. The "5"in HTML stands for its version and W3C community maintains these standards of the web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--write your code here.-->
</body>
</html>

the above is the basic structure of HTML code.You can start writing the code in the place of write your code here.

CSS (cascading style sheets):

The CSS adds the beauty to the website mainly the UI and we can control some parts of it and create the UI using it , CSS is also used to create animations .

There are 3 types of CSS we can write while creating a page

• Inline css

we will write the css inside the age .

<p style="display:white;color:red"></p>

• Internal css

we will write the code in the file but this code written in the heading tag of the html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red
        }
        h1{
            font-size: medium;
        }
    </style>

External css:

The code is completely written in a separate file .A similar kind of code is written

but it is saved with .css extension.

       p{
            color: red
        }
        h1{
            font-size: medium;
        }