Git Product home page Git Product logo

react-static-components-lab's Introduction

React Static Components

Objectives

  • Practice rendering static children components
  • Have some fun with the rendered components in the browser

Instructions

In this lab, we will be rendering a few children components in our top-most component, App. All of our work will be done in src/App.js, the rest of the components/source files shouldn't need any alterations.

Begin with npm install. Examine what is rendering in the browser with npm start. You should see an error we need to fix!

Once we properly render the other three components: CatComponent, GraceHopperQuoteComponent, and MouseComponent in App, we will have the flag of the Federal Republic of Germany, the birthplace of the first fully automatic, programmable, digital computer!

Admiral Grace Hopper, on the other hand, was an American computer scientist and United States Navy admiral. She was a pioneer of computer programming who popularized the idea of machine-independent programming languages, which led to the development of COBOL.

Deliverables

  • Two components have not been properly imported in src/App.js. Identify and debug the issue. The stack trace when running npm test should point you in the right direction!

  • Once you have the first two components importing correctly, import and render a third component, MouseComponent. In total, App needs to render three children components:

    1. CatComponent
    2. GraceHopperQuoteComponent
    3. MouseComponent
  • Once the tests are passing, make sure to check out the fun animation in the browser by running npm start!

react-static-components-lab's People

Contributors

danielseehausen avatar dependabot[bot] avatar ihollander avatar lizbur10 avatar maxwellbenton avatar rrcobb avatar sylwiavargas avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-static-components-lab's Issues

Webpack error for version 3.11 and 4.41

// ♥ npm start

[email protected] start /Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000
react-scripts start

/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/react-dev-utils/WebpackDevServerUtils.js:167
compiler.hooks.done.tap('done', async stats => {
^^^^^

SyntaxError: missing ) after argument list
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/react-scripts/scripts/start.js:45:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kenwang90/.npm/_logs/2019-10-13T20_32_06_045Z-debug.log
[16:32:06] (master) react-static-components-lab-online-web-sp-000
// ♥ learn
/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/transformation/file/index.js:558
throw err;
^

SyntaxError: /Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/src/CatComponent.js: Only one default export allowed per module. (12:0)
10 | }
11 | }

12 | export default CatComponent
| ^
at Parser.pp$5.raise (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp$1.raiseDuplicateExportError (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:2819:8)
at Parser.pp$1.checkDuplicateExports (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:2813:10)
at Parser.pp$1.checkExport (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:2712:12)
at Parser.pp$1.parseExport (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:2649:10)
at Parser.parseExport (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:6000:20)
at Parser.pp$1.parseStatement (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:1884:74)
at Parser.parseStatement (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:5910:22)
at Parser.pp$1.parseBlockBody (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:1778:8)
at Parser.parse (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:1673:17)
at parse (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babylon/lib/index.js:7305:37)
at File.parse (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/transformation/file/index.js:485:15)
at File.parseCode (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/transformation/file/index.js:570:20)
at /Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/transformation/pipeline.js:49:12
at File.wrap (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/transformation/file/index.js:532:16)
at Pipeline.transform (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
at Object.transformFileSync (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-core/lib/api/node.js:152:10)
at compile (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:118:20)
at loader (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/src/App.js:2:2)
at Module._compile (module.js:570:32)
at loader (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/test/index-test.js:4:1)
at Module._compile (module.js:570:32)
at loader (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at /Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/mocha/lib/mocha.js:250:27
at Array.forEach (native)
at Mocha.loadFiles (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/mocha/lib/mocha.js:247:14)
at Mocha.run (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/mocha/lib/mocha.js:576:10)
at Object. (/Users/kenwang90/Flatiron/Mod4_React/react-static-components-lab-online-web-sp-000/node_modules/mocha/bin/_mocha:637:18)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:504:3

First Deliverable is Unclear

The first deliverable is:
Two components have not been properly imported in src/App.js. Identify and debug the issue (hint: the stack trace when running npm test should point you in the right direction!)

I completed this lab and passed all tests without making any changes to the component imports. What is this deliverable asking?

Incorrect component in README

The README says:

In total, App needs to render three children components:

  1. CatComponent
  2. GraceHopperQuoteComponent
  3. MouseComponent

index-test.js has a test that says:
expect(wrapper.text()).to.include('');
});

Either test should be updated to replace EinsteinQuoteComponent with GraceHopperQuoteComponent, or README and filenames should be changed to reflect GraceHopperQuoteComponent

Issue with lesson instructions

Thanks for raising this issue! Future learners thank you for your diligence. In
order to help the curriculum team address the problem, please use this template
to submit your feedback. We'll work on addressing the issue as soon as we can.

Please fill out as much of the information below as you can (it's ok if you
don't fill out every section). The more context we have, the easier it will be
to fix your issue!

Note: you should only raise issues related to the contents of this lesson.
If you have questions about your code or need help troubleshooting, reach out to
an instructor/your peers.


Link to Canvas

https://learning.flatironschool.com/courses/2073/assignments/68987?module_item_id=134258

What should be changed?

This line should be deleted: All of our work will be done in src/App.js, the rest of the components/source files shouldn't need any alterations.

Additional context

I spent hours trying to debug the issue in app.js and after asking AAQ, I realized I needed to alter the grace hopper file. Super frustrating because the lesson said to only alter app.js.

Option flag in mocha.opts deprecated

Just a heads up! When you run learn in this lab you get a notice that says:

(node:6030) DeprecationWarning: "--compilers" will be removed in a future version of Mocha; see https://git.io/vdcSr for more info

Found in mocha.opts, line 2: --compilers js:babel-register

Literally just a heads-up in case it will eventually break the lab.

the tests asks for something its not described in the lab

it never mentions anything about an EinsteinQuoteComponent that is not defined but in this lab it never mentions that quote it mentions another quote. how dumb is that? we are failing a test that does not do anything. maybe look at the code your implementing since you are teaching us how to code?? or are you teaching us how to fail?

First deliverable incorrect

The first deliverable says that one of the components is not being imported properly but that's not true. Just adding the three components makes all tests pass.

Consider stopping the usage of gifs

Hello, I know the gifs are meant to lighten the mood & help us learn better. However a lot of us in my cohort have said that they are really really distracting. Would you please consider either not using gifs or enabling a way to pause them/hide them? As a bonus this would also help people suffering from epilepsy.

Thank you
Arti

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.