But, as I was reading doing more research into this topic, I found out that Angular 1.4 was going to be eclipsed in the near future by Angular 2 – which kind of makes learning Angular 1.4 rather unappealing. So, React it was.
Here, I am going to show you a rather simple app I built with React and RefluxJS. The idea behind the app is rather basic – we’re going to find out the weather of a city given the zipcode and country.
If you’re interested in how it looks like, check it out here.
The app is broken down into a few small components.
- Form component – zipcode and country fields
- Preview component – weather data
- Both of the components above will be encompassed by the weather app.
So, following the Flux pattern, I needed to define stores and actions for my app. I only had a single store, that is the WeatherStore that stored all the weather data pertinent to my application.
The first interesting thing to note here is the code for the WeatherStore. I have added a lot of comments to each method for a better idea on what is being done.
The next code we’re going to look at is WeatherActions. You might be surprised at the length of this file, but it’s very succinct.
Now, on to the React portion. This is the first component we’re going to be building. This component houses the preview and the form. If you’re someone who is used to separating the presentation layer from the logic, this might seem a little hackish. But as usual, give sometime for new ideas to simmer and you might just see how this could make development easier.
The next portion is the form the user will be using to enter the zipcode and country. This data will be passed on to the WeatherStore.
In this portion, we will be using the data received from WeatherStore to show a preview of the weather.
This final one shows how the code will be rendered to the page.