Puppeteer Course

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>React Test</title>
  </head>
  <body>
    <div id="root">Not Rendered</div>

    <script src="./App.js"></script>
  </body>
</html>
// App.js
// We can comment import react because we are using jsx, babel will automatically import react for us.
// import React from "react";
import ReactDOM from "react-dom";
import Pet from "./Pet";

// Code goes here.
// https://gumroad.com/l/dank-mono
// https://github.com/tonsky/FiraCod

/*
// This is react component, think of it like class
const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Adopt Me!!"),
    React.createElement(Pet, {
      name: "Luna",
      animal: "Dog",
      breed: "Havanese",
    }), // in react by default data only flow from parent to child components.
    React.createElement(Pet, {
      name: "Pepper",
      animal: "Bird",
      breed: "Cocka",
    }),
    React.createElement(Pet, {
      name: "Sudo",
      animal: "Dog",
      breed: "Tail",
    }),
  ]);
};
*/
// name of componenets always starts with capital letter
const App = () => {
  return (
    <div>
      <h1>Adopt Me!!</h1>
      <Pet name="Luna" animal="Dog" breed="Havanese" />
      <Pet name="Pepper" animal="Bird" breed="Cockatiel" />
    </div>
  );
};

// Rendering component to browser, kind of making connection between custom html element and react componenet
// ReactDOM.render(React.createElement(App), document.getElementById("root"));
ReactDOM.render(<App />, document.getElementById("root"));
// Pet.js
/*

const Pet = (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.animal),
    React.createElement("h3", {}, props.breed),
  ]);
};

*/

const Pet = (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h2>{props.animal}</h2>
      <h3>{props.breed}</h3>
    </div>
  );
};

export default Pet;
Previous
Next