🧗‍♂️Random Restart

Recent Notes

TOP- React

3 min read

Intro

React Course

Let’s learn React, the most popular JavaScript library for building user interfaces. Take your frontend skills to a whole new level!

.

1) Introduction

Setting up a react environment

https://www.theodinproject.com/lessons/node-path-react-new-setting-up-a-react-environment

Toolchains

Vite

Vite builds frontend tools for developers and it leverages the latest technologies under the hood to provide a great developer experience. Fortunately, it also caters to the React ecosystem. We will use Vite’s CLI to quickly create a template React project. It requires minimal configuration and provides extremely useful tools right out of the box, allowing us to get straight to the learning.

Explore React App

https://www.theodinproject.com/lessons/node-path-react-new-setting-up-a-react-environment#delving-deeper

main.jsx (entry point)
│
├── renders <App /> from App.jsx
     │
     ├── contains layout and routes
         ├── contains Header, Footer, PageContent, etc.

index.html

<!doctype html>
 
<html lang="en">
 
  <head>
 
    <meta charset="UTF-8" />
 
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <title>Vite + React</title>
 
  </head>
 
  <body>
 
    <div id="root"></div>
 
    <script type="module" src="/src/main.jsx"></script>
 
  </body>
 
</html>

main.jsx

  • main.jsx is serves as the entry point of the application
    • It’s where React attaches your component tree to the HTML <div id="root"></div> inside public/index.html

App.jsx

  • App.jsx acts as the parent container for all other components — like Header, Main, Footer, Counter, etc
    • is rendered by ReactDOM.render() (or <App /> in main.jsx if you’re using Vite).

React Developer Tools

React Developer Tools

2) Getting Started with React

React Components

ReactJS Functional Components

ReactJS functional components are JavaScript functions that return a JSX element, which is a template used to define the component’s structure. JSX looks similar to HTML, but it has a special syntax that lets it be converted into JavaScript code

function Greeting() {
  return <h1>&quot;I swear by my pretty floral bonnet, I will end you.&quot;</h1>;
}
 
export default Greeting;
  • Note: the function name must be capitlized, so React can distinguish the JSX as a React component rather than an HTML tag
What is JSX?

https://www.theodinproject.com/lessons/node-path-react-new-what-is-jsx

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Rather than separate rendering logic (.js) and markup (.html) in separate files, JSX allows React to separate concerns by functionality. Each component handles a specific concern (like rendering a button or form), and both the logic and its markup live together in the same file.

JSX rules:

  • Return a single root element
    • Multiple elements can be wrapped in a parent tag, such as a <div> or a React fragment, like <>Children</>
  • Unlike in HTML, in JSX, all tags must be properly closed and nested
    • JSX enforces these rules for clarity and consistency since it’s parsed by JavaScript, not a browser.
  • HTML attributes must be written in camelCase
    • When JSX is compiled, element attributes (like class, stroke-width, etc.) must be mapped to valid keys of JavaScript objects (i.e. can’t have dashes or reserved words like class)
    • ex) <svg strokeWidth="2" className="icon" />

JavaScript in JSX with Curly Braces

Graph View

Backlinks