The next part of our learning journey will depend almost completely on the excellent content that the React development team has published.
Get ready by visiting the React home page, and read/scan the content.
Begin by creating a new folder on your machine and open it using Visual Studio Code. Next, open the Integrated Terminal and (assuming that you want to create a new app (and folder) named “my-app”) execute the command:
npx create-react-app my-app
The process will create a new folder called “my-app”, with the code needed to get started.
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 is a client-side front-end app. It does NOT have a server part to it. A browser user “pulls” a React app, by visiting a URL that is the “root” of the app. As you will learn later, the packaging and deployment process creates a bundle of files that are sent to the browser when the root of the app is requested for the first time.
That being said, all React developers - you included now - will start an on-demand per-instance Node.js server, and listen on the app’s URL. Then, from a browser, the app is pulled to the browser’s memory, and is ready for use.
Therefore, start the server listener (NOTE: if you are not currently within the “my-app” folder, execute the command
cd my-app to move there now):
The server begins listening on HTTP port 3000. Depending on your computer’s configuration, it may automatically open a browser to the localhost port 3000 URL.
An easy edit, just to prove that you can do so, is to edit the
App.js file in the
src folder. Change the text “Learn React” to anything else (ie: your name). After you save your changes, switch over to the browser window. It should show the new content. Behind the scenes, the Terminal process will regenerate the content, making changes where necessary to the deployment assets. As part of the process, the browser will refresh the visible content.
So far, we have a single component: App. This is our high-level component that we will place all of our other components inside. If you open the “index.js” file, beneath the “import” statements (discussed later) at line 7, you should see the lines:
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
The above code is responsible for rendering our “App” component (in “Strict Mode”) within the:
<div id="root"></div> element in the “public/index.html” file.
To continue our learning and begin to develop apps using React, keep reading the Week 3 notes with: Introduction to React Components.