ReactJS - In The Browser
Framing
In unit 1 we build relatively complex apps in javascript.
Now we are going to see how javascript apps get built in the real world.
Just like in express and Rails, we are going to enforce some structure in the way that our javascript renders things in the DOM and also structure for the logic of our javascript as well.
We will be seeing some professional-level tools for running and storing our JS code.
React.js is a javascript library that basically tightly controls the rendering of HTML within the DOM.
Further, it is a javascript ecosystem for creating single page apps in javascript.
It's back-end equivalent would be more expresss than rails.
We will see that the professional react "stack" is quite complicated and includes some new tools and ways of working.
What is reactjs
The react library itself is just a rendering layer to easily render elements onto an HTML page in the browser.
The wider react ecosystem allows you to build complex js single page applications.
Top 3 React Whys:
- Efficent and clean DOM rendering
- Explicit data flow. No more global variables. Logic reacts as data flows.
- Component library ecosystem.
Unit 2 vs Unit 4
BROWSER SIDE REACT IS NOT THE SAME AS SERVER SIDE RENDERED REACT
Pairing Exercise
Look up an app with a lot of user interaction.
Separate out the different design components. These are repeating design elements that contain user interaction.
Examples:
- facebook post
- trello board
- tweet
- github pull request
Answer these questions:
What kind of javascript / DOM manipulation would you need to have to make this work?
Could this interaction work with a form submit like we have done in unit 2 & 3?