React.js
Page is a WIP
Hands-on Workshop
Try it yourself
Finished example
Additional Resources
React-based Frameworks
Next.js: (What we used) Takes care of a lot of important features needed in a fully-functional frontend application
Next.js by Vercel - The React Framework
Non-React Frameworks
Vue.js: More template-based framework, still pretty popular
Vue.js - The Progressive JavaScript Framework | Vue.js
Angular.js: Older and used by a lot of companies, but tends to require a lot more bloaty setup code imo but that’s probably better for companies (also uh Google killed it off January 2022…)
AngularJS - Superheroic JavaScript MVW Framework
Svelte: Adds a compile step and updates the DOM directly (I haven’t used it before but seems cool + has a good set of libraries and community support)
Preact: A “smaller, faster React” — basically React but they removed a lot of the fancier features, leaving a more barebones but def smaller & faster library
Styling
Material UI: Many pre-made components that easily integrate with React! (and only React)
MUI: The React component library you always wanted
Tailwind: CSS, completely embedded in the classname. Tailwind provides an extensive set of CSS classes that you can use immediately (eg. w-4 = width: 1rem)
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Google Fonts: Easily import fonts and icons into your website with a simple link; works with even plain HTML websites, easiest way to get fonts
Flexbox Guide: CSS Flexbox is useful for putting things where you want them as easily as possible
A Complete Guide to Flexbox | CSS-Tricks
Grid Guide: CSS Grid is the best tool for making grids :)
A Complete Guide to Grid | CSS-Tricks
React Libraries
React.js has a MASSIVE community who have built components for basically anything you need. Google is your best friend for finding these libraries, but here is a list of libraries that I recommend:
Redux: helps you have a “global” state so you don’t have to pass state variables through a million components
Miscellaneous
Typescript: Javascript but BETTER — it adds a typing system, which allows you to type check before deploying your code. It adds an extra translation step from TS → JS. (Highly recommend using this!)