Software Development 2 Midterm

What is the purpose of 'this' operator in JavaScript?

'This' refers to an object that is executing the current piece of code. It references the object that is executing the current function. If the function being referenced is a regular function, 'this' references the global object.

What will the below code output to the console: console.log(1 + "2" + "2"); console.log(1 + + "2" + "2"); console.log(1 + -"1" + "2"); console.log(+"1" + "1" + "2");

122 32 02 112

What is the correct HTML for creating a hyperlink? a. <a>www.google.com</a> b. <a href=www.google.com>Google</a> c. <a name=www.google.com>Google</a> d. <a url=www.google.com>Google</a>

<a href=www.google.com>Google</a>

How do you write multi line comments in React?

<div> {/* */} </div>

How do you write single line comments in React?

<div> {// } </div>

1. Inside which HTML element do we write JavaScript? a. <js> b. <script> c. <scripting> d. <javascript>

<script>

What are stateful components in React?

A stateful component is a component where the behavior of said component is dependent on the state of the component. These stateful components are wither function components with hooks or class components.

What tool does React use to compile JSX? a. ReactDOM b. JSX Compiler c. Babel d. React Router

Babel

Which is the correct CSS syntax? a. Body { color: black; } b. { body: color=black; } c. Body: color=black; d. { body; color: black; }

Body { color: black; }

What does CSS stand for?

Cascading Style Sheet

What are hooks in React?

Hooks is a function that allows you use state and other React features without writing a class.

What does HTML stand for?

Hyper Text Markup Language

Why can't you update props in React?

In React props are immutable and top-down. A parent can send any prop values to a child, but the child can't modify the recieved props.

What are some advantages of React?

Increases the application's performance with Virtual DOM, JSX makes code easy to read and write, it renders both client and server side, it is easy to integrate with frameworks since it is only a view library, and it is easy to write unit and integration tests with tools such as Jest.

What does the useState hook do?

It allows us to track state in a function component.

What does JSX stand for?

JavaScript XML

What are the different phases of the component lifecycle?

Mounting: The component is ready to mount in the browser DOM. This phase covers initalization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods. Updating: The component gets updated in two ways- sending the new props and updating the state either from setState() or forceUpdate(). This phase covers getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods. Unmounting: The component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

What are props in React?

Props are inputs to components. They are single values or objdcts containing a set of values that are passed to components on creation similar to HTML-tag attributes. The primary purposes of props in react are to pass custom data to your component, trigger state changes, and use via this.props.reactProp inside component's render() method.

What is a pure component?

Pure components are components which render the same output for the same state and props. In function components, pure components can be reached through memoized React.memo() API wrapping around the component.

What is a state in React?

State of a component is an object that holds some information that may change over the lifetime of the component. Whenever the state of the object changes, the component re-renders.

What will be the output when the following code is executed? Explain. console.log(false == '0') console.log(false === '0')

True False The triple equal operator === acts like a traditional equality operator: it evaluates to be true if the two expressions on either sife have the same thpe and the same value. The double equal operator == tries to coerce the values before comparing them.

Why should we not update the state directly?

Without using the state setting function, React does not know that the object has changed, so it does not do anything in response.

Write a declaration for a JavaScript array 'colors' containing 'red' 'yellow' and 'blue'

const colors = ['red','yellow','blue']

Write an example of a simple object in JavaScript

const obj1 = { firstName: 'Riley', lastName: 'Penn' }

What is the correct JavaScript syntax to change the content of the HTML element below? <p id="demo"> This is a demonstration.</p> a. document.getElement("p").innerHTML = "Hello World" b. document.getElementByName("p").innerHTML = "Hello World" c. document.getElementByld("demo").innerHTML = "Hello World" d. #demo.innerHTML = "Hello World"

document.getElementByld("demo").innerHTML = "Hello World"

In HTML, onblur and onfocus are a. event attributes b. style attributes c. HTML elements

event attributes

How do you add a background color for all <h1> elements? a. h1.all { background-color: #FFFFFF; } b. h1 { background-color: #FFFFFF; } c. all.h1 { background-color: #FFFFFF; }

h1 { background-color: #FFFFFF; }

Write a simple Hello World Component using the class component syntax

import React from 'react' class HelloWorld extends Reach.Component { render() { return <h1> Hello World! </h1> } } export default HelloWorld

Write a simple Hello World Component using the functional component syntax

import React from 'react';, import ReactDOM from 'react-dom'; function HelloWorld(){ return( <div> Hello World! </div> ); } ReactDOM.render(<HelloWorld/>, document.querySelector('#root'))

Write a React counter component

import React { useState } from "react"; import ReactDOM from "react-dom"; function App() { const [count, setCount] = useState(0); return ( <div className="App"> <h2>Counter: {count}</h2> <button onClick={() => setCount(count - 1)}>Decrement</button> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } const rootElement = document.getElementByld("root"); ReactDOM.render(<App />, rootElement);

Write an example of a React Button Component. Make sure to include the event handler.

import { useState } from "react"; function Button() { const [count, setCount] = useState(0); return ( <> <p> You clicked {count} times</p> <button onClick{() => setCount(count +1)} >Click Me</button> </> ); }

Which HTML attribute is used to define inline styles? a. style b. font c. styles d. class

style

How do you call a function named testFunction? a. testFunction b. testFunction() c. this.testFunction()

testFunction()

To develop and run React code, Node.js is required a. true b. false

true

How do you write a multi line comment in JavaScript?

using /* */

How do you write a single line comment in JavaScript?

using //

How do you write comments in HTML

using <!— —>