React Dynamic Components Lab

Learning Goals

Practice writing dynamic components
Practice jumping into existing code and making the necessary changes

Introduction

In this lab, you'll write React components and render them dynamically based on information they receive from their parent components. This will enable us to use components as templates with the ability to render variable content.

There are two discrete parts of this lab, and they should be tackled one after the other. We will need to first create a Comment component from scratch and then add a few things to the ColorBox component.

All of the css has been provided, as well as a good amount of starter code. The general structure has already been provided - you are to pick up where the code leaves off and make both the Comment and the ColorBox components behave dynamically.

Here is an image of what we want once we are finished, complete with a view of the rendered DOM tree on the right:

...and here is a tree view of our component parent-child structure:

└── App
    ├── BlogPost
    │   ├── Comment
    │   ├── Comment
    │   └── Comment
    │
    └── ColorBox
        └── ColorBox
            └── ColorBox
                └── ColorBox (etc.)

Go ahead and npm start to see what we already have rendering in the browser.

Deliverables

(The application will error on npm start until the Comment component is created and exported)

`Comment` Component

Create a Comment component in the file, Comment.js within src/ and don't forget to:
- import React, { Component } from 'react' at the top of our file
- Use the class X extends Component {} syntax
- export the class so it can be used in other files
- import the class in BlogPost
It should expect a single prop (the text of a comment), which can be used in the component via: this.props.commentText. This prop is passed in src/BlogPost.js
It should have a single <div> in its render() method
The <div> should have a className="comment" attribute
Note: The BlogPost component needs minor alteration to properly pass the contents of its commentsArray to each of the Comment components that it is rendering
Don't forget - we can unpack variable values directly with JSX by wrapping them in {}, i.e. {this.props.commentText}

Take a Break

Look at something other than your computer screen for at least five minutes

`ColorBox` Component

Should expect a single prop (an opacity value), which can be used in the component via: this.props.opacity. This prop is first passed in src/App.js
If the opacity value is greater than or equal to 0.2:
- the ColorBox component should render another ColorBox inside itself (recursive components!)
- an opacity prop should be passed to the child
- the passed opacity prop should be reduced by 0.1
If the opacity value is less than 0.2:
- do not render another ColorBox (or else we would have infinite ColorBoxes rendering!)
- instead, the render method should return null

Hints on ColorBox

While the idea of recursive components may seem complicated at first, we know that React components can have child components rendered inside them. That's exactly what's happening here. The only difference is that the child component happens to be the same as the component that rendered it. There's no reason you can't do that in React, however...
Watch out for endless recursion! If your ColorBox component has no break condition to stop it from always rendering another ColorBox, your browser will likely become non-responsive. Pre-plan how you are going to render the ColorBox before trying to code it.
You may find that subtracting 0.1 from your opacity prop is leading to some strange precision errors (try logging the opacity prop with each render). This is due to limitations with JavaScript float (number) types.
In order to render based on a conditional, you can write JavaScript logic directly in the render() block. In the example below, the render() method is returning the evaluation of a ternary operator. If the expression this.props.value > 100 evaluates to be true, the entire ternary expression (and thus, the return value of render()) evaluates to be null, otherwise, render() will return some JSX.

import React, { Component } from "react";

export default class Example extends Component {
  render() {
    const newValue = this.props.value * 2;
    return this.props.value > 100 ? null : (
      <div>
        <Example value={newValue} />
      </div>
    );
  }
}

Resources

React Documentation: Components

Unable to run npm test

`// ♥ npm test

[email protected] test
mocha --timeout 5000 -w test/helpers.js test/*.js

Warning: Could not find any test files matching pattern: test/helpers.js

This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills
This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills
ReferenceError: React is not defined
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/src/Comment.js:1:23)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at loader (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions. [as .js] (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/test/index-test.js:10:1)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at loader (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions. [as .js] (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at /home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:250:27
at Array.forEach ()
at Mocha.loadFiles (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:247:14)
at Mocha.run (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:576:10)
at loadAndRun (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/bin/_mocha:594:22)
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/bin/_mocha:611:3)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12)
at node:internal/main/run_main_module:17:47
(node:1741) DeprecationWarning: "--compilers" will be removed in a future version of Mocha; see https://git.io/vdcSr for more info
(Use node --trace-deprecation ... to show where the warning was created)`

learn-co-curriculum / react-dynamic-components-lab Goto Github PK