Front-End Libraries Logistical question

1

Hello,

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!

-Brian

code:

// 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, {
    Component
} from 'react';
import logo from './logo.svg';
import './App.css';

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

class App extends Component {

    constructor(props){
        super(props);
        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.");
                console.log(response);
                quotes = Object.assign({},response);
                this.setState({
                    loaded: true,
                    numQuotes: quotes.data.quotes.length,
                    quotes: quotes,
                    currentQuoteIndex: getRandomInt(quotes.data.quotes.length),
                });
            })
            .catch(function(error) {
                // handle error
                console.log(error);
                alert('Error: '+ error);
            })
            .then(function() {
                // always executed
            });
    }
    onClick() {
        var thisQuoteIndex = this.state.currentQuoteIndex;
        this.setState({
            currentQuoteIndex:getRandomInt(quotes.data.quotes.length),
        });
    }
    render() {
        console.log("This is in the Render."); 
        console.log(this.state.quotes);
        if(this.state.loaded){
            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.quotes.data.quotes[this.state.currentQuoteIndex])}</p>
                  <p className="quote-author">-- {extractAuthor(this.state.quotes.data.quotes[this.state.currentQuoteIndex])}</p>
                  </div>
                <QuoteButton className="App-link" onClick={this.onClick}/>
                </div>
            );
        }
        else {
            return (<h1>loading</h1>);
        }
    }
}

class QuoteButton extends Component {
    constructor(props) {
        super(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");
    console.log(quote.quote);
    return quote.quote;
}

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

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:

2

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.

3

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