Refactor your code to use components.
- If you're not using Google Chrome, it's time to use it!
- Download the React Dev Tools extension.
- Go to your website (you might need to quit and open it again), open
Inspect
and make sure two tabs are addedcomponents
andprofile
.
- Create a
components
folder insidesrc
. - Create a new file and name it
Home.js
. - Create a function that represents your component.
- Move the relevant JSX (website title, description and shop image) and all relevant code from
App.js
into the new component. - Export your component and import it in
App.js
. - Use the new component in
App.js
. - Check your website to make sure your code is correct, everything should look exactly the same.
- Open the React Dev Tools and click on
component
. Your new componentHome
should be underApp
.
- Create a new file and name it according to your shop's theme, make sure that the name starts with a capital letter. We'll call ours
ProductList
. - Create a function that represents your component and export it at the end of the file.
- Move the relevant JSX and all relevant code from
App.js
into the new component. - Import your data file.
- Import your component in
App.js
and render it. - Check your website to make sure your code is correct, everything should look exactly the same.
- Open the React Dev Tools and click on
component
. Your new component should be underApp
.
- Create a new file for your product item component and name it according to your shop's theme, make sure that the name starts with a capital letter. We'll call ours
ProductItem
. - Follow the steps above to create a component.
- Move the relevant JSX from the list component to the new component.
- In your
ProductList
component, import yourProductItem
component. - In the
map
method, render theProductItem
component and pass your product as a prop. - In your
ProductItem
component, passprops
as your function's argument. - In your
products.js
file, add anid
field to all your products. - Pass a
key
as a prop to theProductItem
component. The value of the key should be the product's ID. - Check your website to make sure your code is correct, everything should look exactly the same.
- Open the React Dev Tools and click on
component
. Your new component should be underApp
.