- Fork this repo
- Clone the forked repository
cd
to the directory where you cloned itnpm install
to install dependenciesnpm start
to run the website onlocalhost:3000
npm run test
to run tests
Note: Remember to
git add
,git commit
andgit push
regularly
- When finished, commit and push your work.
- Make a pull request on github.
- Submit the link to your pull request on Canvas.
In this lab, you will refactor some React function components so that they are React class components.
Run the app using npm start
. Go to localhost:3000
in your browser and you will see a very basic social media feed.
Take a look at the components in the src
folder. You should see .js
, .css
, and .test.js
files for these components:Ad
, App
, ContactList
, Feed
, and Post
.
Run the tests with npm test
. You will notice that each test fails for the same assertion: <Component /> has been refactored as a class component.
You can fix that by refactoring each component as a class component!
- Change the code in the existing component file (e.g.
App.js
,Post.js
). Do not create a new file or rename the file. - The appearance of the app in your browser should not change.
- All of the tests should pass.
- Don't forget to include the
data-testid
attribute in each component's top level<div>
. The tests need this!
Add an Profile
section to the social media app.
- It should be as a separate
<Profile />
component. - It should be a React class component.
- It should include a person's photo, name, and short bio.
- Render the
<Profile />
component from the<App />
component. - The
<Profile />
should appear to the right of the<ContactList />
Refactor the profile page you made in the React Introduction Lab so that all of the components are class components.
- All components should be React class components (not function components)
- Your lab should still look the same way it did before in the web browser.
- All of the unit tests should pass on your computer.
- All of the unit tests should still pass