For this assignment, your task is to build a React JSX user interface that cheers your favorite city's sports ball team. To get started, navigate to your locally cloned react-sports-ball repository.

cd path/to/react-sports-ball

Use the following guide to do this exercise:

https://facebook.github.io/react/docs/thinking-in-react.html

To watch the project for changes and launch an HTTP server, start the webpack server.

NOTE: Press Ctrl + C to quit the server.

npm Install
npm run start

Then, open the application in your default browser.

open http://localhost:3000/

Once everything is working, augment the user interface with the following React JSX.

• Anchor tags
• Image tags
• List tags
• CSS classes
• Inline CSS styles
• Attribute expressions
• Child expressions

Here's an example of the sports ball user interface.

Using your preferred ESLint rules, lint your project with the npm run lint . command.

If you haven't already, inspect and debug your solution with the React Developer Tools. Make sure you understand the user interface's component hierarchy and its state.

Then, visit Codecademy's landing page and, using the React Developer Tools, see what changes can you make to this user interface's props and state values that'll cause the browser window to render a different DOM hierarchy.

Then, log into your Facebook account, if you have one, and see if you can figure out which component hierarchies are being reused on the timeline.

Finally, pick another React application and see what else you can uncover with your new x-ray vision.

Once you're satisfied, find a classmate and see if that person would like some help.