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

react-native-rss-reader - working rss reader for iOS which uses React Native, Flux, and Google Feeds API

React Native weather app - working React Native app which fetches weather for your location

Resources

Components http://react.parts - Catalog of React.js for web and React Native components and apps http://npmsearch.com use “react and YOUR_KEYWORD” - since most React.js components are in npm, you can use this to find components. Google (site:github.com react xyz)

http://reactjs.com/ - main site for React.js updates

http://reactnative.com/ - Collection of information about React Native.

Related CodeWinds Content

CodeWinds podcast episode 4 - Pete Hunt discusses React.js

CodeWinds podcast episode 15 - Michael Jackson and Ryan Florence explain that React.js really changes how we think about and build web and mobile apps

The React.js Conference experience - ReactJS Conference was one of my all time favorite conferences with the perfect blend of technology, community, and fun

To learn more / CodeWinds React.js Video Training

CW 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.