开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

LAB | Thinking in React

Introduction

By now you probably know that in React everything is a component. A React app is built out of components, usually a lot of them. When used, components are usually nested inside of other components.

To refresh our memory, a component is a reusable piece of code, which defines how certain features should look and behave in the UI.

Now one more time, we will be thinking and acting in that direction. Maybe in the past days we didn't see how important is to plan our apps prior to building them. In this exercise, we will emphasize this approach. We’ll walk you through the thinking process of building an app displaying a searchable table of products.

Setup

• Fork this repo

• Clone this repo

  $ cd lab-thinking-in-react
  $ npm install
  $ npm start

Submission

• Upon completion, run the following commands:

  git add .
  git commit -m "done"
  git push origin master
  

• Create a Pull Request so that your TAs can review your work.

Getting Started

Clean the App.js component so that it has the following structure:

// src/App.js
import "./App.css";

function App() {
  return <div className="App"></div>;
}
export default App;

Instructions

Iteration 0 | Introduction

In the src/ folder, you will find the data.json file containing the data representing products of a random store.

Each product object has the following fields: category, price, inStock and name, of which inStock is type boolean (this information will be valuable soon). Example:

{
    "category": "Sporting Goods",
    "price": "$49.99",
    "inStock": true,
    "name": "Football"
}

You will be dealing with multiple components that depend on each other. To properly reflect the changes in all the components, we'll store the state in the closest common parent component (remember lift the state up).

You will be dealing with multiple components that depend on each other. To ensure that components can interact with each other, we'll store the state in the closest common parent component (remember lifting the state up).

And remember, this is just an exercise and a part of the learning process. No one expects you to do it perfectly. Think it through, ask questions, be curious and explore all possibilities. Let's do this!