Getting Started with React Native: Creating a "Hello World" App

React Native is a popular framework for building mobile applications using JavaScript and React. It allows developers to create apps for both iOS and Android using a single codebase. In this article, we’ll walk through creating a simple "Hello World" app in React Native, explaining the folder structure, and exploring different ways to add CSS styles.

Expo vs. React Native CLI

Before we dive into the code, it's important to understand the two main ways to create a React Native app: using Expo or the React Native CLI.

Expo:

Pros:
- Simplifies setup and development with a managed workflow.
- Provides a range of built-in modules and APIs.
- Hot reloading and fast refresh out of the box.
Cons:
- Limited access to native modules.
- Adding custom native code is more complex.

React Native CLI:

Pros:
- Full control over the native code.
- Easier to integrate custom native modules.
- More flexibility for advanced customizations.
Cons:
- More complex setup and configuration.
- Requires more knowledge of native development (iOS/Android).

Setting Up the Development Environment

Using Expo:

Install Expo CLI:
```
 npm install -g expo-cli
```
Create a new project:
```
 expo init HelloWorld
```
Navigate to your project directory:
```
 cd HelloWorld
```
Start the development server:
```
 expo start
```

Using React Native CLI:

Install React Native CLI:
```
 npm install -g react-native-cli
```
Create a new project:
```
 npx react-native init HelloWorld
```
Navigate to your project directory:
```
 cd HelloWorld
```

Start the development server:

 npx react-native run-android  # for Android
 npx react-native run-ios      # for iOS

Project Structure

Once you've set up your project, you'll see a folder structure like this:


├── App.js
├── node_modules
├── package.json
├── babel.config.js
├── .gitignore
└── ...

Key Files:

App.js: The main entry point of your application.
package.json: Contains project metadata and dependencies.
babel.config.js: Babel configuration file.

Creating the "Hello World" App

Open App.js and replace its content with the following code:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5fcff',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

Understanding the Code

Imports:
- React is the core library.
- Text, View, and StyleSheet are React Native Core components.
App Component:
- The root component of the application.
- Contains a View with a Text component displaying "Hello World".
Styles:
- Defined using StyleSheet.create.

Adding CSS Styles

React Native uses JavaScript objects to style components, but there are several ways to add styles:

Inline Styles:

 <Text style={{ color: 'blue', fontSize: 20 }}>Hello World</Text>

StyleSheet Object:
- As shown in the example above using StyleSheet.create.

External StyleSheet:

Create a separate file (e.g., styles.js):

  import { StyleSheet } from 'react-native';

  export default StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#f5fcff',
    },
    text: {
      fontSize: 20,
      color: '#333',
    },
  });

Import and use in App.js:
```
  import styles from './styles';
```

Styled Components:

Using the styled-components library for CSS-in-JS styling:

  npm install styled-components

  import styled from 'styled-components/native';

  const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #f5fcff;
  `;

  const TextStyled = styled.Text`
    font-size: 20px;
    color: #333;
  `;

  const App = () => {
    return (
      <Container>
        <TextStyled>Hello World</TextStyled>
      </Container>
    );
  };

  export default App;

Conclusion

Creating a "Hello World" app in React Native is a great way to get started with mobile development. Whether you choose Expo for its simplicity or the React Native CLI for more control, understanding the folder structure and different styling methods is essential. With these basics, you're well on your way to building more complex and feature-rich applications. Happy coding!