What is React ?

ReactJs is a powerful framework that is developed by Meta(Formerly known as Facebook) 2011.It is free and Open-Source library for user Interfaces.React is use to build for single page applications.It is based for only virtual DOM(Document Object Model).There's some React backend features with core features: Back4App. The use of Back4App could be an ideal choice to complete React JS projects within less time. NodeJS,Express JS,Firebase,Heroku,Ruby on Rails,DigitalOcean App Platform,Asp.Net Core etc.

How to start with ReactJS?

Since,it's a framework so need to un derstand the some of the facts.Every frontend developer should know the basics of html,css,Javascript.If someone shows the Javascript then they will easily understand the ReactJs.ReactJs is also a part of Javascript.So before we start,ReactJs has two production fields 1)Npm(Node Package Manager) 2)NodeJs.
We need to Install the npm first on the terminal.Then we can work on it.

Quick Installation Guide

npx create-react-app my-app
cd my-app
npm start

ReactJs basic code snippets

ReactJs is based on components.Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.Example:

class Cat extends React.Component {
   render() {
    return <h2>Hi, I am a Cat!</h2>;
  }
}

Creating a function with ReactJs is simple as normal Javascript. Let's see:

function Cat() {
  return <h2>Hi, I am a Cat!</h2>;
}

How to use the Cat component inside the House component:

function Cat() {
  return <h2>I am a Cat!</h2>;
}
function House() {
  return (
    <>
      <h1>Who lives in my House?</h1>
      <Cat/>
    </>
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<House/>);

Some of the best React projects 2022

Since we are discussing about the React.So I want to share some of the Ideas that start with.
1)Social Media App
2)eCommerce App
3)Productivity App
4)Entertainment App
5)Blog
6)Dating App
7)Expense Tracker Apps
8)Chat App
9)Books/Library
10)Music App
In my experience, I have started making React projects in the year 2021.My first react project was a login/signup website.It was so easy and simple in the first then I started using hooks,axios,material UI plugins etc. So I am just writing the code snippet below:

import React, {useState} from 'react';
import './styles.css';

function App() {
  const [values, setValues] = useState ({
    firstName: "",
    lastName: "",
    email: "",
  });

 const [submitted,setSubmitted] = useState (false);
 const [valid, setValid] = useState(false);

const handleFirstNameInputChange = (event) => {
    setValues({...values, firstName: event.target.value})
  }
  const handleLastNameInputChange = (event) => {
    setValues({...values, lastName: event.target.value})
  }
  const handleEmailInputChange = (event) => {
    setValues({...values, email: event.target.value})
  }
  const handleSubmit = (event) => {
    event.preventDefault();
    if(values.firstName && values.lastName && values.email) {
      setValid(true);
    }
    setSubmitted(true);
  }

  return (
    <div class ="form-container">
      <form class="register-form" onSubmit = {handleSubmit}>
      <h1>Login Form</h1>
        {submitted && valid ? <div className="success-message">Successfully Registered</div> : null}
        <input value = {values.firstName} id ="first-name" onChange = {handleFirstNameInputChange}
        className="form-field" placeholder="First Name" name="firstname"/><br/>
        {submitted && !values.firstName ? <span>Please enter a first name</span> : null}

        <input value = {values.lastName} id ="last-name" onChange = {handleLastNameInputChange}
        className="form-field" placeholder="Last Name" name="lastname"/><br/>
        {submitted && !values.lastName ? <span>Please enter a last name</span> : null }

        <input id ="password"
        className="form-field" type="password" placeholder="Password" name="password"/><br/>
        { submitted && !values.email ? <span>Please enter a email</span> :null}
        <input value = {values.email} id ="email" onChange = {handleEmailInputChange}
        className="form-field" placeholder="Email" name="Email"/><br/>

        <button class="form-field" type="submit">
          Register Now
        </button>
      </form>
    </div>
  );
}

So, here in this code I have mentioned in the first line usestate.The React useState Hook allows us to track state in a function component.State generally refers to data or properties that need to be tracking in an application.The style.css file contains my stylesheet part.This is a basic website that can very important to learn as a beginner. Link: github.com/Sulagna-Dutta-Roy/React-LoginForm

import React, {useState} from 'react';

The function App() is calling the name parts of the website.The return handles the basic react part.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Open+Sans:wght@300&display=swap');

body {
    background: rgb(240, 230, 218);
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat',sans-serif;
}

.form-container {
    width: 400px;
    background-color: rgb(216, 210, 210);
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.4), 0 5px 5px 0 rgba(0,0,0,0.30);
    padding: 20px;
    border-radius: 3px;
}
.registration-form {
    justify-content: space-evenly;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.success-message {
    background-color: #76b852;
    padding: 15px;
    color: #fff;
}
.form-field {
    margin: 10px 0 10px 0;
    padding: 15px;
    font-size: 16px;
    border: 0;
}
span {
    font-size: 14px;
    color: red;
    margin-bottom: 15px;
}
input {
    background: rgb(240, 230, 218); 
    padding: 120px;
    border-color: #fff;
}

.error{
    border-style: solid;
    border: 2px solid #ffa4a4;
}
button {
    background: rgb(10, 21, 116);
    color: #fff;
    cursor: pointer;
    border-radius: 2px;
}

Conclusion and some resources

In this blog, I have shared some Ideas about react.Basically it is very good tool to start for frontend career. I have been doing work with 1year right now.It is user friendly and open source.I recommended everyone just give it a shot with React and it will never depressed you. Like why should we choose this,because static websites has no backend functionality but React already providing direct methods to create dynamic websites.I am sharing some resources to get started with React: w3schools.com/react/default.asp, reactjs.org/docs/getting-started.html, freecodecamp.org/news/tag/react,https://www.., thapatechnical.com/2020/05/react-developer-.., reactresources.com,https://github.com/facebook/create-react-app