Front end web development for dinosaurs
The React framework was built to solve one problem: building large applications with data that changes over time.
In the old times, re-rendering one thing meant re-rendering everything. This had negative implications on processing power and ultimately user experience, which at times became glitchy and laggy.
Enter, React's Virtual DOM, Components, and JSX...
The Virtual DOM gives us a javascript representation of the actual DOM. When changes are made to the view we want to show, we update the Virtual DOM first, which then checks the diffs between what was changed to what is currently rendered, and changes ONLY the pieces that need to be changed, rather than re-rendering the entire page. You can think about it like a staging area for changes that will eventually be implemented.
The basic unit you'll be working with in ReactJS is a component. Components are pieces of our application that we can define once and reuse all over the place. They're a way to modularize or compartmentalize features of our applications.
With components, there is more integration and less separation of HTML, CSS, and JavaScript. Instead of creating a few large files, you will organize your web app into small, reusable components that encompass their own content, presentation, and behavior.
Take a look at CraigsList (note: right click to open in a new tab!).
Each listing is a component. How can you identify this?
- Listings look identical in structure, but have different information populating them
- Listings are dynamically generated based on the user's search
Now, go to Amtrak.com (note: right click to open in a new tab!). We want to look at the listing page, so put in any "From" (for example, New York - Penn Station), any "To" (for example, Boston - South Station), and pick any date. Hit "Find Trains". Now look at the listing page:
Scrolling down it, identify the visual "components" the website is comprised of. We suggest drawing this out on paper!
As you're drawing this out, think about the following questions...
- Where do you see "nested components;" that is, where are there components inside another component? Where do you see just one "layer" instead?
- Are there any components that share the same structure?
- For components that share the same structure, what is different about them?
- JSX visual compiler
- Interpolation
- Interpolation comment
- ClassName
- Ternary, &&