Front-End Libraries Logistical question


I’m just starting the Front-end Libraries projects & I wanted to get some practice using React so I used ‘Create React App’ as a base.

The structure of the create-react-app project is that there’s an index.js which renders an App component. All of my code is in App.js

My Questions:

How would I submit this project?
How could I include the test scrips in my app so that I can see how I’m progressing?
Should I go about this a different way?

Thanks for any help you can provide!



// This is my App.js Full project at my github profile. my username is btb63, same as here. 
// I can't post a link to it.  
import React, {
} from 'react';
import logo from './logo.svg';
import './App.css';

const axios = require('axios');
let quotes;

class App extends Component {

        this.state = ({
            loaded: false,
            quotes: {},
            numQuotes: 0,
            currentQuoteIndex: -1,
        this.onClick = this.onClick.bind(this);
    // Pull the quotes json from the example
    componentDidMount() {
        axios.get('This is where a link to the .json would go if the forum would let me post it.')
            .then((response)  => {
                // handle success

                // I changed to arrow notation because
                // apparently 'this' is automatically
                // bound when you use arrow notation.
                // I don't know the proper way to do this
                // using the 'function (response)' notation'
                console.log("This is in the didMount function.");
                quotes = Object.assign({},response);
                    loaded: true,
                    quotes: quotes,
                    currentQuoteIndex: getRandomInt(,
            .catch(function(error) {
                // handle error
                alert('Error: '+ error);
            .then(function() {
                // always executed
    onClick() {
        var thisQuoteIndex = this.state.currentQuoteIndex;
    render() {
        console.log("This is in the Render."); 
            return (
                <div className="App App-header" id="quote-box">
                {/* <h1>Total Number of Quotes: {this.state.numQuotes}</h1> */}
                {/*   <h1>Current Quote Index: {this.state.currentQuoteIndex}</h1> */}
                  <div className="Quote">
                  <p className="quote-body">{extractQuote([this.state.currentQuoteIndex])}</p>
                  <p className="quote-author">-- {extractAuthor([this.state.currentQuoteIndex])}</p>
                <QuoteButton className="App-link" onClick={this.onClick}/>
        else {
            return (<h1>loading</h1>);

class QuoteButton extends Component {
    constructor(props) {
    render() {
        return (
            <button className="quote-button" onClick={this.props.onClick}>Give me another!</button>

function getRandomInt(max) {
    return Math.floor(Math.random() * Math.floor(max));

  I'm not sure I actually need these functions
  but I'm just going to keep them in for now.
function extractQuote(quote){
    console.log("w/in quote fxn");
    return quote.quote;

function extractAuthor(quote){
    console.log("w/in author fxn");

export default App;

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:66.0) Gecko/20100101 Firefox/66.0.

Link to the challenge:

You can either host the project on your own server, or copy the relevant code from App.js into codePen (if all in a single file), or codeSandbox (if you have a file hierarchy). Basically, the project needs to be live on the web and public-facing so that it can be checked.

Thanks for your quick response!

I’ll host it on my own server for submission purposes.

I found a solution for testing in another post and I’ll mention it in case anyone comes across this post. (can’t post links)

The post is titled ’ How to include the FCC test CDN ( Bundle.js ) in my local react project’
and it mentions the package ‘npm-fcctest’

1 Like