studylida

Web programming cheatsheet Html HTML Heading Elements This is h1 This is h2 This is h3 This is h4 This is h5 This is h6 HTML Paragraph Elements This is a paragraph. Self Closing Tags The List Element   third item first item of third item   fourth item   fifth item Anchor Elements http://www.google.com">Google Image Elements http://www.google.image/200" alt="virutal google image url"/> Comp..

index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./components/App";ReactDOM.render(, document.getElementById("root"));//CHALLENGE: I have extracted the Input Area, including the and// elements into a seperate Component called InputArea.//Your job is to make the app work as it did before but this time with the//InputArea as a seperate Component.// DO NOT: Modif..

Example1 index.jsimport React from "react";import ReactDOM from "react-dom";import App from "./components/App";ReactDOM.render(, document.getElementById("root"));// const citrus = ["Lime", "Lemon", "Orange"];// const fruits = ["Apple", ...citrus, "Banana", "Coconut"];// const fullName = {// fName: "James",// lName: "Bond"// };// const user = {// ...fullName,// id: 1,// username: "james..

value:The value represents the current value of an HTML element. It is commonly used in input fields (e.g., text inputs, checkboxes, radio buttons).For example, when a user types text into an input field, the value of that field changes.In React, value is often used to manage state using the useState hook. name:The name attribute represents the name of an HTML element. It is commonly used in for..

App.jsximport React from "react";import ClassComponent from "./ClassComponent";import FunctionalComponent from "./FunctionalComponent";// class App extends React.Component {// render() {// return ;// }// }function App() { ..

Example1import React, { useState } from "react";function App() { const [headingText, setHeadingText] = useState("Hello"); const [isMousedOver, setMouseOver] = useState(false); function handleClick() { setHeadingText("Submitted"); } function ..

Destructuring assignment The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Example1let a, b, rest;[a, b] = [10, 20];console.log(a);// Expected output: 10console.log(b);// Expected output: 20[a, b, ...rest] = [10, 20, 30, 40, 50];console.log(rest);// Expected out..

useState is a React Hook that lets you add a state variable to your component.const [state, setState] = useState(initialState)import { useState } from 'react';function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ...The convention is to name state variables like [something,..

If you want components display different things depending on different conditions, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operator Conditionally returning JSX Let's say you have a PackingList component rendering serveral items, which can be marked as packed or not. You can write this as an if/else statement like so:if (isPacked) { return..

index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); //Challenge. Render all the notes inside notes.js as a seperate Note //component. note.js const notes = [ { key: 1, title: "Delegation", content: "Q. How many programmers does it take to change a light bulb? A. None – It’s a hardware proble..