Basic React Structure
The Three Files That Make Up React
A React application has several files generated by default.
Three Files That Make Up React
Among them, there are three files that make up the application body. Their roles are as follows.
-
index.js
- Included in the
srcfolder. It can be called the main program. Here, the HTML template and JavaScript components are combined, rendered, and actually displayed.
- Included in the
-
App.js
- Located in the
srcfolder. This is the program that defines a component. The actual content displayed on the screen is defined here.
- Located in the
-
index.html
- Located in the
publicfolder. It corresponds to the main program,index.js, and is the HTML template file. This file is not displayed directly; it is read byindex.js, and the rendered result is displayed.
- Located in the
The Structure Changes After Build
One point to note is that this is the structure when it runs as a Node.js application. If Node.js exists on the server and the application is started as-is, this structure is fine. However, when using it on an ordinary web server, it is unrealistic for index.js to be read and rendered whenever it is accessed.
In that case, build the application with npm run build as explained earlier. Then the folder structure changes. A new index.html is created at the folder root, and inside it, a display generated by the script corresponding to index.js can be executed.
You will see this if you try it, but even if index.html is understandable, the script called from it is newly generated during build, and the code itself is completely different. Because it is automatically generated and has no line breaks, it is difficult for humans to read. In other words, what is generated by the build should no longer be considered something humans edit. It is close to how ordinary programming languages generate bytecode when source code is compiled.
Therefore, what we program is always index.js and App.js before build. When modifying something, edit these files, build again, and deploy the generated result. You should abandon the old assumption that “HTML and JavaScript are uploaded to the server exactly as written, loaded by the browser, and then run.”
In React, the “code used during development” and the “code actually deployed” are completely different. React needs to be built with a mindset similar to developing in a compiled language.
(However, if Node.js itself exists on the server and the application runs as a Node.js application, that is a different story. In that case, you can think of it as a situation where an interpreter exists on the server and it runs without compiling.)
index.js Application Program
Let us look at the generated source code.
About the Application Program
This section explains index.js, the main program. The source code is shown below, and then the contents are explained in order.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
About import Statements
Several import statements are written at the beginning. These load external modules. The import statement may not be very familiar in JavaScript, but it is a feature supported by ES6, or ECMAScript 6 Edition. React uses an ES6-compatible transpiler called Babel, so these ES6 features can be used.
First, the modules react and react-dom are loaded. These are the core of React. The following ./App and ./index.css are the component and stylesheet used here. These are also loaded with import.
ReactDOM.render
Next, the render method of the ReactDOM object is executed. This is the only processing performed by this program. It renders by inserting this component into the specified location, and is executed as follows.
ReactDOM.reder(component, targetElement);
The first argument specifies the App component defined in App.js. The second argument specifies the element with the ID root. Then the code with the App component included in the root tag is rendered and output.
About JSX
Here, <App /> is specified as the argument to render. This is the tag of the App component, but it may look strange because an HTML tag is written directly as a JavaScript argument.
This uses a feature called JSX. It probably stands for “JavaScript Expression.” JSX is a feature that lets you write HTML tags directly inside JavaScript code. It can handle not only single tags but also complex structures where other tags are included inside tags.
By writing the value <App />, the custom component defined by the <App /> tag is specified for render.
index.html Template
Next, let us look at index.html, the template for the web page. The source code is shown below. There are long comments, but they are omitted here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
... omitted ...
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
... omitted ...
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
... omitted ...
-->
</body>
</html>
This code is not very difficult. Let us explain a few points.
About %PUBLIC_URL%
In the header section, the <link> tag has a value such as href="%PUBLIC_URL%/favicon.ico". %PUBLIC_URL% is a prefix provided by React, and the public site URL is set there.
About the id="root" Tag
In the <body> section, there is a tag <div id="root"></div>. You may remember seeing this id="root" somewhere. Yes, it is the value specified as document.getElementById('root') in the argument to ReactDOM.render in index.js. The specified root points to this <div id="root"></div> tag. In other words, the <App /> component is included in this tag.
That is the only role of the index.html template. It simply provides the <div id="root"></div> tag, and the component is included there.
App.js App Component
The display part of the application is made by a “component.” Let us see what this source code looks like.
By default, a script file named App.js is prepared, and it contains the code for a component named App. Its contents are shown below.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Let us summarize the code.
About the import Statements
First, several modules are imported with import statements. The first line contains import React {Component} from 'react';, which loads objects related to React components. The following two lines load logo.svg and App.css.
About the App Class
Here, a class named App is defined. JavaScript can also create classes. Class definitions became possible in ES6. Remember that React uses ES6. Here, the App class is defined as follows.
class App extends Component {...}
You can see that the App class is created by extending the Component class. This Component is the base class for components. By extending it, the class works as a component.
About the render Method
The App class contains one method named render. It is written as follows.
render () {
return ...;
}
The value returned by return is handled directly as the rendered content. Here, the returned value has the following form.
return (<div className = "App"> ... omitted ... </div);
HTML tags are written there. This is JSX. The tag returned here is output directly as the display content of the App component.
Now you have seen the basic contents of a React application. “Define a component, integrate it, and render it” is everything React is doing here.