1 React Topics: Readings and References

2 Web Applications, Front End Libraries and Frameworks

Under Construction, subject to change

From documents — web pages — to applications and GUIs. Was HTML, CSS, and JavaScript designed for this? Not originally... but they have adapted well.

2.1 Single Page Web Applications

Under Construction, subject to change

  1. A modern approach to web applications
    • What is MVC? Anatomy of a JavaScript MV* Framework. Although written in 2014 the key concepts are sound, don't bother with the details of any particular framework mentioned. Goes over: routing, data binding, templates/views, models, and data access.
    • More insights into Client-Side Routing. Just the introductory and comparison material, not the design discussion.
  2. Front end frameworks in general: Angular, Ember, Vue. we'll most likely use React this semester, but Vue is coming on strong and seems very well documented.
    • What parts of MVC do they provide? What else do they provide? Routing, Rendering, State management, ....
    • React. "A JavaScript library for building user interfaces". Read this page, don't worry if you don't understand all the details yet.
    • Vue.js. The Vue.js folks provide a very good comparison of Vue.js to other frameworks.

3 Basic React

  1. React Developer Roadmap

  2. Good, simple, comparison to native DOM API article illustrating the "virtual DOM" Why react is taking over.

  3. When Does a Project Need React?

We will use the React "Quick Start" series to get up to speed with the fundamentals of React.

  1. Elements and Rendering
  2. Components
  3. Putting React to Work (more power!) *Conditional Rendering

4 Basic Design Patterns

5 More Advanced Functionality

6 More Functionality via the React Eco-system

  1. AJAX and React: React AJAX Best Practices. Like this article we will be using the standardized fetch() JavaScript API in this class.
  1. Routing in React via the React-Router.
  2. An more natural approach to bringing in a CSS/UI framework: React-Bootstrap. Bootstrap styling with a collection of React components for Bootstrap look and feel.
    1. Best UI Frameworks for your new React.js App.
  3. My favorite React table library: react-bootstrap-table. Has bootstrap styling, but offers an incredible amount of functionality as a React component.

7 Growing bigger. State Management

with Redux.

  • If we have time we'll also look at Immutable.js and what these immutable data structures do for us. When I first heard the term I wasn't sure that if it was a joke like a "Write Only Memory". It's better to think in terms of it like version control. In addition for state management in complex applications I've used it to create undo/redo functionality with minimal effort, i.e., the library does the "hard parts".

  • Using Immutable.JS with React and Redux. To be reviewed: Seems to review concepts of immutability from the basics of const. > A guide on when to use Immutable.js and how to use it with Redux. React and Redux are now mainstream web development tools, and they've brought the concept of immutability with them.