Most of Accelebrate's courses are taught privately online or in-person for teams of 3 or more, and can be customized to your group’s goals. To receive a customized proposal and price quote, please visit https://www.accelebrate.com/contact/ or email [email protected]. In addition, we offer live, online open enrollment training for individuals.
https://www.t4d.io/accelebrate-react-redux-with-typescript-training-09282020
The instructor will distribute additional private links during class for downloading courseware, registering for class completion badges, etc...
All code in this repository is distributed under the MIT license.
The following instructions will help students pull down the instructor's version to resume class at the same point of the instructor.
- Clone this repository to a new folder. Do not attempt to copy these files over your version or another version which you have cloned. Replace
FOLDER_NAME
with the name of a new folder which will be created when the content is cloned.
git clone https://github.com/t4d-classes/react-redux-typescript_09282020.git FOLDER_NAME
- Change into the folder you cloned into.
cd FOLDER_NAME
- Change into the
demo-app
folder.
cd demo-app
- Run the following command to install the NPM packages.
npm install
- To start the application, run the following command.
npm start
- Open the editor of your choice and edit the files.
To configure the REST API, two packages will need to installed into the project created by the Create React App generator.
- To install those packages, run the following command from within the root folder of the project:
npm install -D json-server npm-run-all
- Next, the
package.json
needs to be updated to easily run the REST API provides by the JSON Server. Here is thescripts
configuration which can be copied and pasted for the REST API. When asked by the instructor, replace thescripts
section of thepackage.json
file in thedemo-app
project with thescripts
section below.
"scripts": {
"start": "run-p web rest",
"web": "react-scripts start",
"rest": "json-server --port 3060 ./db.json",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
- Finally, the REST API data file needs to be created. The data file should be named
db.json
and placed in the project root folder.
VERY IMPORTANT! The db.json
file will be placed in the demo-app
folder, the same folder as the package.json
file. The db.json
file should NOT be placed in the src
folder.
- The JSON below should be copied and pasted into the file.
{
"colors": [
{ "id": 1, "name": "red", "hexcode": "#ff0000" },
{ "id": 2, "name": "green", "hexcode": "#00ff00" },
{ "id": 3, "name": "blue", "hexcode": "#0000ff" }
],
"cars": [
{
"id": 1,
"make": "Ford",
"model": "Fusion Hybrid",
"year": 2019,
"color": "blue",
"price": 45000
},
{
"id": 2,
"make": "Tesla",
"model": "S",
"year": 2018,
"color": "red",
"price": 100000
}
]
}
- To verify the REST API is working, run the
npm start
command and browse the following URL: http://localhost:3060/cars.