#react.js #master-in-software-engineering

In this project you will learn how to create a React.js and how to apply all the important concepts.

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

See deployment for notes on how to deploy the project on a live system.

First, you will need to clone or fork the repository into your Github account:

$ git clone https://github.com/assembler-school/react-shopping-cart-forms.git

The repository is made up of several branches that include the contents of each section.

The branches follow a naming strategy like the following:

• main: includes the main contents and the instructions
• assembler-solution: includes the solution

In order to fetch all the remote branches in the repository, you can use the following command:

$ git fetch --all

$ git branch --all

Then, you can create a local branch based on a remote branch with the following command:

$ git checkout -b <new_branch_name> <remote_branch_name>

First, you will need to install the dependencies with: npm install.

Run the following command in your terminal after cloning the main repo:

$ npm install

The tests that validate your solution can be executed by running the following command:

$ npm run test

In the assembler-solution branch you can see an implementation of these tools if you'd like to use them.

In this pill we won't deploy the app.

• React.js
• @testing-library/react
• eslint
• prettier
• lint-staged
• husky

This is an overview of the main requirements of this project. The exact ones are found in the doc that the academic team will provide you.

• You must follow all the instructions of the project step-by-step
• You should always try to solve them by yourself before asking for help
• You should always help your team members and fellow students of the master so that you can all learn together and become better software developers and team members
• You must finish all the steps that are marked as Required
• You must use semantic HTML5 elements for all the markup of the application
• Once you are done, you can move on to the optional ones that are marked as Extra 💯

/src/components/NewProductForm.js

1. uncomment all the code in the App and NewProductForm components
2. in this step you will need to call the saveNewProduct(newProduct) method in the App component to store the new product in state.products.
   1. once the product is stored in state, you will also have to set the newProductFormOpen boolean to false so that the form is closed
3. complete the code of the NewProductForm component so that it has a state of:

this.state = {
  title: "",
  price: 0,
  img: "",
  shortDescription: "",
  longDescription: "",
  unitsInStock: 0,
  author: {
    firstName: "",
    lastName: "",
    email: "",
  },
  errors: {},
};

4. complete the code of all the event handlers of the component:

// handleSubmit() {}
// handleTitleInputChange() {}
// handlePriceInputChange() {}
// handleImgInputChange() {}
// handleShortDescriptionInputChange() {}
// handleLongDescriptionInputChange() {}
// handleUnitsInStockInputChange() {}
// handleAuthorFirstNameInputChange() {}
// handleAuthorLastNameInputChange() {}
// handleAuthorEmailInputChange() {}

5. define the missing form inputs using the <Input /> component:

• title:
  • type: text
  • handleChange={this.handleTitleInputChange}
• price:
  • type: number
  • handleChange={this.handlePriceInputChange}
• img:
  • type: text
  • handleChange={this.handleImgInputChange}
• shortDescription:
  • type: text
  • handleChange={this.handleShortDescriptionInputChange}
• longDescription:
  • type: text
  • handleChange={this.handleLongDescriptionInputChange}
• unitsInStock:
  • type: text
  • handleChange={this.handleUnitsInStockInputChange}
• author.firstName:
  • type: text
  • handleChange={this.handleAuthorFirstNameInputChange}
• author.lastName:
  • type: text
  • handleChange={this.handleAuthorLastNameInputChange}
• author.email:
  • type: text
  • handleChange={this.handleAuthorEmailInputChange}

6. complete the code of the handleSubmit(event) to store the new product
   1. capture the productData from the state of the component
   2. pass it to the addProductDetails(productData) method
   3. call saveNewProduct(newProduct) with the new product
      1. this method comes from the App component
      2. const { saveNewProduct } = this.props;

@TODO

To deliver this project you must follow the steps indicated in the document:

• Submitting a solution

• react-testing-library
• reactjs.org

This project is licensed under the MIT License - see the LICENSE file for details

Thanks goes to these wonderful people (emoji key):

Dani Lucaci 💻 📖 💡 🔧

This project follows the all-contributors specification. Contributions of any kind welcome!