Mohammad Shahzeb Alam

Posted on Aug 24 • Originally published at mdshahzebalam.hashnode.dev

React Basics: An Introduction for Beginners

#react #webdev #frontend #beginners

What Is React ⚛︎

React is JavaScript Library Used For Building Web Apps. It Was Created by Meta In 2013

Why React ⚛︎

React is Fast and Efficient For Web Apps
Huge Ecosystem and Community
Its Easy to Learn If you Know JavaScript
You don’t Have to Write Markup in HTML File You Can Write in JSX File
Its Composable - Which Can Create Reuable and Interchangeable For Web Apps It Can Create Complex Systems

React is Declarative

Declarative What does That Means Actually let’s First Understand Imperative

Imperative - Its Means How to Do Something let’s Understand From an Example If you go to Restaurant and You Tell The Manager That there is a table In the Corner Go Check the Table And Book it For Me.

Declarative - its Means Just Tell Something It Will Work You Don’t Gonna Know How These Work is Done So, again Lets Understand These Through an Similar Example Suppose if You Go to a Restaurant then Directly Tell The Manager to Book The Table For You You Don’t Know How The Work is Going on Under The Hood So Same Works In React You Just Tell The React To Make These Happen and It Will Happen You Don’t Know What Compexity is Going On Under The Hood .

Let’s Learn Now How To Code In React From Basics

in HTML If You Want To Show Hello World in div How You Gonna Make It Like These

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <h1>Hello World</h1>
    </div>
</body>
</html>

In Your Browser It Will Look Like These Inside Div Hello World Is there

But using JavaScript You Can Write These Like These

const h1 = document.createElement("h1")
h1.textContent = "Hello World"
h1.className = "header"
document.getElementById("root").append(h1)

But In React

You Have to Attach src in HTML File To Use React Like These

 <!-- React and ReactDOM from unpkg -->
 <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
 <!-- Babel compiler (so you can write JSX directly in the browser) -->
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

In These Script Tag React DOM Is Doing The rendering Work Taking Your Component From React and Change Into JavaScript

Another Script Tag Babel Its Reloads The Browser After Bundling Your Files

Now You Can Write Like These

import { createRoot } from "react-dom/client"

const root = createRoot(document.getElementById("root"))
root.render(
<h1>Hello World</h1>
)

So Basically These is The Basic Way Of Doing The Same Usinge createRoot You Can Select The root Element From The div Inside The HTML.

render Means appending The Element in The div

There are More Ways of Doing These But These is the Basics Of React If you are Starting to Learn React

This Is It I Have Tried To Cover The Basics React

DEV Community