Updating The React Side Of Project 11 In The Python Tech Degree

Jan. 22, 2019

Want to add additional options to the frontend of your Unit 11 app? Here's a quick guide.

This is only for those in the Treehouse Python Tech Degree. It won't make sense to you otherwise. It is pulled from a Slack message I made for the community.

For those in Unit-11, you're tasked with building the backend API of a fun dog adoption site that communicates with a React frontend. But what if we want to add more options to the frontend? Isn't this the Python Tech Degree? No fear, here's a quick introduction on how to manipulate the React side of your application.

My final repo for this project can be found here.

Setting Up

1) Add npm package manager to static using npm init.

2) Install babel-cli, babel, and the babel react preset.

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

3) Under scripts in your packages.json add what was provided in the README. "babel": "babel --presets @babel/preset-react jsx --watch --out-dir js". This will update your jsx to work with ES2015 javascript.

Adding to React

4) Go to jsx/preferences and add your field to data. So something like this:

data: {
age: new Set(['b','y','a','s']),
gender: new Set(['m','f']),
size: new Set(['s','m','l','xl']),
behavioralAssessment: new Set(['t','f'])
}

Add a new CheckBoxGroup component to match your data input and options. See the React docs.

<CheckboxGroup
title="Behavioral Assessment Required"
checkboxes={[
{label: "Yes", value: "t"},
{label: "No", value: "f"}
]}
data={this.state.data.behavioralAssessment}
onChange={this.handleCheckboxGroupDataChanged.bind(this, 'behavioral_assessment_required')}
atLeastOne={false}
/>

6) Update the save function. Note that this should match whatever you want to PUT.

save: function() {
var json = JSON.stringify({
age: Array.from(this.data.age).join(','),
gender: Array.from(this.data.gender).join(','),
size: Array.from(this.data.size).join(','),
behavioral_assessment_required: Array.from(this.data.behavioralAssessment).join(',')
});

7) Compile to js by running npm run babel, which calls what was written in your packages.json scripts.

Return to blog