#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 instructionsassembler-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
- uncomment all the code in the
App
andNewProductForm
components - in this step you will need to call the
saveNewProduct(newProduct)
method in theApp
component to store the new product instate.products
.- once the product is stored in state, you will also have to set the
newProductFormOpen
boolean to false so that the form is closed
- once the product is stored in state, you will also have to set the
- 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: {},
};
- complete the code of all the event handlers of the component:
// handleSubmit() {}
// handleTitleInputChange() {}
// handlePriceInputChange() {}
// handleImgInputChange() {}
// handleShortDescriptionInputChange() {}
// handleLongDescriptionInputChange() {}
// handleUnitsInStockInputChange() {}
// handleAuthorFirstNameInputChange() {}
// handleAuthorLastNameInputChange() {}
// handleAuthorEmailInputChange() {}
- define the missing form inputs using the
<Input />
component:
title
:- type:
text
handleChange={this.handleTitleInputChange}
- type:
price
:- type:
number
handleChange={this.handlePriceInputChange}
- type:
img
:- type:
text
handleChange={this.handleImgInputChange}
- type:
shortDescription
:- type:
text
handleChange={this.handleShortDescriptionInputChange}
- type:
longDescription
:- type:
text
handleChange={this.handleLongDescriptionInputChange}
- type:
unitsInStock
:- type:
text
handleChange={this.handleUnitsInStockInputChange}
- type:
author.firstName
:- type:
text
handleChange={this.handleAuthorFirstNameInputChange}
- type:
author.lastName
:- type:
text
handleChange={this.handleAuthorLastNameInputChange}
- type:
author.email
:- type:
text
handleChange={this.handleAuthorEmailInputChange}
- type:
- complete the code of the
handleSubmit(event)
to store the new product- capture the
productData
from the state of the component - pass it to the
addProductDetails(productData)
method - call
saveNewProduct(newProduct)
with the new product- this method comes from the
App
component const { saveNewProduct } = this.props;
- this method comes from the
- capture the
@TODO
To deliver this project you must follow the steps indicated in the document:
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!