From 9984d33dbb103f0cab11cf195eb0c1df9569d8d4 Mon Sep 17 00:00:00 2001 From: Tanmay Joshi Date: Mon, 9 Oct 2023 10:48:02 +0000 Subject: [PATCH 1/9] DSA card missing in DOCS-Get Started --- content/docs/getting-started.mdx | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/content/docs/getting-started.mdx b/content/docs/getting-started.mdx index d28c879..2b3b453 100644 --- a/content/docs/getting-started.mdx +++ b/content/docs/getting-started.mdx @@ -114,7 +114,7 @@ As the content is generated now the only remaining part is to show it Now Raise a pull request Lets other people feedback on it
- Image + Image
Reffer to the links below for understanding the flow of content @@ -125,41 +125,56 @@ This is not the only structure or flow for writing content you can write however -
+
Image #### Learn - Curated Javascript Topics and Resources + Learn HTML, CSS, JS and Git & Github + + + Image + + #### DSA in Javascript + Learn data structures and algorithms in JavaScript - + Image #### Build - Css made easy with this Guide + Master React, Redux and Next Js - + Image #### Hire - Curated Javascript Topics and Resources + Get Interview Tips and Tricks - +
\ No newline at end of file From cca58ebc796067261a90b9ee7036ce23666d1385 Mon Sep 17 00:00:00 2001 From: Khushi Johri Date: Mon, 9 Oct 2023 16:59:15 +0530 Subject: [PATCH 2/9] Feat: Added 10 React theory questions Added 10 Frequently asked React Theory Interview Questions under Build Batch > React > Fundamental > Interview Questions (New Tab) --- content/batch/build/react/fundamentals.mdx | 67 ++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/content/batch/build/react/fundamentals.mdx b/content/batch/build/react/fundamentals.mdx index 79421d5..39e7c43 100644 --- a/content/batch/build/react/fundamentals.mdx +++ b/content/batch/build/react/fundamentals.mdx @@ -27,6 +27,7 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB Learn Assignment + Interview Questions @@ -50,7 +51,73 @@ Want to improve this page? Raise a issue on [@github](https://github.com/ManishB - At the end of each article, you'll find a few challenges to tackle. These challenges will help solidify your understanding of the concepts and make it easier to remember the code syntax. There are a total of 22 challenges spread across 8 articles (start From Your First Component to Keeping Components Pure ). 🧐💻 - How do you feel after completing these challenges? Did reading the official ReactJS documentation make it easier to understand the technology? Share your experiences and learning journey on LinkedIn and Twitter using the hashtag #FrontendWithVishal to inspire others to learn from the official documentation too. 🤝🚀 + + + + ### 📌🔨 Frequently Asked Theory Questions + + #### Q1 Why is React Known as React? + - Because of it's ability to react to changes in the data. When the data in a React Component changes, React will automatically re-render the component so that it refects the updated data. + + + #### Q2 What is JSX? + - JSX is HTML like syntax which can be written inside JavaScript file. JSX is not HTML inside JS but HTML like syntax. It is not a part of React but is used to make developer experience easy as we no longer have to write code using React.CreateElement. + - It also helps in preventing cross-site scripting. + - Browsers cannot read JSX directly, therefore, it must be transpiled (converted) to JavaScript before sending it to the Browser. Babel is needed here. + - JSX is not mandatory to use for using React but is recommended otherwise, code will be hard to read. 🤔📖 + + + #### Q3 Advantages of React + - It's ability to handle complex User Interfaces. + - Have components which are flexible and reusable. + - Uses the concept of Virtual Dom, React Fiber (New Reconciliation algorithm) which enhances 🚀 performance optimization of app. + + + #### Q4 Disadvantages of React + - Steep learning curve for beginners. + - Need additional libraries and tools to complete a full-featured application. + + + #### Q5 What are React Components? + - Components let you split the UI into small 🤏, independent, reusable piece of code 🧩. They makes it easy to manage, maintain and test code as well as UI of app. + - Types of components in React: Class-based Component and Functional Component. + + + #### Q6 Difference between Functional Components and Class-based Components? + - Functional Components are JavaScript functions and Class-based Components are JavaScript classes in the end. + - Functional Components lets you use React Hooks for state management, are simpler and do not have state or lifecycle methods whereas Class-based components have access to state and lifecycle methods. + + + #### Q7 Why do we use State Variables instead in React instead of Local Variables? + - Functional Components are JavaScript functions and Class-based Components are JavaScript classes in the end. + - Functional Components lets you use React Hooks for state management, are simpler and do not have state or lifecycle methods whereas Class-based components have access to state and lifecycle methods. + + + #### Q8 Why do we use State Variables instead in React instead of Local Variables? + - When we try to update the UI using Local State Variables, the data layer gets updated but the UI does not re-render. That's why the updated data does not appear on the screen but gets updated in the background. Now, here we need React Hooks. + - State Variables works and looks like local variables which cannot be directly updated. So, that's why, we need second parameter (a state function) which we get from useState hook. + + ```react + + const [stateVariable, setStateVariable] = useState(initalValue); + ↓ ↓ + (state variable) (state function) + + ``` + - Whenever there is a change in local state variable, the UI renders. As it triggers a Reconciliation cycle which uses React Fiber for efficent Dom Manipulation which updates only the updated part in the DOM. + + + #### Q8 What is State? + - An object which represents the current state of your component and can be updated using state function. + + + #### Q9 What is props? + - It allows you to pass data from parent component to child component. Its a one-way flow of data. + + #### Q10 Difference between State and props? + - State is internal data of a component that can change and is managed by the component itself, whereas props are external data passed to a component from its parent component. + - State can be updated by the component, whereas props cannot be updated by the component. From e1593398c9c3a08726866928ed1e3ec8a0be3b6f Mon Sep 17 00:00:00 2001 From: Sridhar Rajaram Date: Tue, 10 Oct 2023 16:13:28 +0530 Subject: [PATCH 3/9] readme clone url updated --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 237854a..af361f0 100644 --- a/README.md +++ b/README.md @@ -37,13 +37,13 @@ To get started with the Frontend Freaks website, follow these steps: 1. Clone the repository to your local machine: ```bash - git clone https://github.com/frontend-freaks/frontend-freaks-website.git + git clone https://github.com/FrontendFreaks/Official-Website.git ``` 2. Change into the project directory: ```bash - cd frontend-freaks-website + cd Official-Website ``` 3. Install the project dependencies: From 3eeab83c0c21a9a008d6d24392bfa9355dc81e45 Mon Sep 17 00:00:00 2001 From: Khushi Johri Date: Tue, 10 Oct 2023 22:45:31 +0530 Subject: [PATCH 4/9] Style: Converted DSA IN JS to DSA in JS --- config/nav.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/nav.ts b/config/nav.ts index 43545de..5ee6341 100644 --- a/config/nav.ts +++ b/config/nav.ts @@ -6,7 +6,7 @@ export const navConfig: NavItem[] = [ href: "/batch/learn/html/basic", }, { - title: "DSA IN JS", + title: "DSA in JS", href: "/batch/dsa/loops", }, { From 35fadbee0bf230b52b14050dc6cff357e3e4d0a1 Mon Sep 17 00:00:00 2001 From: Khushi Johri Date: Tue, 10 Oct 2023 22:49:50 +0530 Subject: [PATCH 5/9] Update main-nav.tsx --- components/layout/main-nav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/main-nav.tsx b/components/layout/main-nav.tsx index 3aa4d2f..728753c 100644 --- a/components/layout/main-nav.tsx +++ b/components/layout/main-nav.tsx @@ -34,7 +34,7 @@ export default function MainNav({ items, children }: MainNavProps) { href={item.href} key={index} className={cn( - "flex items-center font-medium transition-colors hover:text-foreground/80 sm:text-sm capitalize text-foreground/60" + "flex items-center font-medium transition-colors hover:text-foreground/80 sm:text-sm text-foreground/60" )} > {item.title} From ec2c0a3d6837b0e73019d8522636845448dd9d36 Mon Sep 17 00:00:00 2001 From: Huzaifa785 Date: Wed, 11 Oct 2023 21:52:25 +0530 Subject: [PATCH 6/9] fixed active menu option issue --- components/code-editor.tsx | 204 +++++++++++++++++------------- components/layout/main-nav.tsx | 16 ++- components/layout/sidebar-nav.tsx | 2 +- 3 files changed, 127 insertions(+), 95 deletions(-) diff --git a/components/code-editor.tsx b/components/code-editor.tsx index ade41b2..adf7081 100644 --- a/components/code-editor.tsx +++ b/components/code-editor.tsx @@ -7,109 +7,133 @@ import { faHtml5, faCss3, faJs } from "@fortawesome/free-brands-svg-icons"; import { faPlay, faCircleXmark } from "@fortawesome/free-solid-svg-icons"; interface File { - name: string; - language: string; - value: string; + name: string; + language: string; + value: string; } const files: Record = { - "index.html": { - name: "index.html", - language: "html", - value: `\n\n\n\n My Page\n\n\n

Hello, HTML!

\n\n`, - }, - "style.css": { - name: "style.css", - language: "css", - value: `/* Your CSS code goes here */\nbody { background-color: #f0f0f0; }`, - }, - "script.js": { - name: "script.js", - language: "javascript", - value: `// Your JavaScript code goes here\nconsole.log('Hello, JavaScript!');`, - }, - + "index.html": { + name: "index.html", + language: "html", + value: `\n\n\n\n My Page\n\n\n

Hello, HTML!

\n\n`, + }, + "style.css": { + name: "style.css", + language: "css", + value: `/* Your CSS code goes here */\nbody { background-color: #f0f0f0; }`, + }, + "script.js": { + name: "script.js", + language: "javascript", + value: `// Your JavaScript code goes here\nconsole.log('Hello, JavaScript!');`, + }, }; - export default function CodeEditor() { - const [fileName, setFileName] = useState("index.html"); - const [htmlCode, setHtmlCode] = useState(""); - const [cssCode, setCssCode] = useState(""); - const [jsCode, setJsCode] = useState(""); - const [outputVisible, setOutputVisible] = useState(false); + const [fileName, setFileName] = useState("index.html"); + const [htmlCode, setHtmlCode] = useState(""); + const [cssCode, setCssCode] = useState(""); + const [jsCode, setJsCode] = useState(""); + const [outputVisible, setOutputVisible] = useState(false); - useEffect(() => { - const runBtn = document.getElementById("runCode"); - const clsBtn = document.getElementById("closeWindow"); + useEffect(() => { + const runBtn = document.getElementById("runCode"); + const clsBtn = document.getElementById("closeWindow"); - runBtn?.addEventListener("click", () => { - setHtmlCode(files["index.html"].value); - setCssCode(files["style.css"].value); - setJsCode(files["script.js"].value); + runBtn?.addEventListener("click", () => { + setHtmlCode(files["index.html"].value); + setCssCode(files["style.css"].value); + setJsCode(files["script.js"].value); - setOutputVisible(true); - }); + setOutputVisible(true); + }); - clsBtn?.addEventListener("click", () => { - setOutputVisible(false); - }); - }, []); + clsBtn?.addEventListener("click", () => { + setOutputVisible(false); + }); + }, []); - const file = files[fileName]; + const file = files[fileName]; - const handleEditorChange: import("@monaco-editor/react").OnChange = (value) => { - if (value !== undefined) { - files[fileName].value = value; - } - }; + const handleEditorChange: import("@monaco-editor/react").OnChange = ( + value + ) => { + if (value !== undefined) { + files[fileName].value = value; + } + }; - return ( - <> -
- {Object.keys(files).map((fileKey) => ( - - ))} - + return ( + <> +
+ {Object.keys(files).map((fileKey) => ( + + ))} + +
+ +
+
+ +
- +
+