For this assessment, extend the basic scaffold generated by create-react-app with a few trivial features. In doing so, you'll be demonstrating a basic understanding of the following:

• Kick-starting a React app using create-react-app
• Using props to pass immutable state to a component
• Combining components together to make more complex components

fork this repository into your own GitHub account then clone this repository to your local machine:

foo@bar:~ $ git clone [email protected]:github-username/hello-react
foo@bar:~ $ cd hello-react
foo@bar:~/hello-react $

Note github-username above. In other words, don't simply copy-paste the code above blindly into a terminal.

You'll undoubtedly notice that the only thing in this repository is this README.md file. In addition to getting you some extra practice forking from existing code rather than initializing new git repositories, we wanted to get you comfortable with relying on gathering necessary information from project README.md files, as it's common practice in the development world, especially as far as open source projects are concerned.

Note: Please see the rubric on Canvas for detailed break down on how this assessment is being graded. The information below is provided for your convenience.

All that is required to get these points is to initialize a react application in your new repository. The tricky part is that we want the root of the new React project to be the root of this repository. That is, the resulting directory structure should not look like this:

.
├── README.md
└── hello-react
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── public
    └── src

And instead, should look like this:

.
├── README.md
├── README.old.md
├── node_modules
├── package.json
├── package-lock.json
├── public
└── src

Note the flatter structure of the expected result. You can accomplish that by invoking create-react-app as follows:

foo@bar:~/hello-react $ create-react-app .

Note that this README.md file will be renamed README.old.md, as create-react-app generates its own README.md file, which is a create-react-app user guide. We encourage you to take a look at it in your free time, as it's jam-packed with all kinds of useful information

If your submission does not follow the above structure, but nevertheless functions, you'll receive partial credit. Not paying attention to detail will cost you ;-)!

For this step, you will be defining a Text component just above the App component in App.js. We typically like to define components in separate files and import them for use in more complex components. However, doing so would require an understanding of ES6 modules, which is out of scope for this particular assessment.

This component will have the following props:

• color: A string representing the color of text that appears in the component. Any valid css color should be accepted as a valid string
• value: This is the actual text to display. We'll learn later how to use the children prop to make this component more pleasant to use, but this will do for now.

Using the component should look something like this:

    <h1>Hello, <Text color="green" value="Kenzie" /></h1>

And produce a result similar to what you'd get if you used the following HTML:

<h1>Hello, <span style="color: green">Kenzie</span></h1>

All that remains after having defined your new component is to use it. App.js should end up looking something like this:

import React, { Component } from 'react';

// ... more imports here

class Text extends Component {

    // ... component implementation here
}

class App extends Component {
    render() {
        return (
            // ... add at least one instance of `<Text ... />` here
        );
    }
}

export default App;

Feel free to take liberties with whatever else appears in your application, but you must use the new Text component once and:

• Change the color to something other than green
• Replace the value with your name

Other than that, go wild!

• Using classes here is redundant, since these components are stateless. Try to implement both Text and App as functional components
• Using value for the <Text> component was unidiomatic. See if you can understand the children prop and make your usage of the Text component look like this instead: <Text color="green">Kenzie</Text>
• See if you can work out how to create a separate Text.jsx[1] file and use import it for use inside of App.js.

create-react-app includes instructions for publishing a React application on GitHub Pages. However, for this assessment, it's sufficient to submit the git URL for your repository. Again, we do not expect to see a GitHub Pages link for this assessment. In the future, we'll demonstrate how to do so and update expecations accordingly, in future projets.

[1] You can also name it Text.js. The benefit of giving components a .jsx extension is that it signals to other developers that what lies within is a react component with JSX syntax. Also, some text editors will provide better syntax highlighting with the .jsx extension.