- Enter Cerebro: a cross platform extensible electron app that provides the perfect tools to build something small but useful with React.
- Now we can do a bit of setup:
Our plugin, cerebro-weather, will allow users to search for a city and then show a concise preview of the weather conditions of that city if it exists.
- Create an file with the following:
This function makes an initial request to the API to search for a given city.
- We convert this response to JSON and retrieve the weather details for the first location with the location’s , which is its unique identifier and the only actual way to retrieve weather data from the API.
- This gets the weather data with our API function, and displays the first consolidated weather report.
Guide developers that newly learned React to build a small but useful app with Cerebro
Originally posted here.
React is a fantastic piece of engineering that has allowed developers to implement declarative user interfaces that are easy to work with and reason about. It can be daunting on initial encounter (JSX), but the API surface is small and the concepts are few enough to allow developers get productive quickly. This series will primarily be a walkthrough of building small useful apps with React (what did you expect?) and varied technologies while touching on useful concepts along the way. Strap in.
Often, tutorials start off with clichés like a Todo or Counter; these are useful for learning basic concepts, but are inadequate for our needs. We need something more challenging. Enter Cerebro: a cross platform extensible electron app that provides the perfect tools to build something small but useful with React. It has many plugins, some useful, and some not, but we are hopefully going to be contributing to the former category by creating a simple weather plugin.
Now we can do a bit of setup:
. If everything has been setup correctly, when you type in ‘london’ in Cerebro, you should see this:
file and add the following to it:
to display the new preview:
file with the following:
This gets the weather data with our API function, and displays the first consolidated weather report. Eventually, we will display all the available weather reports. This is what we should have now:
object, we will filter out just the data we need; this is a recurring theme when consuming external REST APIs.
is, it is a CSS Module one of the many ways of styling in React. Okay, detour over. Now we have a much better looking app.
We can now focus on rendering the remaining weather reports. For brevity, I will only include the changes.
array and choose the entire thing instead. In addition to displaying the extra reports, the function now formats decimal numbers to only two decimal places. This gives us:
Pretty good! We have done a lot, but as always with software, it can be improved further. Showing the city and country would be a start, along with time zone, but I will leave those for the reader to implement. Suggestions, feedback and PRs are welcome at the github repo. Thanks for reading.