Get started with this tutorial!
Project: Going React
Project: Going React
Apart from using React to render views, we will also use D3 to render a chart, Twitter Bootstrap to make our app look awesome and Meteor to do all the heavy lifting in setting up a new web application and a MongoDB database.
At the end of this tutorial, you will have a very simple web app that can do a lot of stuff! We will track how many hours we spent coding on certain week days by having a form where we can enter the hours for a given date. Then we'll store that in the database and retrieve the data for our D3 chart. All of this is going to use React to render our views.
Meteor is a cohesive development platform, a collection of libraries and packages that are bound together in a tidy way to make web development easier. It builds on ideas from previous frameworks and libraries to offer an easy way to start a prototype app, but it gives you the tools and flexibility to build a full fledged production app. Their documentation can be found here.
React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native.
React components implement a mandatory render() method that takes input data and returns what to display. It prefers to use an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props. JSX is optional and not required to use React.
You can learn more about it here by creating a ToDo application but see if you can follow aling with this tutorial first.!
React vs. other frameworks
So here is the thing, React is NOT a framework! That's kind of the crux of the matter. It's odd to compare React to Angular or Backbone, as the latter two are frameworks built on the MVC architecture ready to build fully-fledged web applications, while React can be seen as the V in MVC. It can be used in the Angular or Backbone framework as the replacement of their views rather than its replacement.
However! React was designed with the Flux architecture in mind, a completely different (reactive) architecture to MVC. Check out the documentation on the Flux architecture if you want to learn more about it.
A more advanced resource on React is this starter kit to get you started on fully-fledged web applications using the Flux architecture and a node server.
Heroku is a very nice PaaS provider which makes it dead easy to host your Application (it doesn’t matter if it’s a Node, Ruby, Python or other application) in the cloud. You can scale your application in a matter of seconds and add addons (such as MongoDB Provider, Mailgun, …) to your application. You can easily deploy your newest version of your application with a simple git push command which is pretty neat!
As React is a component-based framework, it makes sense to spend a little time on the design of the application to save time later. We want our layout to have two columns later. The left column will have a form to insert data and a list of all data previously inserted where one will be able to remove it by clicking. The right column will render a bar chart. Let’s breakdown our app into React components:
The App component (red box) encompasses all components and will be responsible for gathering data from the MongoDB and passing it accordingly.
The pink rectangle is the HourForm component. It’s a basic form where we will add the number of hours and the day that event happened.
The orange rectangle is the HourList component, which encapsulates the data and renders a HourItem component (in light blue), formatting the data nicely and allowing us to click on any record to delete it.
Finally, the green rectangle is our star – the HourChart component. It will receive data from Meteor and render this awesome D3 chart. This component will be designed to be reusable, so the only thing we will need to do is pass the correspondent data into it and it will be able to render the chart (with a horizontal label and a top label informing quantity).
So now that we know the design of our components, let's get started on building our web app!
If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.