Course info
Aug 28, 2015
2h 10m

A demonstration for building a basic Twitter Clone with React and Flux from Facebook on the frontend, and with Rails as the backend JSON API server. Covering The Flux pattern for Actions, Dispatcher, Stores, and React.js components for Views, and writing all JavaScript with ECMAScript2015 (ES6) syntax, and using Webpack and Babel to transpile JavaScript files and manage their dependencies.

About the author
About the author

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

More from the author
Node.js: Getting Started
3h 29m
Sep 11, 2018
Advanced React.js
3h 54m
Jul 21, 2017
React.js: Getting Started
1h 43m
Apr 12, 2017
More courses by Samer Buna
Section Introduction Transcripts
Section Introduction Transcripts

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.