* Modify createElement as per jsx

* Allow unused OwnReact imports

.eslintrc.json

@@ -11,7 +11,14 @@
     "indent": ["error", 2],
     "linebreak-style": 1,
     "react/react-in-jsx-scope": "off",
-    "quotes": ["error", "double"]
+    "quotes": ["error", "double"],
+    "no-unused-vars": [
+      "error",
+      {
+        // Allow unused variables that start with OwnReact
+        "varsIgnorePattern": "OwnReact"
+      }
+    ]
   },
   "parserOptions": {
     "ecmaVersion": 2021,

lib/createElement.js

@@ -8,8 +8,9 @@ import { styleToString } from "./utils/styleToString";
  * @returns {HTMLElement}
  */
 export const createElement = (element, props = {}, ...children) => {
-  // create a new element
-  const _htmlElement = document?.createElement(element);
+  // create a new element with the given tagName
+  let _htmlElement =
+    typeof element === "string" ? document?.createElement(element) : element();
   // add the props to the element
   if (props && typeof props === "object" && Object.keys(props).length > 0) {
     Object.keys(props)?.map((propName) => {

src/components/button/button.js

@@ -1,5 +1,7 @@
-const Button = () => {
-  return <button>Click Me</button>;
+import OwnReact from "../../../lib/index";
+
+const Button = (children) => {
+  return <button>{children}</button>;
 };
 
-export default Button;
+export default Button;

src/index.js

@@ -1,11 +1,11 @@
 import OwnReact from "../lib/index";
-// import Button from "./components/button/button";
+import Button from "./components/button/button";
 
 const App = () => {
   return (
     <div id="root2">
+      <Button>Click me</Button>
       <h1>My First Own React App</h1>
-      {/* <Button /> */}
       <p>
         <div className="testing">
           <h1>My First Own React App with custom Babel and Webpack config</h1>