Javascript

Frameworks & Libraries

Framework

Imposes structure on your code such as the way Ember follows a Model-View-Controller (MVC) pattern

 

http://builtwithember.io/

Library

Toolkit such as jQuery, d3.js, or react.js (the "V" in MVC)

 

http://builtwithreact.io/

react.js

• focuses on the view, or User Interface (UI)
• Data flow: (actions up, data down)

User Interface

"the space where interactions between humans and machines occur"

Data Flow

unidirectional (except in the case of forms are bidirectional)

Read Thinking in React

https://facebook.github.io/react/docs/thinking-in-react.html

Resources:

https://react.rocks/tag/CRUD

http://buildwithreact.com/tutorial

https://reactforbeginners.com/

https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.xjgubxxrb

http://www.wufoo.com/gallery/

Let's get started!

• Visit https://github.com/petehunt/react-webpack-template
• Follow the instructions at the bottom to clone the repo and get started
• Open your index.html file in a browser:  (ie: file:///Users/brigittewarner/repos/some-crudy-app/index.html)
• Add a styles folder for your CSS files to live and import these into you index.html file like normal
• Add fixture data to an assets folder (data.json)

Homework:

• Create single-page CRUD app using react.js - due May 2
  • 3 "CUD" Forms (Inputs, Outputs, Buttons)
  • 1 R (non-creating, updating, deleting state for information)