kata1.md

React App Kata 1

Code for Kata 1 is available in the app1 folder.

Learning aims

The idea here is to get an introduction into React applications and learn the basic concepts.

• Learn basics of React
• How to create React components
• How to render multiple components
• How to import components
• Learn about props

Task

Write the JavaScript code to:

1. Show a list of Redgate products in App.js.
   • Import .\data.js to do this
   • Rendering Multiple Components
2. Check the console.log and fix any warning you might have.
3. In App.js create a <Products /> component to extract the responsibility into a separate component.
4. Pass the array of products as props into the Products component
5. Move the <Products /> component into a Products.js and call it from App.js
6. Create a <Product /> component inside Products.js file and use it in the <Products /> component.
7. Some of the products are free others are new. Be sure to show this information in the product list.
8. Add some styles to your app, add your css classes to App.css and Products.css