Samer Buna is a polyglot coder with years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer worked in several industries including real estate, government, education, and publications
The Basics of Rails and React.js In this module we'll get ourselves ready with the tools we need and we will do some basics of React and Rails. The tools I'll show you are: iTerm 2, the Chrome Canary browser, the Atom editor, RVM, the Ruby Version Manager, which is what we'll use to install the latest Ruby. And finally, the Postgres database. I'll be using Rails 4. 2. 4 for this course. This is the latest version of Rails as of now. Although, future versions will probably work OK as well. We'll see how to use some of the Rails commands, how to create a database, run the server, and add an action to be displayed on the root of our app. For React, the current version of the library is 0. 14. 0. We will explore how to use it on Rails using the react-rails gem. And we'll write our first component, and see how we can write JSX, natively, without any configuration. And I'll also show you how to pre-render your components on the server.
Building the Mockups In this module, we'll create mockups for a Tweet list and a form to add a new Tweet. First, we're going to switch our module but link to Webpack, which we will install using Node package manager and npm. Webpack is a module bundler that's going to allow us to put our whole application into a file that has an isolated scope. We'll also see some of Webpack options. Then we'll build HTML markup for a Tweet form and a Tweets list, and we're going to use the MaterializeCSS framework to style those, and we'll get both of these components working the react way using some mockup data.
Rails API and Flux We've had our fun with mocking. This is the module where we start working with an actual database. API endpoints calls and a flux flow for our front end. We'll start with a user resource. And enabling the users to sign up and log in to the system, So that we can put a name on those tweets. We're going to use the Devise Ruby library to quickly get the authentication part done. We'll also give the user the ability to update their name in a profile page. Once we have users in the system, we'll work on the tweet resource. We'll write API's to read a list of tweets and create a new tweet. Then we'll consume these two API endpoints, first with React itself directly and then with flux. We'll see how to work with actions, the dispatcher, stores and views within the Flux loop.
The Follow Feature The last feature in our minimum viable product would be to follow other users and have a default stream of tweets only from the users you follow. So we'll start with a Follower resource to hold data on who is following who. Since this is going to be a different page in our app, we'll do some front-end routing here. We're going to use the react-router library for this and in our new page, we'll show a list of users the current user can follow. Then we'll implement the Follow button and once we have that ready, we'll change the stream on the main page to show tweets only from the users you follow.