Understanding How React Works Under the Hood
The Main Idea
React is just JavaScript code that makes it easier to build user interfaces. Let's break down how it works in simple terms.
Basic Example
In a regular website, you might write HTML like this:
<a >Click me to visit Google</a>
But React thinks about this differently. React sees everything as objects, like this:
const linkElement = {
type: 'a',
props: {
href: 'https://google.com',
target: '_blank'
},
children: 'Click me to visit Google'
}
Building Our Own Mini-React
Let's create a simple version of React to understand how it works. We need two main things:
1- An HTML file with a container:
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="custom-react.js"></script>
</body>
</html>
2- A JavaScript file that: Creates elements Puts them on the page Handles their properties
Here's how we can do it step by step:
// 1. Create an element we want to show
const element = {
type: 'a',
props: {
href: 'https://google.com',
target: '_blank'
},
children: 'Click me to visit Google'
}
// 2. Function to put our element on the page
function customRender(element, container) {
// Create the HTML element
const domElement = document.createElement(element.type)
// Add the text inside it
domElement.innerHTML = element.children
// Add all the properties (like href, target, etc.)
for (let prop in element.props) {
domElement.setAttribute(prop, element.props[prop])
}
// Put it on the page
container.appendChild(domElement)
}
// 3. Use our custom render function
const rootContainer = document.getElementById('root')
customRender(element, rootContainer)
How Real React Does It
In real React, instead of writing objects directly, we write JSX (which looks like HTML):
// This JSX:
<a >Click me to visit Google</a>
// Gets converted behind the scenes to:
React.createElement('a',
{ href: 'https://google.com' },
'Click me to visit Google'
)
Key Takeaways
Working with Variables in React
You can include variables and expressions in your React code using curly braces:
const username = "Imad"
// This works:
<div>{username}</div>
<div>{2 + 2}</div>
// This works too:
<div>{username === "Imad" ? "Hello Imad!" : "Hello stranger!"}</div>
// But complex logic should go outside JSX:
const greeting = username === "Imad" ? "Hello Imad!" : "Hello stranger!"
<div>{greeting}</div>
Remember: The curly braces {} in JSX should contain simple expressions that return a value, not complex logic or statements.
Conclusion:
React is just JavaScript. When you're stuck, try breaking down the problem into smaller pieces and solve them one at a time.