diff --git a/.gitignore b/.gitignore index be5f2d2..7544d5b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,4 @@ draft.md react-for-everyone.md component.md draft - - - - +.DS_Store \ No newline at end of file diff --git a/solutions/day-02/exercise1.js b/solutions/day-02/exercise1.js new file mode 100644 index 0000000..43a5048 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/solutions/day-02/exercise2.js b/solutions/day-02/exercise2.js new file mode 100644 index 0000000..52af382 --- /dev/null +++ b/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. diff --git a/solutions/day-02/exercise3.js b/solutions/day-02/exercise3.js new file mode 100644 index 0000000..d9645bc --- /dev/null +++ b/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: +//

+ +// 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. \ No newline at end of file diff --git a/solutions/day-02/exercise4.js b/solutions/day-02/exercise4.js new file mode 100644 index 0000000..4c1049c --- /dev/null +++ b/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 =

John Harold Rasco

; + +// 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 = ( +
+

John Harold Rasco

+

Philippines

+

PhD

+

Male

+

john.harold.rasco@codeandtheory.com

+

phone: "+639170000000",

+
+); + +// 4. Write a footer JSX element +const footer = ( + +); diff --git a/solutions/day-02/exercise5.js b/solutions/day-02/exercise5.js new file mode 100644 index 0000000..42b4ef9 --- /dev/null +++ b/solutions/day-02/exercise5.js @@ -0,0 +1,24 @@ +// Inline Style + +// 1. Create a style object for the main JSX +const main = ( +
+

This is a the main object!

+
+); + +// 2. Create a style object for the footer and app JSX +const footer = ( + +); + +const app =
{footer}
; + +// 3. Add more styles to the JSX elements +
+

I am a header.

+
; diff --git a/solutions/day-02/exercise6.html b/solutions/day-02/exercise6.html new file mode 100644 index 0000000..98989b6 --- /dev/null +++ b/solutions/day-02/exercise6.html @@ -0,0 +1,41 @@ + + + + + + + + +
+ + + + + + + diff --git a/solutions/day-02/exercise7.html b/solutions/day-02/exercise7.html new file mode 100644 index 0000000..67306f7 --- /dev/null +++ b/solutions/day-02/exercise7.html @@ -0,0 +1,71 @@ + + + + + +
+ + + + + + +