[React]: Without Create React App

React

10/31/2019

Below is vanilla JavaScript that shows how React works without using Create React App

index.html

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie-edge" />
    <title>Some Document</title>
  </head>
  <body>
    <div id="root">React not rendered</div>
    <!-- import react libraries -->
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script>
      const Person = props => {
        return React.createElement("div", {}, [
          React.createElement("h1", {}, props.name),
          React.createElement("p", {}, props.occupation),
        ])
      }

      const App = () => {
        return React.createElement("div", {}, [
          React.createElement("h1", {}, "React is rendered!!"),
          React.createElement(Person, { name: "Ellis", occupation: "cook" }),
          React.createElement(Person, { name: "Jon", occupation: "singer" }),
          React.createElement(Person, {
            name: "Alex",
            occupation: "developer",
          }),
        ])
      }

      //   ReactDOM.render(<App />, document.getElementById('root'));
      ReactDOM.render(React.createElement(App), document.getElementById("root"))
    </script>
  </body>
</html>

JSX{2-6,

const App = () => {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  )
}

// Behind the scene, above code is equivalent to the following

const App = () => {
  return React.createElement(
    "div",
    { className: "App" },
    React.createElement("h1", {}, "hello")
  )
}

Codepen Example

WRITTEN BY

Ellis Min

Keeping a record

GitHub