Links and notes useful for this course. Post to Campuswire links to resources you like, for inclusion here!
Editors
For rapid development, use an editor that provides or has mature plug-ins to support JavaScript coding. The best not only help indent, but can catch mistakes like bad syntax and undefined variables, and enable debugging with breakpoints. This latter feature is especially important with React, where the code available in the browser is significantly different than your source code.
If you already know how to use Atom or Sublime 3, those are fine. My favorite is VS Code
I also recommend everyone add ESLint to their editor, to catch bad code. The team should pick a style guide and follow it. The pickiest style guide is AirBnB. The Google style is less picky but fine. I am not a fan of the self-proclaimed JavaScript Standard style, since I have seen code break during maintenance, following its rules, but this is a team choice.
- Using React in Visual Studio Code -- shows how to set up the debugger and ESLint
- Setting up ESLint on VS Code with Airbnb JavaScript Style Guide
Github
Using Github to save your code is easy. Using it in a team to share work requires communication and a standard process for dealing with branches Most people recommend some form of Gitflow for branching, but also consider trunk-based development. In either method, remember the cardinal rule: Never break the main branch.
JavaScript
JavaScript has been around quite a while but it has evolved a great deal in just the past 5 years. Many tutorials and code examples online are outdated and not good models of modern JS programming. Some recommended resources that are current are:
- My Hello, JavaScript tutoral
- The Modern JavaScript Tutorial
- Mozilla Developer Network JavaScript Reference
- The 14 JavaScript debugging tips you probably didn't know
- Google Chrome Console Utilities
- My notes for cleaner JavaScript code
React
Stay current. Anything about React more than a year old may be helpful for understanding concepts, but the code examples will probably be seriously out of date. Look for articles that use React 18 with functional components and React Hooks, rather than class-based components.
React 19 will be released soon with some significant incompatible changes. For now, this class uses React 18.
- Quick, React! -- my follow-along introduction to modern React coding
- React notes -- my notes on React concepts in Quick, React!
- Firebase notes
- Learn React -- you learn by doing; this React challenge forces you to apply the ideas from Quick, React! to build a small but non-trivial app.
- Deep Dive Into Modern Web Development -- a really nice up-to-date free course on React
React State
State in React refers to the temporary state of the user interface. It includes the result of all changes caused by the user or external events, such as network calls, that affect what the app displays or how the app should respond. State is temporary because it is stored in JavaScript variables (there is no other choice) and hence disappears if you leave the page or reload it.
In the simplest case, state is local to a component, e.g., a checkbox is or is not checked. But most apps need to share state between components, and this is where things get complicated. For the small apps in this class, Redux and similar libraries are probably overkill.
- React-Redux Hooks: useSelector and useDispatch -- a modern hook-based approach to Redux. Redux leads to many files. This tutorial is pretty clear about what they are. Avoid tutorials using connect and mapStateToProps.
- Redux Devtools Extension -- mentioned in passing in the Redux Hooks tutorial
- Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) -- an extended analysis of what features Redux that can help decide when you might need it
- Redux Toolkit -- the authors of Redux recommend using Redux Toolkit rather than Redux, to set the necessary parts more quickly.
- RTK Query -- a Redux-add-on for fetched data. See also React Query and SWR.
React Styling
Because code in React is organized by developer-defined components, a common approach to styling is to organize the CSS by components as well. There are libraries that provide pre-styled React components, like Button or Card. There is also a general library called Styled Components for doing your own components.
- Styling React apps -- one of the few pages to cover all the options, including component libraries and things like styled-components
- Material UI -- probably the most popular React UI library, with design themes developed by Google.
- React Bootstrap -- one of several libraries to style components using Bootstrap classes. Note that at times React Bootstrap may not include the latest version of Bootstrap.
- styled components -- a library for creating your components with CSS in JavaScript tagged template strings.
Testing
- Testing without mocks -- an alternative to using mocks to isolate code, from a respected agile source
Continuous Integration
Setting up a continuous integration server:
Cypress
Setting up Cypress end-to-end testing: