Skip to content
No description, website, or topics provided.
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
01 Bootstrap React Components
02 Github Profile Viewer
03 Quick Quiz Application
04 MovieFind
05 Firebase ContactList
06 Stickypad Notes
07 InfoFinder Search Engine
08 Youtube Gallery
09 Socket.io Chat App
10 Workoutlogger
img
.gitignore
README.md

README.md

[Eduonix] ReactJS and Flux: Learn By Building 10 Projects [ENG, 2016]

https://www.youtube.com/watch?v=S8ArGSiYYBw



01 Bootstrap React Components

002 Setup React Bootstrap

https://facebook.github.io/react/
http://getbootstrap.com/
https://cdnjs.com/libraries/babel-core
http://getbootstrap.com/examples/jumbotron/
http://getbootstrap.com/components/#navbar

003 Creating React Components

004 Component Props

005 Working With State


02 Github Profile Viewer

Technologies: jquery, bootstrap, webpack

002 Files Webpack Setup

GithHub --> Settings --> OAuth applications --> Developer applications --> Register a new OAuth application

Application name: myApp
Homepage URL: http://localhost:8080
Authorization callback URL: http://localhost:8080/_eauth/github

# npm install -g webpack --no-optional
# npm install -g webpack-dev-server --no-optional

# npm init
# npm install

# webpack-dev-server --port 8080 --hot --host 0.0.0.0

$ curl -I http://localhost:8080
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 7730
Date: Sat, 25 Jun 2016 13:12:31 GMT
Connection: keep-alive

$ links http://localhost:8080/app

browser --> localhost:8080/app/


003 Main App Component

http://getbootstrap.com/examples/starter-template/


004 Profile Component


005 RepoList Repo Components


006 Search Component


project_2_pic_1


project_2_pic_2


Update next valuers to run app:

clientId: 'myClientId',
clientSecret: 'myClientSecret'

03 Quick Quiz Application

Technologies: bootstrap, webpack


002 App Component Setup

$ npm init
$ npm install

$ webpack-dev-server --port 8080 --hot --host 0.0.0.0

browser --> localhost:8080/app/


003 QuestionList Question Component


004 Quiz Logic


project_3_pic_1


project_3_pic_2


project_3_pic_3


04 MovieFind

Technologies: bootstrap, jquery, gulp, flux


002 Flux Structure Gulp Part

http://facebook.github.io/flux/docs/overview.html

http://omdbapi.com/

$ npm init
$ npm install

$ gulp

004 Flux Setup Preperation


006 SearchForm Component


007 Working With The API


008 Displaying Results


project_4_pic_1


project_4_pic_2

$ npm list -g --depth=0
/usr/local/lib
├── gulp@3.9.1
├── npm@3.9.5
├── webpack@1.13.1
└── webpack-dev-server@1.14.1

$ npm list --depth=0
04_moviefind@1.0.0 /projects/04 MovieFind
├── browserify@13.0.1
├── flux@2.1.1
├── gulp@3.9.1
├── object-assign@2.1.1
├── react@0.14.8
├── react-dom@0.14.8
├── reactify@1.1.1
└── vinyl-source-stream@1.1.0

05 Firebase ContactList

Technologies: Firebase

firebase.com


002 Flux Boilerplate Setup

Create New App:

App Name: ContactList
App URL: contactlist9

$ npm install
$ gulp

003 Adding Contacts To Store


004 Persisting Data To Firebase

$ npm install --save firebase@2.*.*

005 Listing Deleting Contacts


007 Edit Update Contacts


project_5_pic_1


project_5_pic_2


# npm list --depth=0
05_Firebase_ContactList@1.0.0 /projects/05 Firebase ContactList
├── browserify@13.1.0
├── firebase@2.4.2
├── flux@2.1.1
├── gulp@3.9.1
├── object-assign@2.1.1
├── react@0.14.8
├── react-dom@0.14.8
├── reactify@1.1.1
└── vinyl-source-stream@1.1.0

06 Stickypad Notes

Technologies: Flux, Mongolab


002 Stickypad Boilerplate Setup

mongolab.com

Create New ->
Cloud Provider --> Amazon
Plan -->Single-node --> Sandbox

Database name: stickypad1

Add Database User: marley

$ npm install
$ gulp

003 AddNoteForm Component


004 Add Fetch Notes From MongoLab

mongolab.com --> UserProfile --> Api Key

AppAPI.js add your API KEY.


005 Display Sticky Notes


006 Delete Sticky Notes


project_6_pic_1

Remove Note by DoubleClick

# npm list --depth=0
06_Stickypad_Notes@1.0.0 /projects/06 Stickypad Notes
├── browserify@13.1.0
├── flux@2.1.1
├── gulp@3.9.1
├── object-assign@2.1.1
├── react@0.14.8
├── react-dom@0.14.8
├── reactify@1.1.1
└── vinyl-source-stream@1.1.0

07 InfoFinder Search Engine

Technologies: DuckDuckGO API


002 InfoFinder Fluxboiler Setup

https://duckduckgo.com/api

$ npm install
$ gulp

003 Search Form

no run


004 Fetch Data From DuckDuckGo API


005 Display Results

project_7_pic_1.png

project_7_pic_1.png

# npm list --depth=0
07_InfoFinder_Search_Engine@1.0.0 /projects/07 InfoFinder Search Engine
├── browserify@13.1.0
├── flux@2.1.1
├── gulp@3.9.1
├── object-assign@2.1.1
├── react@0.14.8
├── react-dom@0.14.8
├── reactify@1.1.1
└── vinyl-source-stream@1.1.0

08 Youtube Gallery

Technologies: Zimit, Firebase

http://firezenk.github.io/zimit/


002 Boiler Add Video Form


003 Persist Data To Firebase

$ npm install --save firebase@2.*.*

Create new database:

App Name: ytgallery1
App Url: ytgallery1

gulp

Video Title: Enjoykin
Video ID: id: n-AdoTkXwbc
Video Description: Some Description

004 Displaying Videos


005 Deleting Videos

project_8_pic_1.png

# npm list --depth=0
08_Youtube_Gallery@1.0.0 /projects/08 Youtube Gallery
├── browserify@13.1.0
├── firebase@2.4.2
├── flux@2.1.1
├── gulp@3.9.1
├── object-assign@2.1.1
├── react@0.14.8
├── react-dom@0.14.8
├── reactify@1.1.1
└── vinyl-source-stream@1.1.0

09 Socket.io Chat App

Technologies: Webpack, Express, Socket.io


002 Webpack React Setup

$ npm init
$ npm install

# npm install -g webpack
# npm install -g webpack-dev-server

$ webpack-dev-server --port 8080 --hot --host 0.0.0.0

http://localhost:8080/app/


003 Server Connection Setup

$ webpack-dev-server --port 8080 --hot --host 0.0.0.0
$ node server

http://localhost:3000
http://localhost:8080/app/


004 Adding Messages


005 Display Messages


006 Username Functionality

project_9_pic_1.png

project_9_pic_2.png

project_9_pic_3.png

$ npm list --depth=0
09_socket.io_chat_app@1.0.0 /projects/09 Socket.io Chat App
├── babel-core@5.8.38
├── babel-loader@5.3.3
├── express@4.14.0
├── react@0.14.8
├── react-dom@0.14.8
├── socket.io@1.4.8
├── socket.io-client@1.4.8
└── webpack@1.12.15

10 Workoutlogger

002 Setup ShowForm State

$ npm install
$ gulp

003 Add Workout Form

004 Using LocalStorage

005 Fetch Display Workouts

006 Deleting Workouts

project_10_pic_1.png

project_10_pic_2.png

$ npm list --depth=0
10_Workoutlogger@1.0.0 /projects/10 Workoutlogger
├── browserify@13.1.0
├── flux@2.1.1
├── gulp@3.9.1
├── object-assign@2.1.1
├── react@0.14.8
├── react-dom@0.14.8
├── reactify@1.1.1
└── vinyl-source-stream@1.1.0

Marley

jsdev.org

email:
Marley

You can’t perform that action at this time.