In this blog post, we’ll talk about the structure of React applications.
There is a bit of generated JavaScript code App.js found in the product supplements section found here that we’ll be exploring. (Look for the file javascript\Chapter18\Listing_18_01-04\hello-world). This file is the entry point to the application, which can be recognized by the subtle note displayed when starting the application in the emulator or in the browser window: "Open up App.js to start working on your app!" That's exactly what we're going to do now.
The good thing is that if the application has been started with one of the commands in the emulator or alternatively in the browser, the Expo Dev Tools ensure in the background that the application is reloaded directly when changes are made to the source code. Try it: open the App.js file in an editor or development environment and change the welcome text to "Hello World!" as shown in the listing below. The application should immediately update itself in the emulator/browser.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Hello World!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
While we're at it, let’s briefly explain the rest of the code. As you can already see in the first lines, React Native uses the native module syntax for importing JavaScript modules. This way, various components from different external libraries are loaded: a StatusBar component from Expo, the full React library, and some components from the React Native library used in the example.
The export keyword, in turn, exports the App() function, which is called internally by React Native and which defines the application as such as a return value. What strikes the trained JavaScript eye here is the strange syntax behind return—that is, what the return value reflects. React and thus React Native support their own special syntax in the form of the JSX format, in which it’s possible to "mix" JavaScript code and HTML code (for details, see https://reactjs.org/docs/introducing-jsx.html).
The example also uses three concrete components from the React Native library: The View class provides a container, so to speak, in which further UI components can be defined. The Text class represents—as the name suggests—simple text. In addition, the StyleSheet class is used to define the appearance of individual UI components. Here you can define aspects such as the background color of components, the color or alignment of texts, and much more via conventional CSS rules.
Note: JSX allows "mixing" of HTML code, CSS code, and JavaScript code in React and in React Native. However, there is a small difference between React and React Native in this regard: while with React you can use elements that are translated one-to-one into HTML elements (which are later interpreted—that is, "understood" and rendered by the browser), with React Native you can’t use normal HTML elements because later on the code is converted not into HTML, but into the corresponding native code. Therefore, we don’t speak of HTML code but of markup code. This similarly applies to the CSS code: though the CSS properties available for React Native are, by name, largely the same as the CSS properties from the CSS standard, no real CSS is used internally by React Native.
Editor’s note: This post has been adapted from a section of the book JavaScript: The Comprehensive Guide by Philip Ackermann.