Don't like this style? Click here to change it! blue.css
The hello world of a framework is to display an array of json objects. The to-do list is the simplest version of that.
Let's go explore the apps at: https://todomvc.com/. Each is the same to-do list made with a different framework.
Trusting your devs or not.
Why isn't this standardized? Well because it is about the opinions of how best to make a pleasant codebase to enjoy...
Probably everyone should make their own or learn a favorite.
Install nvm.
WINDOWS instructions: INSTALL NVM-Windows (use nvm-setup.zip )
Once NVM is installed open a terminal (windows: search cmd) (mac: use iterm2 or utilities -> terminal) and type nvm install node then
nvm use node check it with node -v and npm -v
Finally do the line npx create-react-app testapp then cd testapp then npm start
That should start a local server. Running your first react app.
React is first and foremost component based. What that really means is that every part of your app should be a component that is clean and concise.
The DREAM of components is you shopping for widgets that you pluck from shelves and install.
Let's play:
Replace App.js with the following gist:
Version 2:
Version 3:
Note that it complains about not having a key. This is because React is VERY GOOD at knowing exactly what to update on a page when a tiny bit of data changes.
Version 4:
This uses "state" to keep track of the "internal" truth of a component.
When to use state vs props: use state when the component is solely responsible for that bit of data, use props to communicate to parent components or child components.
Chain of command v5:
This is "enough rope to hang yourself" meaning you can definitely make anti-patterns and also search endlessly for best practices. Remember, there are no silver bullets.
Design Task. Let's suppose that the main App gets an array of JSON objects from firebase. Let's have two components that each react to that array of data, one that displays the length of the array, one that shows each element. Now let's have a "publish" button that pushes data up to firebase. What are some designs that could make this work, what are the pros and cons.
Let's now steal components from someone else's library in order to look good with no effort!
From the command line, inside your directory run the command npm install @material-ui/core
Here is a demo of "Material-UI" components:
Go to https://material-ui.com/ look at the demo components. Play with some. Now make a photo-only GridList which with beautiful filler images.
Now from the command line run npm run build
Use our previous skills of firebase hosting to rename the "build" directory as the "public" directory in a firebase hosted project of yours and deploy it.
React Routing (protected routes)
Mediators / MobX / Global Communications / Redux
Design Patterns for React-y stuff
First an anecdote from reality: A group of us built learnification.fun in a one-day hackathon.
We needed to move quickly and have everything we wanted in it (modules of content, progress maps, a CTF-esque flag system, etc.)
You know by now that I first build my mechanics and leave the UX/pretty stuff till later.
REACT would give me access to material-ui and it's pleasant nav-bars and drawers and stuff like that. But React was definitely overkill.
Solution: find material-ui with no framework. Voila: bootstrap-material-design
Here is the same Drawer example in a single HTML file without megabytes of technical dependencies, security risks, and libraries from who knows where in my build chain:
See the Pen NWrPYGB by Andy Novocin (@AndyNovo) on CodePen.
Go ahead and fork that pen and check the docs at bootstrap-material-design to make one of the demos for yourself. Add a "SNACKBAR" indicator when someone clicks a button you add. Now add some "CARDS" with images and a "CAROUSEL" with controls.
Anything that runs client-side is kinda open-source...
I have never used these, but they are a predictable part of my mental model of the web world:
Every npm install is exposing more and more surface area.