Learning React

A repository where I drop code I create as I learn React I finished the Official Facebook Tutorial and Hacking with React. Currently doing exercises.

The new Facebook React tutorial

Facebook updated their tutorial recently! Gave it a go for fun.

Here's a link to the Facebook finished product. I went along the tutorial anonymously.

Stocks App

I made an app that gets stocks values and then realized that the API never actually changes in real time, so it was always going to be a linear graph so I got depressed and deleted it. However, it looks very pretty so I might as well upload the screenshot.

Socket Chat

Example node output:

A socket.io based chat room made in React. Users select a username and start chatting.

When you haven't selected an username you can see the messages but you can not comment

Server output looks like this:

Server is running on port 3000
Connected: 1 sockets connected.
Connected: 2 sockets connected.
Connected: 3 sockets connected.
Zyst has joined the chat room
John has joined the chat room
Mark has joined the chat room
Mark has disconnected.
Disconnected: 2 sockets connected.
John has disconnected.
Disconnected: 1 sockets connected.

Local Storage Workout Logger

A React/Flux workout logger that saves to Local Storage. I actually had never used Local Storage, so this was a super interesting project to do.

InfoSearch

A React + Flux app that connects to the Duck Duck Go API and does quick searches on it.

Sticky notes

A Create/Read/Delete React + Flux application with persistence using MongoDB. Double clicking a post-it deletes it.

To deploy you'll need to create a file called AppSecrets.js in the src/utils with the following content:

AppSecrets.js

const Secrets = {
  mongo: 'super-secret-mongolab-api-key-here',
};

export default Secrets;

Firebase contact list

A Create/Read/Update/Delete React + Flux application with persistence using Firebase.

IMDB movie finder (With Flux)

A movie finder that uses the IMDB API. While the application itself is quite trivial this was my first Flux application.

Dynamic quiz application

An application that creates quizzes 100% dynamically based on structured JSON input.

###Question

###Result

Github profile viewer

A github profile and repositories viewer. You can enter type new users at the top and it will load them, and it looks fairly pretty.

Everything used more than once is an individual component, and this is when I started to use stateless components a bit more heavily.

Hacking with React

The Hacking with React code is located in: hacking-with-react/hwr and it can be run with:

webpack-dev-server

Tests can be run with:

npm run test

Link can be run with:

npm run lint

Book Complete

Official facebook tutorial

The Official facebook tutorial code is located in facebook-react-tutorial/react-tutorial and can be run with any of the following.:

There are several simple server implementations included. They all serve static files from public/ and handle requests to /api/comments to fetch or add data. Start a server with one of the following:

Node

npm install
node server.js

Python

pip install -r requirements.txt
python server.py

Ruby

ruby server.rb

PHP

php server.php

Go

go run server.go

Perl

cpan Mojolicious
perl server.pl

And visit http://localhost:3000/. Try opening multiple tabs!

Exercise Complete