RiotJS Blog App Tutorial
Length: 18 minutes
This is a tutorial on Riot.js a React-like micro library. In this tutorial I walk you through creating a simple blog app where a user can click on post titles to display individual blog posts. It focuses on Riot.mount and Riot.route
This tutorial assumes you already have a basic knowledge of HTML, CSS, and some JavaScript. If you do not already know HTML and CSS, first take my course on Building Responsive Websites as a primer.
Setup:
Download and install a code editor (if you do not already have one) atom.io: https://atom.io/
Download and install a command line interface (if you do not already have one):
Mac: use Terminal (built in) or iTerm2: https://www.iterm2.com/
Windows: use Git BASH: https://git-for-windows.github.io/Install Node & NPM (if you don't already have it).
Mac: http://blog.teamtreehouse.com/install-node-js-npm-mac
Windows: http://blog.teamtreehouse.com/install-node-js-npm-windowsInstall Node Live Server package:
In your command line interface (CLI) type:npm install -g live-serverFollow the tutorial video above. Get the starting code referenced in the video from here:
https://gist.github.com/jongrover/94355826575fa95e1e5b48aed72b6068 or from the code blocks following below:
app.js
var posts = [{ title: "How Crocodiles Cross Oceans", article: "How did the world's largest living reptile, the saltwater crocodile, reach so many South Pacific islands separated by huge stretches of water despite being a poor swimmer? Apparently, like a surfer catching a wave, these goliaths can ride currents on the ocean surface to cross large areas of open sea, researchers now reveal. The saltwater or estuarine crocodile (Crocodylus porosus) is a ferocious giant that can grow at least 23 feet long (7 meters) and weigh more than 2,200 pounds (1000 kilograms). These scaly monsters have been known to devour sharks, and even attack things they can't eat, often assaulting boats in the mistaken belief they are rivals or prey, biting down with nearly 2 tons of pressure — powerful enough to crush bone or punch through aluminum hulls..." }, { title: "Lemur Species", article: "Exact classification of some types of lemurs is a subject of debate, but it's generally accepted that there are five families of lemurs with about a dozen genera and just over 30 living species. Some species of lemurs are now extinct, including one ancient lemur said to be as large as a gorilla — over 400 pounds. Some prosimian species contain a number of subspecies, all with distinct characteristics, which brings the total types of living lemurs to around 50. Today's lemur species range in size from the tiny pygmy mouse lemur, weighing in at about an ounce, to the 15-pound indri lemur and the sifaka, which are both about the size of a standard house cat..." }, { title: "Aldabra Tortoise", article: "The Aldabra tortoise is becoming more commonly available in the pet trade the world over, but it is still considered one of the more specialized tortoises. The Aldabra tortoise, because of its potential large size, requires a good deal of space and special consideration. Moving a tortoise that is more than 200 lbs is bad enough, but moving one that is more than 400 lbs can be problematic especially if the animal does not want to move or cannot. The Aldabra tortoise is only protected as far as trade so no special permits are required to keep and maintain these in captivity...." }];
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Riot Bloggr</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
header {
float: left;
width: 17%;
padding: 0 20px;
border-right: 1px dotted #ccc;
}
main {
float: right;
width: 83%;
padding: 20px;
}
a {
color: blue;
display: block;
text-decoration: none;
}
a:hover {
color: black;
}
h2 {
margin-top: 9px;
}
Here is the CDN link to Riot: https://cdnjs.cloudflare.com/ajax/libs/riot/2.6.4/riot+compiler.min.js
See the finished code at: https://github.com/jongrover/riot-js-bloggr
Full RiotJS docs at: https://riot.js.org/documentation/