For this assignment, your task is to build a React JSX user interface that cheers your favorite city's sports ball team.
NOTE: Just use a couple of your favorite teams. For the rest just display 'never heard of it'. No need to query an external API to find the team associated with a city. You can store the image in your code base or link to an external image.
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.