Web_Designer_Issue_262_2017

Developer tutorials
Create a dashboard app with React
Using ‘create-react-app’
Getting development environments
set up can be tricky to set up for
every project. There are many
React ‘boilerplates’ that have all the
necessary tools in place to start
your next project from.
Facebook has released
‘create-react-app’, which
will instead generate a new
project based on the latest best
practices and includes Webpack,
Babel and the testing tool Jest from
the outset.
The advantage over traditional
boilerplate projects is that it
equates to a single dependency,
which keeps things simple while a
project is young. Once a more
complicated setup is required,
running the ‘eject’ command splits
things out with helpful comments
to know what each piece does.
To find out more, check out the
GitHub project at: github.com/
facebookincubator/create-react-app
10. Convert to NumberWidget
At the moment, there is quite a lot of code used to show
something that will not change across widgets. We can
make a special component to encapsulate all of it. That
way we only need to import NumberWidget.
Replace the Widget and NumberDisplay imports at the
top of App.js with NumberWidget. Make sure to also
replace them in the render method.
import NumberWidget from
‘../components/NumberWidget’;
[…]
11. Show a progress bar
Inside NumberWidget.js there are a couple of methods
that help us to render things under certain conditions. We
can call these in the render method and they can return
what we need to output.
Inside showProgress() add some code that works out if
we should render a progress bar. We need a minimum,
maximum and a value at the very least.
if (this.props.min !== undefined &&
this.props.max !== undefined &&
this.props.value !== undefined) {
return ;
}
return null;
12. Add a Container component
Manually adding data isn’t going to be much help to us.
We can add a container around NumberWidget that will
supply it with fresh data from our server. Inside App.js,
replace what we added in step 10 with the
NumberWidgetContainer and pass it a URL to load
data from.
import NumberWidgetContainer from
../components/NumberWidgetContainer’;
[…]
13. Fetch data on load
Over its lifetime, a React component will call many
diferent methods depending on what point it’s at. The
componentDidMount method will be called when a
component first renders, which makes it an ideal place to
fetch data.
Add the following to componentDidMount in
NumberWidgetContainer.js. This will call the fetchData
method now and every minute after that. We will fix the
TypeError in the next step.
this.getData().then(_ => {
this.interval =
setInterval(this.getData, 60000);
});
14. Update the state
Each component can have its own internal state, which
holds information about itself at any given moment. We
can pass this state as props for other components to use.
Make the request to the supplied ‘href’ prop URL using
the AJAX module Axios and update the state with the
values supplied. These will automatically be passed to
NumberWidget, which will then update itself.
this.setState({ loading: true });
return axios.get(this.props.href)
.then(resp => {
this.setState({
loading: false,
min: resp.data.min,
max: resp.data.max,
value: resp.data.value
});
})
15. Add in a List Widget
The groundwork we have done for NumberWidget can
be applied to other types of widgets too.
ListWidgetContainer can be passed the same props
as NumberWidgetContainer, but will render a list of
values instead.
Import ListWidgetContainer alongside the rest, and
place the component just above
NumberWidgetContainer in the render method.
import NumberWidgetContainer from
‘../components/NumberWidgetContainer’;
[…]
16. Display list items
With the data supplied in the sortedItems variable as an
array, we can iterate over the results and render a
separate component for each.
To do this we can use the ‘map’ method on the array
prototype. This creates a new array of components that
React will render.
Inside the ListDisplay component in showWidget, add
the map function to create new ListItems.
{sortedItems.map((item, index) =>
)}
89