Refactor functional components to be class components, in order to get a bit of practice.
-
Fork and clone this repository.
-
Navigate to the cloned repository's directory on your command line. Then, run the following command:
npm install
This will install the libraries needed to run the tests.
-
Open up the repository in VSCode. Follow the instructions below to complete the Lab.
To run the tests, you can run the following command from the command line. You will need to be in the root directory of your local directory.
npm test
This will run Jest tests.
If you'd like to have your tests reload as you are working on your code, you can run the following command.
npm run watch
Follow the on-screen prompts to run some or all of the tests.
In this lab, you will refactor some functional 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 a 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.
- Your lab should still look the same way it did before in the web browser.
- All of the unit tests should still pass.