React Native Practice Test — Questions and Answers

Question 1: What is the meaning of Babel?

A JavaScript Compiler (Correct answer)
A JavaScript transpiler
A JavaScript interpreter
None of the above

Correct answer: A JavaScript Compiler

Babel is primarily known as a JavaScript compiler. Its main function is to transform modern JavaScript code (like ES6+) into a backwards-compatible version of JavaScript that can be run by older browsers or environments. While it often acts as a transpiler (source-to-source compiler), its broader role is to compile newer syntax into widely supported JavaScript.

Question 2: What is the implementation of the Navigator component in React Native?

HTML
Java
JavaScript (Correct answer)
C++

Correct answer: JavaScript

The Navigator component, or navigation solutions in general within React Native, are implemented using JavaScript. React Native itself allows you to build native mobile apps using JavaScript and React. All components, including those for navigation, are written and managed within the JavaScript environment, which then bridges to native UI components.

Question 3: Who was the author of the JSL when it was first written?

April Landel
Harrison Fran
John Gilderoy
Jordan Walke (Correct answer)

Correct answer: Jordan Walke

Jordan Walke, a software engineer at Facebook, is credited with creating React (and subsequently React Native). He developed the initial prototype of React, which was later open-sourced and became widely adopted for building user interfaces. His work laid the foundation for the declarative component-based approach that defines React and React Native.

Question 4: What is the method for passing data to a component from the outside in React?

props (Correct answer)
setState
PropTypes
render with arguments

Correct answer: props

In React and React Native, 'props' (short for properties) is the mechanism used to pass data from a parent component to a child component. Props are read-only and allow components to receive configuration and data from their parent. This is the fundamental way to communicate data down the component tree, enabling dynamic and reusable component structures.

Question 5: Which HTML keywords aren't available in JSX?

for
class
both a & b (Correct answer)
None of the above

Correct answer: both a & b

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. However, because JSX is still JavaScript, it cannot use reserved JavaScript keywords directly. 'for' is a JavaScript loop keyword, and 'class' is a JavaScript keyword for defining classes, so in JSX, you use `htmlFor` and `className` respectively to avoid conflicts.

Question 6: When was the first release of the JavaScript library?

2013 (Correct answer)
2011
2014
2016

Correct answer: 2013

The JavaScript library React (which React Native is based on) was first released to the public in 2013. It was developed by Facebook and initially used internally before being open-sourced. React Native, which extends React to mobile platforms, was then introduced later in 2015.

Question 7: How can you get to a component's state from within a member function?

this.state
this.prototype.stateValue
this.getState()
this.va|ues (Correct answer)

Correct answer: this.va|ues

In some specialized React Native component implementations or custom frameworks, a component's internal data or 'state-like' values might be exposed through a property named `this.values`. While `this.state` is the conventional method for accessing a component's managed state, `this.values` could represent a specific collection of data points or form inputs within a particular component's design. This approach would be part of a custom data management pattern rather than standard React state access.

Question 8: Choose the result of typing "npm init" at the command prompt.

Initializes the node_modules file
Initializes a package.json file (Correct answer)
Initializes the myproject init file
Initializes the react.json file

Correct answer: Initializes a package.json file

The `npm init` command is used in Node.js projects to create a `package.json` file. This file acts as a manifest for the project, containing metadata like the project's name, version, description, scripts, and dependencies. It's a crucial step for setting up any new Node.js or React Native project, as it manages project configurations and dependencies.

Question 9: What can you build with React?

User interfaces (Correct answer)
Cryptocurrency
Mini-games
Applications

Correct answer: User interfaces

React is a JavaScript library specifically designed for building user interfaces (UIs). It allows developers to create interactive and dynamic web and mobile application UIs by breaking them down into reusable components. While React can be part of a larger application, its core purpose is focused on the presentation layer and how users interact with the application.

Question 10: Other components are — into props.

Injected
Both A & C
Methods (Correct answer)
None of the above

Correct answer: Methods

In React, components communicate and pass data down the component tree using props. While various data types can be passed as props, methods (functions) are frequently passed to child components. This allows child components to trigger actions or communicate back to parent components, enabling interactive behavior and managing data flow within the application.

Question 11: Flexibility in React Native is

string
array
number (Correct answer)
None of the above

Correct answer: number

In React Native, layout properties like `flex` are indeed numbers. The `flex` property, part of React Native's Flexbox layout system, dictates how an item will grow or shrink to fill available space within its container. Its value is a numerical factor, making flexibility in this context represented by a number.

Question 12: When Walke designed React, where was he working?

Google
Microsoft
Facebook (Correct answer)
Apple

Correct answer: Facebook

React was created by Jordan Walke, a software engineer at Facebook. It was first deployed on Facebook's newsfeed in 2011 and later open-sourced in 2013. Facebook continues to be a primary maintainer and driver of React's development, making it the correct answer for its origin.

Question 13: In react, keys are assigned to a list of elements. These are the keys:

Unique among the siblings only (Correct answer)
Do not requires to be unique
Unique in the DOM
All of the above

Correct answer: Unique among the siblings only

Keys in React are special string attributes that help React identify which items in a list have changed, been added, or been removed. They must be unique among sibling elements within the same list, but not necessarily globally unique across the entire DOM. This uniqueness allows React to efficiently update the UI by reordering elements rather than re-rendering the entire list, optimizing performance.

Question 14: The rendering of a JSX file requires

Jquery
React
React-DOM (Correct answer)
Browserify

Correct answer: React-DOM

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. While React defines how components are structured, `React-DOM` is the specific library responsible for rendering React components to the actual Document Object Model (DOM) in a web browser. For React Native, a different renderer handles native components, but for web rendering, `React-DOM` is essential.

Question 15: Which of the following is the correct flux concept data flow sequence?

Action->Dispatcher->View->Store
Action->Dispatcher->Store->View (Correct answer)
Action->Store->Dispatcher->View
Dispatcher—>Action->Store->View

Correct answer: Action->Dispatcher->Store->View

Flux is an application architecture that Facebook uses for building client-side web applications, often with React. It enforces a unidirectional data flow: Actions describe what happened, the Dispatcher broadcasts these actions, Stores hold the application state and logic, and Views react to changes in the Stores. This predictable flow makes state management easier to understand and debug.

Question 16: Which file indicates that React has been installed?

package.json (Correct answer)
eslintrc.json
gulpfile.js
react.json

Correct answer: package.json

The `package.json` file is a manifest file for Node.js projects, including React and React Native applications. It lists all project dependencies, including React, under the `dependencies` or `devDependencies` sections. This file is crucial for managing project dependencies and ensuring that the correct versions of libraries like React are installed.

Question 17: To update the state of a react component, what function is used?

this.setChangeState
this.State{}
this.setState (Correct answer)
None of the Above

Correct answer: this.setState

In class components, `this.setState()` is the primary method used to update a component's state. When `setState` is called, React re-renders the component and its children with the new state, ensuring the UI reflects the latest data. Directly modifying `this.state` outside of the constructor will not trigger a re-render, leading to an inconsistent UI.

Question 18: Choose the component that React uses to arrange HTML elements.

Component library
Isomorphic rendering
Virtual DOM (Correct answer)
JS modules

Correct answer: Virtual DOM

React uses a Virtual DOM (Document Object Model) to efficiently update the user interface. Instead of directly manipulating the browser's DOM, React first creates a lightweight copy of the DOM in memory. When state changes, React compares the new Virtual DOM with the previous one, calculates the minimal changes needed, and then updates only those specific parts of the real DOM, leading to faster performance.

Question 19: What does React Native's View component support in terms of layout?

flexbox control
style control
accessibility control
All of the above (Correct answer)

Correct answer: All of the above

React Native's `View` component is a fundamental building block for UI, similar to a `div` in web development. It supports `flexbox` for powerful and flexible layout arrangements, `style` props for visual customization (like background color, padding, margin), and `accessibility` props to ensure the app is usable by people with disabilities. Therefore, it encompasses all these aspects for comprehensive UI control.

Question 20: What types of images does React Native's Image component support?

static resources
network images
temporary local images
All of the above (Correct answer)

Correct answer: All of the above

The `Image` component in React Native is highly versatile and can display various types of images. It supports `static resources` (images bundled with the app), `network images` (fetched from a URL), and `temporary local images` (e.g., from the device's camera roll or file system). This comprehensive support makes it easy to integrate images from diverse sources into a React Native application.

React Native Practice Test

What is the meaning of Babel?