bashybaranaba / myporfolio-react Goto Github PK

This portfolio website showcases my skills, projects, and experience as a Software Developer built using React. The website is deployed on github pages here

• React
• Material UI v5
• react-typing-animaton

• official-joke-api

Answer: NPM stands for Node Package Manager. It is a package manager for JavaScript and is the default tool for managing packages in Node.js, allowing users to install, update, and manage libraries and dependencies for their JavaScript projects.

Answer: SPA stands for Single Page Application. It's a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. This approach results in a more seamless user experience, similar to a desktop application.

Answer: The event loop is a fundamental aspect of Node.js and JavaScript environments, handling asynchronous operations. It continuously checks the call stack and, if it's empty, pulls functions from the event queue to be executed. This mechanism allows JavaScript to perform non-blocking operations, despite being single-threaded.

Answer: export x is a named export, allowing multiple exports per module. export default x is a default export, allowing only one per module. To import a named export, use import { x } from 'module'; for a default export, use import x from 'module'.

Answer: In React, className is used instead of class due to the latter being a reserved keyword in JavaScript. JSX is a syntax extension for JavaScript, and using className avoids conflicts with the class keyword used in JavaScript classes.

<button onClick="{setCounter(counter" + 1)}>+1</button>

Answer: This code incorrectly updates the state directly inside the render method, causing setCounter to be called every time the component renders, leading to an infinite loop. Instead, use onClick={() => setCounter(counter + 1)}.

Answer: Object deconstruction is a JavaScript feature that allows unpacking properties from objects into distinct variables. In React, it's often used in components to extract props or state. For example:

const MyComponent = ({ title, content }) => (
  <div>
    <h1>{title}</h1>
    <p>{content}</p>
  </div>
);

Answer: In React, this is achieved using JSX (JavaScript XML). JSX allows writing HTML-like syntax directly in JavaScript code. Under the hood, JSX is transformed into regular JavaScript objects and function calls by a compiler. In React, this transformation involves the use of React.createElement() as seen in the follwing example

Example of Code

JSX

const WelcomeMessage = (props) => (
  <div className="welcome-container">
    <h1>Welcome, {props.name}!</h1>
    <p className="greeting">Join us on our exciting journey.</p>
  </div>
);

React.createElement`

const WelcomeMessage = (props) =>
  React.createElement(
    "div",
    { className: "welcome-container" },
    React.createElement("h1", null, "Welcome, ", props.name, "!"),
    React.createElement(
      "p",
      { className: "greeting" },
      "Join us on our exciting journey."
    )
  );

Answer: async/await is syntactic feature in JavaScript for working with promises in a more synchronous-looking manner. async is used to declare an asynchronous function, and await is used to wait for a promise. Example:

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

Answer: A Promise in JavaScript is an object representing the eventual completion or failure of an asynchronous operation. It allows you to write asynchronous code in a more manageable way. Example:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched successfully");
  }, 2000);
});
myPromise.then((data) => console.log(data));

Icons used in this project are provided by Icons8.

This project is open-sourced under the MIT License.