90 Days of Learning React

This blog is where I will document my journey of learning React over the next 90 days. Each day, I will focus on a specific topic or concept, and share my notes, code snippets, and resources.

Day 1: Introduction to React

What is React?
- A JavaScript library for building user interfaces.
- Developed by Facebook and released in 2013.
- Focuses on building reusable UI components.
Key Features:
- Virtual DOM for efficient rendering.
- Component-based architecture.
- Single Page Application (SPA) capabilities.

Setup and Installation

Install Node.js and npm.
Create a new React app using Create React App:

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

Alternatively, you can set up a React project using Vite for faster development:

npm create vite@latest my-app --template React
cd my-app
npm install 
npm run dev

Structure of a React App:

├── eslint.config.js
├── index.html
├── package.json
├── package-lock.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.jsx
│   ├── main.jsx
│   └── Nav.jsx
└── vite.config.jsx

Day 2: JSX and Rendering Elements

JSX (JavaScript XML)

App.jsx

import React from 'react'
export default App
function App() {

  return (
	  <h1>Hello, World!</h1>

  )
}

Nav.jsx

import React from "react";
export default Nav 
function Nav(){
	return(
		<h1>Nav Bar</h1>
	)
}

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import Nav from './Nav.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
    <Nav />
  </StrictMode>,
)

Key Points

Component should start with an uppercase letter, and the file name should match the component name. This is a convention in React to differentiate components from regular HTML elements.

We can name both App.js & App.jsx but in vite development environment we have to use jsx

We can return only one component by a jsx function so it’s good to wrap in <></> or

Day 3: Create own Custom components

Creating Custom components

script.js

let rootElement = document.getElementById('root');

const reactElement = {
	type: 'a',
	props: {
		href: 'https://mukund.xyz',
		_target: '_blank',
	},
	children: 'Visit mukund.xyz',
};


CreateReactElement(reactElement, rootElement);


function CreateReactElement(element, container) {
	const domElement = document.createElement(element.type);
	domElement.textContent = element.children;
        for (const prop in element.props) {
			if (prop === 'children') continue;
		domElement.setAttribute(prop, element.props[prop]);
	}
container.appendChild(domElement);
}

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
	
		<div id="root">
			
		</div>
	</body>
		<script src="script.js"></script>
</html>

Create a custom component in React that renders an anchor tag with a link to your website.