React has been the driving force behind many web applications. Its ability to break down UI into reusable components, maintain state, and ensure efficient updates has made it a favorite among developers. However, React's intricacies can be difficult to grasp at first. Let's strip React down to its core concepts by implementing a basic version from scratch. # 1. Defining React If you open the `index.tsx` file and add this line there, ```javascript const a =

Hello

; ``` and see the console in the chrome you will get a error saying `React is not defined` so lets first defile `React` in the code ```javascript let React = {}; const a =

Hello

; ``` Now if you look at the console you will find a new error, it will say `React.createElement` is not a function. Cool lets define that as well.. ```javascript let React = { createElement: function () {}, }; const a =

Hello

; ``` Fantastic no more errors!! But there isn’t any “Hello Word” text in the page, Lets dive more in to the `createElement` and see what kind of arguments we get to the function. ```javascript let React = { createElement: function (...args) { console.log(args); }, }; // Output ['div', { "__source": { "fileName": "index.tsx", "lineNumber": 7, "columnNumber": 11 }, "__self": {} }, 'Hello'] ``` so we get 3 properties, - div - props - children ```javascript let React = { createElement: function (tags, props, ...children) { if( typeof tags === "function" ){ return tags(props) } const element = { tags, props: { ...props, children } }; return element; }, }; const App = () => { return (

Hello

This is a paragraph

) }; const render = (reactElement, container) => { } render(, document.querySelector("#app")) ```