React is a JavaScript library used to make user interfaces in web and mobile apps. It was created by Facebook and is famous for its simplicity, flexibility, and speed. That's why it's a favourite choice for front-end development in many projects. One of the benefits of using react is that it has a large and active community, which means developers can access many resources and tools for learning and development.

Now let's move towards the fundamental concepts of React.

1- Component

The component is a piece of code that is reusable allowing developers to build UI with more ease. Components are the building block of React JS. In React components can be either single or multiple. It also supports nesting components.

Here's an example of a simple Component in React

import React from 'react';

function FirstComponent() {
  return (
    <div>
      <h1>Hello Reactors!</h1>
      <p>This is my first React component.</p>
    </div>
  );
}

export default FirstComponent;

Here in the snippet, you can see we define the component as FirstComponent, which simply displays a bunch of HTML elements. It must be noted that the name of component must start with a Capital letter otherwise they don't work at all. Also, we have to use import and export for importing and exporting our function components from one file to another.

2- JSX

JS is a syntax that let us write HTML code inside the JavaScript File. It is quite similar to what we code in HTML except with a few changes. That is one of the features of React that allows us to render both content and logic together in the same place.

import React from 'react';

function App() {
  const age = 20;
  return (
    <div>
      <h1>Hello Reactors!</h1>
      <p>I'm {age} years old.</p>
      {age >= 18 ? <p>I'm an adult.</p> : <p>I'm a minor.</p>}
    </div>
  );
}

export default App;

In the above example, we can see that inside the App component, we define one variable named "age", which is later used in the JSX syntax to render the content as well as implement simple logic by using ternary operator.

While writing JSX, we have to obey a few rules otherwise it can lead towards ambiguity in our code. Firstly, In order to render the content of multiple components, we have to write them all in a single div tag or an empty tag. Furthermore, Besides HTML, you have to close your single element tag in JSX like <img /> instead of <img>. In React, it is common practice to use CamelCase for naming HTML attributes in JSX code. One of the main examples of using ClassName instead of Class. Lastly, For implementing the JavaScript logic inside the JSX, you have to use the curly braces { } as mentioned in the above example.

3- Virtual DOM

One of the key features of React library is the concept of Virtual DOM that speeds up the rendering of our application. Whenever you changed something in the HTML document with the help of JavaSciprt, it renders all the nodes of the document, thus making it slow for the complex application. React provides you with a concept of Virtual DOM which create a virtual representation of your Real DOM and updated your content first in Virtual DOM and then syncs it with your Real DOM due to which it only updated the nodes which have some changes needed to be updated. In this way, it is quite more efficient than the Real DOM.

4- Props & States

Prop is an object that contains attributes and their values which have been passed from parent components. Props are immutable, in simple words, Once a component receives props, we cannot modify them directly.

import React from 'react';

function Anchor(props) {
  return <a href={props.href}>{props.title}</a>;
}
export default Anchor;

We have created an Anchor component which takes two props; one is href and other is title

function App() {
  return (
    <div>
      <Anchor
        href="https://www.linkedin.com/danialsohail02"
        title="Danial's Linkedin"
      />
      <Anchor
        href="https://www.github.com/danialkhawaja02"
        title="Danial's Github"
      />
    </div>
  );
}

export default App;

Then, in the App component, we are importing the Anchor component and pass it the URL for the href and a title as props to render the anchor with the correct href and title.

The state is a built-in react object that is used to contain data or information about the component. Whenever the state changes, React will automatically re-render the component and update DOM with the new data. Let's clarify this concept with an example.

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

Using the useState hook, we define a state variable named count, which is initialized with 0. In addition, we define a function setCount that can be used to update count.

JSX syntax is used to display the count value and a button is defined to call the setCount function when clicked.