Web Development
Introduction To React JS

Introduction To React JS

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

2 min read

Table of contents

What is react JS ?

  • React JS is a library developed and maintained by Facebook now called Meta.

Why is react famous?

  • If rule No.1 in software development is simplicity and avoiding complexity at all costs, then React JS takes the biscuit.

  • One of the top benefits of React is how easy it is to grasp, particularly if you already are a pro at JavaScript. You can install React and be up and running in a few hours, getting straight to work building web applications. The documentation is clear and there is lot of it. Furthermore, the short learning curve means you can waste less time learning and more time doing. It is almost certainly why React has had such widespread adoption.

  • Furthermore, it makes onboarding internal teams, clients and new projects much easier for development teams by getting everyone on the same page quickly and easily.

Some Important Features of React

  • Declarative: Describes what the UI should look like,and does not need all the implementation details

  • Component-Based: Basic unit in react is a component.We will talk about this in later posts Example :

Screenshot 2022-11-15 154550.jpg

Every block here in itself is a component.

  • Unidirectional: Data flow is only one direction

How to install REACT

  • For installing react we need nodejs to be installed.The link for installing nodejs is Node js

  • I am using VS code as my code editor

  • To open the terminal in vscode use 'ctrl'+'~'

  • Once the terminal is open the first check for the node if it is present / correctly installed or not for this we use

node -vIf node is correctly installed then it should show us the version number of the node installed

  • Now type npx create-react-app name_project

  • It should install the default folders

  • To start react type npm start

  • This should start the react application

How does react convert the JSX into an element

  1. React uses react.create element to do so

    example:

     const element = createElement(type, props, ...children)

 // the type is basically the HTML element that we have created
 // props --these are objects which contain the HTML attributes that we have used
 // ...children ---this is the actual content of the tag
iwritecodeReact