Custom React

App.js

/* @jsx createElement */
import { createElement, render, Component } from './react.js';

class Text extends Component {
  render() {
    return (
      <span>L({this.props.v})</span>
    );    
  }
} 

function Hello(props) {
  return <li className="item"><Text v={props.label} /></li>;
}

function App() {
  let x = 10;

  x = x ** x;
  
  return (
    <div>
      <h1>hello world</h1>
      <ul className="board" onClick={() => null}>
        <Hello label="Hello balbla" />
        <Hello label={`hello ${x}`} />
        <Hello label="World 3" />
        <Hello label="React 4" />
      </ul>
    </div>
  );
}

render(<App />, document.getElementById("root"));

package.json

{
  "name": "tiny-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d build --plugins=@babel/proposal-class-properties -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-private-methods": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5"
  }
}

tiny-react.js

export class Component {
  constructor(props) {
    this.props = props;
  }
}

function renderElement(node) {
  if (typeof node === "string") {
    return document.createTextNode(node);
  }

  if (node === undefined) return;

  const $el = document.createElement(node.type);

  node.children.map(renderElement).forEach((node) => {
    $el.appendChild(node);
  });

  return $el;
}

export function render(vdom, container) {
  container.appendChild(renderElement(vdom));
}

export function createElement(type, props, ...children) {
  if (typeof type === "function") {
    if (type.prototype instanceof Component) {
      const comp = new type({ ...props, children });
      return comp.render.call(comp);
    } else {
      return type.apply(null, [props, ...children]);
    }
    
  }
  return { type, props, children };
}

안녕하세요 선생님!
/* @jsx createElement */ 주석을통해 Babel이 React.createElement(createElement)형태로 컴파일되고 리액트 컴포넌트로 실행된다.
라고 이해하면 될까요?

말씀하신 React.createElement(... ) 가 기본 값이고 @jsx 옵션은 기본값을 바꾸는 옵션이고요~ ^^

아하! React.createElement(type, props, ...children) -> createElement(type, props, ...children) 이렇게 동작하는 군요! 감사합니다!

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx