React Components, Instances & Elements

readme.md

Setup

npm create vite@latest
npm install
npm run dev

Illustration

Cited from

https://stackoverflow.com/a/42939845

main.jsx

import React, { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is a component instance:', this);
  }

  render() {
    const another_element = <div>Hello, World! </div>; 
    console.log('This is also an element:', another_element); 
    return another_element;
  }
}

console.log('This is a component:', MyComponent);

const element = <MyComponent/>;
console.log('This is an element:', element);

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/*<App />*/}
    <MyComponent />
  </StrictMode>,
)