HELOOOO !! Everyone. In this blog, I will be teaching you React from absolute scratch. But before we start you need to have some very basic JavaScript, javascript DOM manipulation, HTML, and CSS knowledge .
Without any further ado ...Let's get started, shall we
But first,
What is react?
- React is a javascript f̶r̶a̶m̶e̶w̶o̶r̶k̶ Library.
- let's keep it even more simple, React is mainly a view layer.
- React is all about creating custom, reusable Document Object Model (DOM) elements and maintaining the flow of the data throughout the page, from actions taking place to the view being updated.
- React is meant to provide a way to shape your interactions, so that events that update the DOM flow via. your components(Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function) from the highest order in the Document Model Object (DOM) tree to the lowest, notifying/updating the User Interface as changes happen that modify its state (state is simply a current truth of an application).
- React embraces the use of JSX (It's not mandatory to use JSX to write React application, simple JS will suffice. But JSX makes it a whole lot easier to create a React application).
What is JSX ?
const element = <h1>Hello, There!</h1>;
- JSX stands for JavaScript XML.
- JSX makes it easier to write and add HTML inside React application.
- JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
Let's get started.
But first, Let's create a User Interface using Vanilla JavaScript and Document Object Model.
Create a new empty project directory and add two file (index.html and app.js)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vannila Javascript</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./app.js></script>
</body>
</html>
app.js
const rootElement = document.querySelector("#root")
const element = document.createElement("div")
element.textContent = "Hello There!!"
element.className = "container"
rootElement.appendChild(element)
index.html
app.js
Let's implement React inside our code.
- First step, we need to import react
- We can either make use of npm or we can use a service like unpkg .
- In this tutorial, I will be using UNPKG.
Visit Here UNPKG
- Now, create a script tag inside your HTML and paste the following :
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
Now, inside your app.js remove all except rootElement.
let's use ReactDOM.render to render our element to our rootElement
In the previous javascript way, we attached properties of textContent to our element.
But, In react we specify our properties on the creation as a JavaScript Object and adding children and className inside it.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Let's Do in React way</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./app.js></script>
</body>
</html>
app.js
const rootElement = document.querySelector("#root")
const element = React.createElement("div",{
children: "Hello from the react side",
className: "container",
})
ReactDOM.render(element,rootElement)
You can write the above app.js code by removing the children and adding it as an React.createElement third argument by simply providing the value for the children props.
app.js
const rootElement = document.querySelector("#root")
const element = React.createElement("div",{
className: "container",
},"Hello from the react side")
ReactDOM.render(element,rootElement)
You can also add React.createElement and create another element inside children
app.js
const rootElement = document.querySelector("#root")
const element = React.createElement("div",{
children: React.createElement("span",null,"Hello form the react side")
className: "container",
})
ReactDOM.render(element,rootElement)
Cheerss!! Next part comming soon..
See you on the next part 🎉🎉
Follow me on Github and Twitter
