4. My First React-Native App - "Hello React"

I recommend going through the previous blogs of this Series: https://maroofs.hashnode.dev/series/react-native-development

In this Blog, I will show you the process of Executing your First React-Native App i.e. "Hello React".

If you have read my previous blogs about this series, I mentioned that index.js is the First file that executes when running a React-Native App.

So let's look at the file that already has some content in it, and try to understand what are they.

• Let's Go line by line...

1. import {AppRegistry} from 'react-native' :

   • In the above line, 'react-native' refers to a library. It is being imported using the import statement, which allows you to use the functionality provided by that library in your code.

   • AppRegistry is a class defined inside react-native library.

   • The AppRegistry class is responsible for registering and starting the main component of a React Native application. It provides methods to define the entry point of your app and specify which component should be rendered as the root component.

   • In react-native we define the main component - App Component, and then use the AppRegistry to register and start the app by specifying the main component.

2. import App from './App' :

   • This line is importing the App component from a file named 'App' located in the current directory ('./').

   • The App in import App is an identifier that represents the default export from the './App' file. It could be a class, a function, or an object, depending on how it was exported in the './App' file.

   • Assuming that './App' is a file with a .js extension and located in the same directory as the file where the import statement is written, the code is importing the default export from that file.

3. import {name as appName} from './app.json' :

   • The line import {name as appName} from './app.json' is importing the value of the name property from the './app.json' file and assigning it to the variable appName.

   • Assuming './app.json' is in current directory, with a property as name .

   • 

     here name is "AwesomeProject".

4. AppRegistry.registerComponent(appName, () => App)

   • The registerComponent function of AppRegistry Class registering the App component with the name stored in appName. This allows the React Native framework to locate and render the App component is the main component of your application when the app is launched.

   • The second argument of registerComponent is a function that returns the component you want to register. In this case, () => App is an arrow function that returns the component App. The App component could be a class-based component or a functional component, depending on how it was defined.

Now let's open App.tsx and write the code for 'Hello React'

1. First We are importing React from the "react" library.

2. Then we are importing some components that we will be using in our app such as View, Text, SafeAreaView, and Button.

3. SafeAreaView - This component ensures that the content is rendered within the Safe Area boundaries of a Device.

   View - It is similar to <div> of HTML, which allows the creation of sections of content around the app.

   Text - Use to Add text content inside the app.

   Button - Importing button to perform a task based on click conditions given.

4. Next, we wrote the function App(), The function App inside the App.tsx file is a component in a React Native or React application. It defines the behavior and structure of a particular part of the user interface.

5. In React and React Native, components are the building blocks of the user interface. They encapsulate a set of functionalities and define how a part of the UI should be rendered based on the current state and props.

6. The function App component typically returns JSX (JavaScript XML), which describes the structure and layout of the UI elements to be rendered. JSX is a syntax extension used in React and React Native to write HTML-like code within JavaScript.

7. Inside the App(), I have returned a Text - "Hello React" and a Button that says "Press me".

8. Then comes the last part, export default App; When a component is exported as the default export, it allows other modules or files to import it using a simplified syntax, without requiring curly braces {}.

Now here's the output...

If you like my content or have any suggestions, please comment. As it would help me to improve my Blogs.