PREP React, Node.js, Blazer

  1. What is React.js?
    React (also known as React.js or ReactJS) is an open-source, front end, JavaScript library for building user interfaces or UI components created by Facebook in 2013 and now maintained by them and a community of individual developers and companies.

    React can be used as a base in the development of single-page or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing
  2. Write a working React page from top to bottom which outputs 'Hello World' with minor styling.
    • <!DOCTYPE html>
    • <html>
    • <head>
    • <meta charset="utf-8">
    • <title>React! React1</title>
    • <script src=""></script>
    • <script src=""></script>
    • <script src=""></script>
    • <style>
    • #container {padding:50px;background-color: #EEE;}
    • #container h1 {font-size:110px;font-family:sans-serif;color:#0080A8;}
    • </style>
    • </head>

    • <body>
    • <div id="container"></div>
    • <script type="text/babel">
    • var dest = document.getElementById("container");

    • ReactDOM.render(
    • <h1>Hello World!</h1>,
    • dest
    • );
    • </script>
    • </body>
    • </head>
    • </html>
  3. Write a rudimentary example of React usage in HTML with JSX and JavaScript that displays 'Hello World'.
    <div id="root"></div>

    • <script type="text/babel">
    • function Greeter(props) {
    • return <h1>{props.greeting}</h1>
    • }
    • var App = <Greeter greeting="Hello World!" />;
    • ReactDOM.render(App, document.getElementById('root'));
    • </script>
  4. What are React components?
    Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass in values that are known as "props". The two primary ways of declaring components in React is via functional components and class-based components.
  5. There are two ways to create react components. What are they and write a code example of each.
    • Class-based Component:
    • class ParentComponent extends React.Component {
    • state = { color: 'green' };
    • render() {
    • return ( <ChildComponent color={this.state.color} /> );
    • }}

    • Function-based component:
    • const Greeting = (props) => <div>Hello, {}!</div>;
  6. What is the virtual DOM and why is it important?
    React creates an in-memory data-structure cache (virtual DOM), computes the resulting differences, and then updates the browser's displayed DOM efficiently using a process called reconciliation.

    This allows the programmer to write code as if the entire page is rendered on each change, while the React libraries only render subcomponents that actually change. This selective rendering provides a major performance boost since it saves the effort of recalculating the CSS style, layout for the page and rendering for the entire page.
  7. What is JSX? Provide an example.
    JSX, or JavaScript XML, is an extension to the JavaScript language syntax, similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers. React components are typically written using JSX, although they do not have to be (components may also be written in pure JavaScript). 

    Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers. This processing is generally performed during a software build process before the application is deployed.

    • An example of JSX code:
    • class App extends React.Component {
    • render() {
    • return (
    • <div>
    • <p>Header</p>
    • <p>Content</p>
    • <p>Footer</p>
    • </div>
    • );
    • }
    • }
  8. If-else statements can't be used in JSX code, so how would we write code for an if-else statement?
    • return (
    • <div>
    • <h1>{ i === 1 ? 'true' : 'false' }</h1>
    • </div>
  9. Write a react component which will produce the following:

    <div>Section 1</div>
    <div>Section 2</div>
    <div>Section 3</div>
    • class App extends React.Component {
    • render() {
    • const sections = [1, 2, 3];
    • return (
    • <div>
    • {sections.length > 0 && => (
    • /* 'key' is used by react to keep track of list items and their changes */
    • /* Each 'key' must be unique */
    • <div key={"section-" + n}>Section {n}</div>
    • ))}
    • </div>
    • );
    • }
    • }
  10. What are react Hooks?
    Hooks are functions that let developers "hook into" React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

    React provides a few built-in hooks like useState, useContext, useReducer and useEffect. Others are documented in the Hooks API Reference. useState , useReducer and useEffect, which are the most used, are for controlling state and side effects respectively.
  11. What are the two rules of Hooks?
    There are rules of hooks which describe the characteristic code pattern that hooks rely on. It is the modern way to handle state with React.

    • (1) Hooks should only be called at the top level (not inside loops or if statements).
    • (2) Hooks should only be called from React function components, not normal functions or class components

    Although these rules can't be enforced at runtime, code analysis tools such as linters can be configured to detect many mistakes during development. The rules apply to both usage of hooks and the implementation of custom hooks, which may call other hooks.
  12. What is Node.js. Explain.
    Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.

    Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web-application development around a single programming language, rather than different languages for server-side and client-side scripts.
  13. What is Redux and why use it?
    Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library.
  14. Create a react class called AnimalList which outputs several animals in a list... make sure to also use a key.
    • class AnimalList extends React.Component {
    • render() {
    • var animals = ["horse", "cow", "goat", "sheep", "duck"];
    • return <ul>
    • {, index) => (
    • <li key={index}>{animal}</li>
    • ))}
    • </ul>
    • }
    • }
  15. What's the quickest way to start a new react application?
    Open CMD and type in "npx create-react-app helloworld". This will create a directory called helloworld in the directory where you gave this command, it will contain 3 folders: node_modules, public, and src along with package.json and app.js.

    While still in CMD mode, change to the newly created directory and execute the command "code ." which will open up the application in Visual Studio Code. Finally, use the toolbar and select Terminal | New Terminal and then execute the command "npm start" which will start the application using Node.js as the runtime.
  16. Where do we find an application's react dependencies, version, scripts, name, and more?
    In the root, within a file called package.json
  17. What is the difference between npm and yarn? Provide a list of 10 common commands using each.
    Yarn is another package manager like npm is, however, it is newer, faster, and allows for better version control with yarn.lock.

    • npm install === yarn (install is the default behavior of yarn)
    • npm install taco === yarn add taco (taco package is saved to package.json as any code relying on a package must be installed first)
    • npm uninstall taco === yard remove taco (taco package is removed from package.json)
    • npm update === yarn upgrade (both are upgrading version numbers to their newest versions)
    • npm install taco -global === yarn global add taco (install taco globally)

    • Each of the below commands are exactly the same in yarn as in npm.
    • yarn run dev (runs dev scripts only)
    • yarn help (list all commands with explainations on how to use them)
    • yarn link (links package of another project)
    • yarn info (show information about a package, ie, created, dependencies, version, description, etc)
    • yarn outdated (checks for outdated package dependencies)
    • yarn publish (publish to npm registry, can't be undone)
    • yarn cache (lists global cache of packages in file system)
    • yarn login (prompts for username/email for npm registry)
    • yarn test (runs the test script, if one has been defined)
    • yarn install (install all dependencies for a project)

    • Yarn Specific Commands:
    • yarn licenses ls (list licenses of your dependencies)
    • yarn why taco (identify dependencies of taco)

    • Add specific version package like so:
    • yarn add package-name@1.2.3

    • Or to a specific environment like so:
    • yarn add taco -dev
  18. Create a Header.js file which imports two external files PropTypes and a custom Button. Within the file return both the header information with a button on the same line from a function called Header(). Make sure to use default values for button text and color and that those parameters are required strings.

    Finally, add an onClick event to the button which displays 'Yahoooo...' to the console.
    • import PropTypes from 'prop-types'
    • import Button from './Button'

    • const Header = ({title}) => {    
    •      const onClick = () => {console.log("Woohooo!");}    
    •      return (
    •           <h1>{title}</h1>
    •           <Button color='green' text='Add' onClick={onClick} />            </header>    )
    • }
    • Header.defaultProps = {
    •      title: 'Task Tracker (default name)',    
    •      color: 'steelblue'}
    • Header.propTypes = {title: PropTypes.string.isRequired,}

    export default Header
Card Set
PREP React, Node.js, Blazer
Single App Page, React, Node.js, Blazer