This document is intended to be a light summary of the concepts and principles of React component-based architecture. Much of it was gleaned from the topic set that you just went through in the getting started document.
create-react-app generator creates a folder with many code assets included.
node_modules folder has code used by the development, packaging, and deployment phases of your work.
public folder has the very important “root” or start page of your app,
index.html. Other assets can be added here that can be referenced directly by the code in the index page.
src folder has your app’s initial source code. Edit and add, to build up your app.
Typical of React (and Angular) apps, the “root” or starting point of an app is or appears to be almost empty. Notice the single
<div> in the body element.
As it states in the code comments, “The build step will place the bundled scripts into the
<body> tag”. Then, the scripts - the app itself - will replace the content of the div element with the components in the app.
A React app runs in the browser (or in a browser-like object on a device). Fully. Completely.
Yes, the browser must fetch the app’s code from a URL (typically at a server), but the server’s role is minimal. It does not do any computation or code generation. It delivers the root page and the app bundle in a way similar to any other static resource that it might deliver to any user.
The React app that runs in the browser has an often-sizeable memory footprint. The app is stateful. In other words, as the content the user sees changes and adapts, the app is managing its memory and displayed content on its own, without any server involvement. (Well, that’s not exactly true; if the app needs data, it will make a call to a web service/API to do that.)
This behaviour holds even through well-understood “navigation” actions, where the user navigates to a new URL. As you will learn, one of the React app’s features is “routing”, which manages resource URLs. It’s important to realize, however, that the app remains in memory, and the browser repaints the window to match the user’s navigation intention. There’s no page reload/refresh, in the traditional server-fetched sense.
Again, as a summary, here are some notable new concepts and topics gleaned from the getting-started documentation set.
A component is a source code file,
A component has a well-defined organizational structure, and includes:
The React development team has published a document that is obviously useful for React apps, but will also be useful to us in the near future when we begin learning Angular:
Have a look at it. It’s just another way of getting accustomned to the “new” way of thinking about app building.