RCT-150: 30 Days of React - Day 2

.gitignore

@@ -2,7 +2,4 @@ draft.md
 react-for-everyone.md
 component.md
 draft
-
-
-
-
+.DS_Store

solutions/day-02/exercise1.js

@@ -0,0 +1,25 @@
+// What is React?
+
+// 1. What is React?
+// React is a JavaScript library for building a reusable user interface.
+
+// 2. What is a library?
+// Library is a set of predefine functions, codes, files and/or scripts that can be integrated into the main target or host.
+
+// 3. What is a single page application?
+// A single page application is a type of web application that has only one web page.
+
+// 4. What is a component?
+// An application or program can be divided into different parts based on the functions or group of related functions. These parts are called Components.
+
+// 5. What is the latest version of React?
+// 18.2.0 - as of November 2, 2022
+
+// 6. What is DOM?
+// Document Object Model (DOM) represents the structural hierarchy of an HTML document.
+
+// 7. What is React Virtual DOM?
+// React Virtual DOM is the virtual representation of the real DOM. It is used to modify elements and then syncs with the real DOM.
+
+// 8. What does a web application or a website(composed of) have?
+// A web application (client side) is composed of HTML, CSS, and/or Javascript.

solutions/day-02/exercise2.js

@@ -0,0 +1,11 @@
+// Why React?
+
+// 1. Why did you chose to use react?
+// Most of the projects of the company use React.
+
+// 2. What measures do you use to know popularity?
+// • Github's watches and stars
+// • Surveys, e.g. Stackoverflow's Insight
+
+// 3. What is more popular, React or Vue?
+// Based on Stackoverflow's Insight (https://survey.stackoverflow.co/2022/#section-most-popular-technologies-web-frameworks-and-technologies), React is more popular.

solutions/day-02/exercise3.js

@@ -0,0 +1,21 @@
+// JSX
+
+// 1. What is an HTML element?
+// An HTML element is a component of an HTML document that tells a web browser how to structure and interpret a part of the HTML document.
+
+// 2. How to write a self closing HTML element?
+// Self-closing element is an element with no contents or child elements.
+
+// 3. What is an HTML attribute? Write some of them.
+// HTML attribute provides additional information about the element. 
+// The "style" in the h1 tag below is an example of attribute:
+// <h1 style="color:red;">
+
+// 4. What is JSX?
+// The JavaScript XML (JSX) allows us to write HTML elements with JavaScript code.
+
+// 5. What is babel?
+// babel is a transpiler that converts JSX code into Javascript code.
+
+// 6. What is a transpiler?
+// A transpiler is a program that translates a source code from a language to another at the same level of abstraction.

solutions/day-02/exercise4.js

@@ -0,0 +1,26 @@
+// JSX Elements
+
+// 1. What is a JSX element?
+// A JSX element allows us to write HTML elements with JavaScript code.
+
+// 2. Write your name in a JSX element and store it in a name variable
+const name = <h1>John Harold Rasco</h1>;
+
+// 3. Write a JSX element which displays your full name, country, title, gender, email, phone number. Use h1 for the name and p for the rest of the information and store it in a user variable
+const user = (
+  <div>
+    <h1>John Harold Rasco</h1>
+    <p>Philippines</p>
+    <p>PhD</p>
+    <p>Male</p>
+    <p>john.harold.rasco@codeandtheory.com</p>
+    <p> phone: "+639170000000",</p>
+  </div>
+);
+
+// 4. Write a footer JSX element
+const footer = (
+  <footer>
+    <p>This is a sample footer.</p>
+  </footer>
+);

solutions/day-02/exercise5.js

@@ -0,0 +1,24 @@
+// Inline Style
+
+// 1. Create a style object for the main JSX
+const main = (
+  <main style={{ backgroundColor: "#F3F0F5" }}>
+    <p>This is a the main object!</p>
+  </main>
+);
+
+// 2. Create a style object for the footer and app JSX
+const footer = (
+  <footer style={{ backgroundColor: "red" }}>
+    <p>This is a the main object!</p>
+  </footer>
+);
+
+const app = <div style={{ backgroundColor: "orange" }}>{footer}</div>;
+
+// 3. Add more styles to the JSX elements
+<header
+  style={{ border: "2px solid orange", color: "black", fontSize: "18px" }}
+>
+  <h1>I am a header.</h1>
+</header>;

solutions/day-02/exercise6.html

@@ -0,0 +1,41 @@
+<!--
+  Internal Styles
+
+  1. Apply different styles to your JSX elements
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      .app {
+        height: 100%;
+        line-height: 1.5;
+        font-family: "Montserrat";
+        font-weight: 300;
+        color: red;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script
+      crossorigin
+      src="https://unpkg.com/react@latest/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"
+    ></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <script type="text/babel">
+      const app = (
+        <div className="app">This is a sample of internal styling.</div>
+      );
+      const root = ReactDOM.createRoot(document.getElementById("root"));
+      root.render(app);
+    </script>
+  </body>
+</html>

solutions/day-02/exercise7.html

@@ -0,0 +1,71 @@
+<!--
+    Inject data to JSX
+
+    1. Practice how to make JSX element and injecting dynamic data(string, number, boolean, array, object)
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <div id="root"></div>
+    <script
+      crossorigin
+      src="https://unpkg.com/react@latest/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"
+    ></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+    <script type="text/babel">
+      const stringExample = () => {
+        const name = prompt("Enter your name:");
+        return <h1>{name}</h1>;
+      };
+
+      const numberExample = () => {
+        const age = prompt("Enter your age:");
+        return <p>{parseInt(age)}</p>;
+      };
+
+      const booleanConditionExample = () => {
+        const isFilipino = true;
+        return (
+          <p>{isFilipino ? "Filipino Citizen" : "Not a Filipino Citizen"}</p>
+        );
+      };
+
+      const arrayExample = () => {
+        const skills = ["cooking", "dancing", "singing"];
+        return <p>{`Skills: ${skills.join(", ")}`}</p>;
+      };
+
+      const objectExample = () => {
+        const pet = {
+          name: "Malou",
+          breed: "Breedwinner",
+          age: 1,
+        };
+        return (
+          <div>
+            <p>{`Pet name: ${pet.name}`}</p>
+            <p>{`Pet breed: ${pet.breed}`}</p>
+          </div>
+        );
+      };
+
+      const app = (
+        <div>
+          {stringExample()}
+          {numberExample()}
+          {booleanConditionExample()}
+          {arrayExample()}
+          {objectExample()}
+        </div>
+      );
+      const root = ReactDOM.createRoot(document.getElementById("root"));
+      root.render(app);
+    </script>
+  </body>
+</html>