https://github.com/ebu/react-tutorial
This repository contains the material for the react tutorial at EBU DevCon 2015
https://github.com/ebu/react-tutorial
Last synced: about 1 year ago
JSON representation
This repository contains the material for the react tutorial at EBU DevCon 2015
- Host: GitHub
- URL: https://github.com/ebu/react-tutorial
- Owner: ebu
- License: bsd-3-clause
- Created: 2015-08-21T07:02:41.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2015-10-07T09:17:26.000Z (over 10 years ago)
- Last Synced: 2024-04-13T22:26:56.132Z (about 2 years ago)
- Language: JavaScript
- Size: 4.3 MB
- Stars: 2
- Watchers: 8
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tutorial
This repository contains the material for the react tutorial at [EBU DevCon 2015](https://tech.ebu.ch/devcon15)
An example of the app that we intend to create can be found here: [http://react-tutorial.ebu.io/web/](http://react-tutorial.ebu.io/web/)
## Setup
### For the workshop
During the workshop, the web server (data API) is not supposed to be edited.
In order to edit the JavaScript and HTML code, and the try the _react_ page, you should:
- Install Git (and the Github desktop app if you are not very comfortable with the command line)
- Clone this project on your laptop (fork it before if you want to put your code on github later).
- Install a recent browser (Chrome would be best)
- Run a local http server from a terminal to host the html and react (it's not the data API):
1. cd to the root of the react-tutorial directory you cloned from Github. For example: `cd Desktop/react-tutorial`
2. You can run a server using either python or nodejs.
- using Python: run: `python -m SimpleHTTPServer 8888`
- using node: run: `node node_modules/http-server/bin/http-server -p 8888 --cors`
- Open [http://localhost:8888/web_advanced/index.html](http://localhost:8888/web_advanced/index.html) in the browser,
verify that you have a web page. This is an example page of what we can do with the data.
During the workshop you'll build your own!
The web server accessed will be located at: [http://react-tutorial.ebu.io/](http://react-tutorial.ebu.io/)
## Web server API
For the purpose of the tutorial, the webserver installation is optional.
The example web server is using react-tutorial.ebu.io by default.
The API returns yearly European Immigration information by country of previous residence and gender.
Two endpoints are available:
* /data/summary
* /data/country/:countryName:
* /web
### GET /data/summary
Get a summary of all countries. Returns a two dimensional json object. (Dimensions: Country, Year)
**application/json reply:**
{
"Belgium": {
"1960":"42 248",
"1961":"36 088",
"1962":"52 834",
...
"2012":"266",
"2013":"68 636"
},
...
"Bulgaria": {
"2005":"2 013",
"2007":"1 954"
}
}
Example : `curl http://react-tutorial.ebu.io/data/summary`
### GET /data/country/:countryName:
Get gender breakdown of a country by year. Returns a two dimensional json object. (Dimensions: Year, Gender)
**application/json reply:**
{
"1980": {
"Males":"28 644",
"Females":"26 050"
},
"1981": {
"Males":"25 336",
"Females":"23 962"
},
...
"2013": {
"Males":"36 697",
"Females":"31 939"
}
}
Example : `curl http://react-tutorial.ebu.io/data/country/belgium`
### /web
Get the example of web page.
### Running the web server locally
You'll need to install nodejs and npm on your computer. Then from the root directory run the following:
```
npm install
npm start
```
## About
## Contributors
- Solène Buet (EBU)
- Mathieu Habegger (EBU)
- Michael Barroco (EBU)
- Christopher Chiche (www.christopherchiche.com)
Pull requests are welcome!
## Copyright & license
Copyright (c) 2015, EBU-UER Technology & Innovation
The code is under BSD (3-Clause) License. (see LICENSE)