ELECTIVE2- PREFINAL

d

How do you declare a state variable called count and initialize it to zero in a functional component?

\
a. let \[count, setCount\] = useState(0);

b. let \[count\] = useState(0);

c. const \[count\] = useState(0);

d. const \[count, setCount\] = useState(0);

True

T or F

ReactJS is a library.

b

Which keyword creates a constant in JavaScript?

a. let

b. const

c. constant

d. var

b

What is the rule of thumb for when to use state in React?

\
a. Use state when you need to render your component to the DOM or manipulate the DOM elements directly

b. Use state when you need to store data that can change over time or affect the rendering of your component

c. Use state when you need to pass data from one component to another or share data across your application

d. Use state when you need to define the appearance and behavior of your component or handle user interactions

b

How do you update the state variable count to increase it by one in a functional component?

a. count++;

b. setCount(count + 1);

c. count = setCount(prevCount => prevCount + 1);

d. useState(count++);

b

What is the purpose of using state in React components?

a. To render the component to the DOM

b. To store data that can change over time

c. To define the appearance and behavior of the component

d. To pass data from one component to another

d

Who Develop React.js?

a. Google

b. Twitter

c. Microsoft

d. Facebook

c

What is the correct command to create a new React project?

a. npm create-react-app

b. npx create-react-app

c. npx create-react-app my-app

d. npm create-react-app my-app

b

What type of element will be rendered from the following code?

a. ReactDom

b. h1

c. Component

d. div

True

T or F

\
To develop and run React code, Node.js is required.

c

How do you initialize the state of a functional component?

a. By declaring a state variable and assigning an initial value

b. By using the setState hook and passing an initial value

c. By using the useState hook and passing an initial value

d. By assigning an object to this.state and passing an initial value

d

How does data in ReactJS flow?

a. two-way

b. one-way upwards

c. binding

d. one-way downwards

c

Which of the following is used to pass the data from parent to child?

a. children

b. state

c. props

d. hooks

d

A copy of the 'real' DOM that is kept in memory is called what? \n

a. DOM

b. React DOM

c. Shadow DOM

d. Virtual DOM

a, c, e

What is wrong with this code snippet? (multiple ans)

a. The keyword used for declaring a state.

b. JSX syntax

c. This component can't be imported.

d. This code snippet will throw an error.

e. The way the state is initialized.

a

How do you update the state of a functional component?

a. By calling the setter function returned by the useState hook and passing a new value or a function

b. By mutating the state variable directly

c. By using the setState hook and passing a new value or a function

d. By using the useState hook and passing a new value

ReactJS

__________ is an open-source JavaScript library for building user interfaces

Facebook in 2011

Who and when does reactJS created?

false, not a framework

t or f

\
ReactJS is a framework, but a library that focuses on the view layer of the application.

JSX and virtual DOM

ReactJS introduced the concept of ______ __&__ _________

JSX

_________ a syntax extension that allows writing HTML-like code in JavaScript

virtual DOM

_______ a technique for efficiently updating the Ul without manipulating the actual DOM.

ReactJS also uses components, which are reusable pieces of code that can render Ul elements and handle interactivity.

ReactJS

_______ is an open-source JavaScript library that allows developers to create user interfaces for web and mobile applications.

1. Facebook
2. Instagram
3. Netflix
4. Airbnb

ENUMERATION

\
websites that use ReactJS

faster and easier

Pros

\
ReactJS allows for **___** __**and**__ **_____ development of complex and dynamic web applications** with reusable components and state management.

virtual DOM

Pros

\
ReactJS enables better performance and user experience by using a **________** that only updates the changes in the real DOM, reducing the load on the browser.

server-side rendering

Pros

\
ReactJS **supports _____________**,. which can improve SEO and initial loading time of the web pages.

large and active

Pros

\
ReactJS has a **__** __**and**__ **___ community of developers** and a rich ecosystem of tools and libraries that can enhance Its functionality and compatibility.

steep learning curve

cons

\
ReactJS has a _________ and requires a good understanding of JavaScript, JSX, props, state, hooks, lifecycle methods, etc.

complete framework

ReactJS is **not a _________** and may need additional libraries or configurations for routing, testing, styling, etc.

compatibility issues

ReactJS may introduce s**ome __________ with older browsers** that do not support ES6 features or require polyfills.

frequent updates and changes

ReactJS may have **_____** __**and**__ **____** **in Its API** that can make it hard to keep up with the latest best practices and standards.

What do you mean by “ ReactJS is a library not a framework”

\
library - is a set of tools na pwd natun mashare, pwd ma import

framework - is a ecosystem of tools and a way of working. Mas completo ang framework kaysa sa library. A framework can have a multiple library

JSX

A super set of JavaScript. It is a JavaScript with new syntax.

 Document Object Model

What is the acronym of DOM

True

t or f

React has a own memory of your application. So it will not look on your actual DOM in your browse, because react has it virtual DOM.

ReactJs

We use _____- in SPAs (Single page app) - so ang SPA nig adto nimo sa next na page dli niya e reload, mu retain lang sya and mu add some code of html

PWA

(Progressive web apps) - example spotify. So ang PDWAs kay SPA sya na pwede e cross platforms

traditional

A webpage tag ig navigate nimo, e reload niya tanan.

1. npx create-react-app

Enumeration

\
Steps in creating a react app

NPM

is a **package manag**er used to install, delete, and update JavaScript packages on your machine.

NPX

is a **package executer**, and it is used to execute JavaScript packages directly, without installing them.

Component

Also return a html

1. a component must return a HTML
2. You cannot return multiple JSX elements

Enumeration

\
Rules in JSX

npm start

Runs the app in the development mode.

npm start

The page will reload when you make changes. \n

npm start

Open http://localhost:3000 to view it in your browser.

npm start

You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the `build` folder.

npm run build

It correctly bundles React in production mode and optimizes the build for the best performance.

npm run build

The build is minified and the filenames include the hashes. \n Your app is ready to be deployed!

npm run eject

this is a one-way operation. Once you `eject`, you can't go back!

npm run eject

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

npm run eject

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

npm run eject

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

downward

In react it is needed that we think __.

\+

Draw me a Virtual dom

true

T or F

We must avoid global variables

props

Like anhon nimo pag access sa iban na components or variables na ara sa iban na .js file, just use a ___

SyntheticEventObject

It is a react wrapper for a native browser event

False,once

React components are rendered twice.

States

Sa isa ka function, kaisa lang kita muReturn. So Unsaon pag force nga e reevaluate ni react ang enter component para e re-render balik.

const

We use ___ in setting a variable so that the user cant set the variable manually.

Lifting the state up

this is usually the solution in we want to share states.

true

T or f

Use effect and side effect are always could during render

README.md

The .md extension indicates the file is a markdown file. Markdown is a lightweight markup language with plain text formatting syntax. Many source code projects come with a README.md file that gives instructions and useful information about the project. When we push projects to platforms like GitHub, the README.md file usually displays information about the content contained in its repositories. Because you used create-react-app, your README.md should be the same as the official create-react-app GitHub repository²².

node_modules/

\: This folder contains all node packages that have been installed via npm. Since we used create-react-app, a couple of node modules are already installed. We’ll not touch this folder, since node packages are usually installed and uninstalled with npm via the command line.

• package.json

\: This file shows you a list of node package dependencies and other project configurations

package-lock.json

This file indicates npm how to break down all node package versions. We’ll not touch this file.

.gitignore

This file displays all files and folders that shouldn’t be added to your git repository when using git, as such files and folders should be located only in your local project. The node_modules/ folder is one example. It is enough to share the package.json file with others, so they can install dependencies on their end with npm install without your entire dependency folder

public/

This folder holds development files, such as public/index.html. The index file is displayed on localhost:3000 when the app is in development or on a domain that is hosted elsewhere. The default setup handles relating this index.html with all the JavaScript from src/.

Single-page applications

are popular for building web applications using frameworks like Angular, Ember, Knockout, Backbone, and React

Single-page applications

a user requests one minimal HTML file and one associated JavaScript file from the server, and the JavaScript renders the entire application with HTML and JavaScript for its interactions

src/ folder

 

The ___________ contains everything you need in the beginning.

\

src/App.js

The _________ file is used to implement React components and is the main focus.

src/App.test.js

·        The ______________ file is for your tests and src/index.js is an entry point to the React world.

True

T or F

\
Variables defined **in the function'**s body will be **re-defined** each time this function runs.

true

T or f



·        Variables **can be defined outside** of the App component if they are **not needed** within the component.

JSX

is a syntax that mixes HTML and JavaScript in the output of a React component

JSX

·        follows the camelCase naming convention for HTML attributes, and replaces a few internal HTML attributes

JSX

__________________expressions can be used to display string primitives or JavaScript objects in the output

true

T or f



·        Anything in curly braces in JSX can be used for JavaScript expressions, including function execution

map

·        The list is defined as an array variable, with each item having several properties



·        The_________ method is used to iterate over each item of the list and return a new version of each



·        A JSX fragment is returned for each item of the list

key attribute

·        The __________ is assigned to each list item's element for React to identify modified items if the list changes

true

t or f

\


·        It is important to avoid using the index of the item in the array as the key attribute

Components

·       ___________ can be organized into hierarchies, with one parent component and multiple child and sibling components.

root component

·        The __________ is the top-level component in the hierarchy, and leaf components don't render any other components.

true

t or f



·        JavaScript classes have constructors that assign arguments to class instances and define methods.



·        Class definitions are the blueprint of its capabilities; usage occurs when an instance is created.

false, multiple

·        React components also have one component definition but can have **single** component instances.

React DOM

is a library in React that lets us manipulate the DOM using React components.

ReactDOM.render()

·        The ________ function is used to render React components into the DOM.



·        The first argument of ___________ is the component or JSX to render.



·        The second argument of ____________ is the HTML element where the React application will enter the HTML. This element should have an id='root'.

Arrow function

·       ___________ expressions can be used more concisely, and the parentheses can be removed if there's only one argument.



·        Defining React function components with ________ can make them more concise.



·      _____________s without block bodies can be used if the function doesn't perform any tasks but only returns information.

event handler

·        To use onchange handlers in JSX, define a function for the change event of the input field, called an ____________, and pass it to the onChange attribute of the input field.

synthetic event

·        The _____________ is a wrapper around the browser’s native event, with more functions to prevent native browser behavior.

true

t or f

·        JavaScript in HTML can display objects, pass JavaScript primitives to HTML attributes, and pass functions to an element’s attributes for handling events.



·        Arrow functions are concise as event handlers, while function statements can give more visibility in a larger React component.

props

·        _________ allow passing variables as information from one component to another component in React.



·        Using _________, we can avoid using global variables in React components, which does not scale well.

False, props

t or f

\


·        To use component, we first pass the variable to the child component via a prop attribute in JSX.



·        The child component then receives the prop variable as an argument in its function signature, which can be accessed through the props object.



·        Using component helps prevent polluting the global scope in React components.

Props

are used to pass information down the component tree

state

·       is used to make applications interactive