Bundle: React

Progress (0%)

React Foundation - Questions

Pack 1 26 questions

Things to know

  1. React Foundation unit required

Introduction

  1. What is React?

    React is a JavaScript library for building interactive user interfaces. Learn more in React Introduction.

  2. Who created React?

    React was developed by Facebook (now Meta) — more specifically, by Jordan Walke. Learn more in React Introduction: What exactly is React?

  3. Why was React created?

    React was developed by Facebook while the engineering team were working on Facebook Ads and were tired of the problems associated with programming it imperatively in JavaScript. React was made to solve the intricate problem of working with the UI using pure JavaScript.

    Learn more in React Introduction: What exactly is React?

  4. In which year was React introduced?

    React was first introduced to the public in 2013. Learn more in React Introduction: What exactly is React?

  5. Is React open-source or closed-source?

    Open-source.

  6. Why is React called 'React'?

    The name 'React' comes from the programming paradigm of reactive programming. Reactive programming simply means that as we update the data in our program, other parts of the program update automatically.

    Learn more in React Introduction: Why exactly is React called 'React'?

  7. Is React a library or a framework?

    React is a library, not a framework. Learn more in React Introduction: A library or a framework?

  8. React is built around the idea of components. What does this mean?

    Being built around the idea of components means that React treats the UI as a set of these atomic pieces, for e.g. a button, a header, an accordion, a chat box, a slider slide, and so on, that holistically define the entire UI. Learn more in React Introduction: Components.

  9. React uses unidirectional data flow instead of bidirectional data flow. What does this mean?

    In bidirectional data flow, changes to the state are observed and are then propagated back to changes in the UI. And conversely, changes in the UI are also observed and then propagated back to changes in the state. There are two sources of truth of data in this model.

    In React, with unidirectional data flow, it's always changes to the state which then update the UI. There is one and only one source of truth.

    Learn more in React Introduction: Unidirectional data flow.

  10. What is JSX?

    JSX is kind-of like a balance between JavaScript and HTML. Precisely, it's an extension to JavaScript to allow for embedding HTML-like expressions in JavaScript. Learn more in React Introduction: JSX.

  11. What is meant when we say that React takes a 'declarative' approach to build the UI?

    It means that when working with React, a developer won't have to code 'how' to render the UI (unlike in pure JavaScript) but only have to code 'what' to render — React will manage the rest. Learn more in React Introduction: A declarative approach.

Quick Setup

  1. Can React be run on a webpage solely using external <script>s, without any installations on the computer?

    Yes that is possible. We need to use mainly two packages, react and react-dom, which we can call in from unpkg.com. Additionally, if we need JSX, we can further call in the babel package as well. Learn more in React Quick Setup: Calling in external <script>s.

  2. What problems do we face when using external <script>s to work with React instead of a manual installation?

    First off, if our React code uses JSX, then employing an external <script> to be able to parse that JSX and convert it into regular JavaScript at runtime would be really costly for performance. Secondly, with this external <script> approach, we are bound to use global variables provided by those <script>s and not at all be able to neatly structure our applications. Moreover, we can't really customize our development environments to better suit our app development needs.

  3. What is Create React App?

    Create React App is a scaffolding tool developed by Facebook to be able to quickly get started with a React application. It allows us to create a whole React project with preconfigured settings, directories, files, etc, with just one single command in the terminal, create-react-app. Learn more in React Quick Setup: Using Create React App.

  4. Give two benefits of Create React App.

    Following are two benefits:

    • Create React App allows us to quickly get started with a React project.
    • Create React App comes with hot reloading, which allows us to see updates live in the browser.

    Learn more in React Quick Setup: Using Create React App.

  5. How is an application, created using Create React App, started and launched in the browser for development?

    Using npm start. Learn more in React Quick Setup: Using Create React App.

Manual Setup

  1. What is a bundler, in terms of JavaScript?

    In terms of JavaScript, a bundler is a tool/program that takes in a bunch of JavaScript files (commonly known as modules) and combines them all into one single file to be delivered to the client. Learn more in React Manual Setup: What is a bundler?

  2. Why is a bundler used in React projects?

    Commonly, React apps are developed in a modular style, with different modules serving different needs of the app. To combine all these modules into one single JavaScript file to be delivered to the client, we need a bundler. Learn more in React Manual Setup: What is a bundler?

  3. Give two benefits of using a bundler.

    • Combine multiple modules (file) into one single file to be served to the client, saving on HTTP latency in delivering multiple files, and even saving us from browser inconsistencies in ECMAScript modules.
    • Perform other important processes in the bundling, such as minifying JavaScript files.

    Learn more in React Manual Setup: What is a bundler?

  4. Name some popular bundlers that could work with React.

    Perhaps the most famous is Webpack. Another one, that we use in this course, is Rollup. Learn more in React Manual Setup: What is a bundler?

  5. Why choose Rollup for a React project instead of Webpack?

    Webpack is a real beast technology — there are whole books written just to work with its configurations! Rollup, on the other hand, is pretty lightweight and simpler to configure than Webpack. If we don't need to power a beast app, it might be worth choosing Rollup over Webpack. Learn more in React Manual Setup: What is a bundler?

  6. What is the purpose of a package.json file in a React project?

    package.json serves to describe different aspects of the React project, such as its main entry file, its developer dependencies, its runtime dependencies, its author, and so on and so forth.

  7. What packages do we need to set up a React development environment using Rollup (excluding the plugins of Rollup)?

    We need rollup, @babel/core, @babel/preset-react, react, react-dom and finally serve. The purpose of each of these packages is explained in React Manual Setup: Manual setup using Rollup.

  8. What is the purpose of the rollup.config.mjs file in a Rollup setup?

    It specifies the configurations to be used by Rollup (the rollup package), such as the path to the entry file to read, the path to the output bundled file, what plugins to use, etc.

  9. What is the role of Babel in developing React applications?

    Babel is a transpiler that helps us convert JSX syntax into normal JavaScript that a browser can understand.

  10. What is the benefit of configuring npm scripts to execute given programs instead of manually calling those programs in the terminal?

    Using npm scripts, firstly we can simplify long statements to simple, memorable statements. For example, rollup -c -w can be simplified to npm run build. Secondly, we can call those scripts from anywhere in the React project directory without having to worry about the current working directory; npm itself takes care of calling the appropriate script.