• Sign Up
  • Login

Remember me

Forgot your password?
Code Pajamas
  • Courses
  • Paths
  • Sign Up
  • Log In
  • 0 Items

Build a Blog App with RiotJS

RiotJS Blog App Tutorial

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:

  1. Download and install a code editor (if you do not already have one) atom.io: https://atom.io/

  2. 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/

  3. 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-windows

  4. Install Node Live Server package:

    In your command line interface (CLI) type: npm install -g live-server

  5. Follow 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/

Next Lesson

Course Info

18 minutes of video
1 code along exercises
Instructor: Jonathan Grover
Free course
Please wait while we attempt to send your message!
Thank you for your question. We will contact you soon by email!

Ask Question

Use the form below to submit a question and we will get back to you via email shortly.





Twitter

Loading...Follow @codepjs
Loading...

Facebook

Share
Code Pajamas

Product

Courses
Paths

Company

About
Instructors
Careers

Support

FAQ
Contact

Legal

Terms
Privacy

Connect

Facebook
Twitter
Instagram
Threadless

Mailing List

Subscribe
© 2017 Code Pajamas. All Rights Reserved. Made with ♥︎ in Brooklyn, NY, USA, Earth, Orion Spur, Milky Way Galaxy, Laniakea Supercluster