Jeff Barczewski teaching at JSConf

React.js is a game changer. Learn what makes it special and get started today.

HD Video

Watch HD video on YouTube (Use HD setting for best clarity)

Slides

Meta Information

  • Author: Jeff Barczewski
  • Published: May 29th, 2015
  • Tags: reactjs, javascript,nodejs
  • Updated: July 8th, 2015

Workshop starter code

git clone or download and extract zip for one of the following repos. We will use this to get jump started into the project

REST API for workshop

Details of the REST API that we will be calling from our React.js app.

Get all polls

Server returns just the questions and choices, no voting results.

  • GET /polls
{
  "polls" : [
    {
      "id" : "p1",
      "question" : What is 1 + 1?",
      "choices" : [
        "one",
        "two"
      ]
    },
    {
      "id" : "p2",
      "question" : "What is 2 + 2?",
      "choices":[
        "three",
        "four"
      ]
    }
  ]
}

Vote on a poll / Receive results

Once a user posts their vote, the response from the server contains the updated poll results (total number of votes for each choice, null for no votes).

  • POST /polls/ID - ID is the poll id voting on

Payload to post is poll ID for the key and value is zero based index of the choice selected (string will be coerced to integer)

{ "p1": "0" }

Response from server after updating the votes is total number of votes for each choice (null represents no votes).

{ "votes" : [1, 6] }

Represents 1 vote for choice at index 0, and 6 votes for choice at index 1.

Add a poll

  • POST /polls

Payload to post

ID will be assigned by server and returned in the response

{
  "question": "What?",
  choices: [
    "Foo",
    "Bar"
  ]
}

Response from server

{
  "added": {
    "id" : "NJMZ1TeS"
  }
}

Admin polls and results

Contains all poll questions, choices, and resulting vote totals.

  • GET /admin/polls
{
  "polls" : [
    {
      "id" : "p1",
      "question" : "What is 1 + 1?",
      "choices": ["one","two"],
      "votes":[2, 6]
    },
    {
      "id" : "p2",
      "question" : "What is 2 + 2?",
      "choices" : ["three","four"],
      "votes":[null, 8]
    }
  ]
}

Working example app

Notes

Examples

Resources

Related CodeWinds Content

To learn more / CodeWinds React.js Video Training

CodeWinds React.js FundamentalsCW React.js Fundamentals - The premier online course and community where you learn React.js by pragmatically building a real web app while applying TDD/BDD principles

“Highly recommended!”
- Kevin Old, Senior Software Engineer
“Look no further, the React.js Fundamentals course is the only course you will need to become an expert in React.js”
- Wyatt Preul, Software Architect, nearForm
“Overall I would give this React.js course a 4-star thumbs up!”
- Kevin Bridges - Senior Technical Consultant at Applied Software

Subscribe to the CodeWinds Leading Edge member list to stay up to date on the latest in React.js and get exclusive offers on CodeWinds React.js video training courses.