ReactJs Basics

Hi Guys lets see some basic concept in ReactJs

• Why React?
• · React is one of the most popular JavaScript libraries for front-end web applications.
  Here are some of the advantages of React:
• · Speed
  Interactive websites need to update the DOM (Document Object Model) each time a change happens. This process is generally resourceful and slow.
  Compared to other libraries that manipulate the DOM, React uses a Virtual DOM, allowing to update only the parts of the website that have changed. This increases the speed of updates dramatically, as modern web applications may contain thousands of elements.
• · Ease of Use
  React allows developers to group related code together, thereby making building and maintaining large scale applications much less complex.
• · Support
  React has an amazingly large community and is open source. It is maintained by Facebook and the community.
• Now, it’s time for our first React code! Let’s display a simple message as a heading:

<script type = “text/babel”>

ReactDom.render (

<h1> Hello, React! </h1>

Document.getElementById(‘container’)

)</script>

Create React App

• · To get started, make sure you have a recent version of Node installed on your machine.
  Run the following commands in the Terminal to create and start a React app called “my-app”:

npx create-react-app my-app

cd my-app

npm start

What is JSX?

· JSX stands for JavaScript XML.

· JSX allows us to write HTML in React.

· JSX makes it easier to write and add HTML in React.

How Does JSX Work?

· When the JSX expressions are compiled, they are converted into JavaScript objects, representing React elements.
React then uses these elements to build the corresponding HTML DOM and display it in the browser.