Installation: npm installs packages to your project or globally on your machine. npx executes packages from the npm registry without requiring a permanent installation.

Flexibility: npx provides a more flexible way to use and test npm packages and tools without altering your project’s setup or your global environm

Setting Up the Development Environment

  1. Install Node.js and npm: React requires Node.js to run on your machine. You can install Node.js and npm together from the Linux terminal. sudo apt update sudo apt install nodejs npm
  2. Install Visual Studio Code: VS Code is a popular code editor for React development. Install it from the official package or the Ubuntu Software Center. sudo snap install --classic code
  3. Open VS Code and install essential extensions like ESLint, Prettier, and the Reactjs code snippets for a better development experience.

Initializing the React Project

  1. Open a terminal and run the following command to create a new React app named my-app: npx create-react-app my-app
  2. Navigate into your project directory: cd my-app
  3. Start the development server to see your app in action: npm start

Implementing Context API

The Context API allows you to share state across the entire app easily, which is especially useful for themes, user information, etc., without prop drilling.

Create a Context: In your src directory, create a new file named ThemeContext.js. 

import React from 'react';

const ThemeContext = React.createContext();

export default ThemeContext;

Provide Context Value: To use the Context, you must wrap your component tree with the Context Provider and pass a value to it. Modify App.js to include the ThemeContext.Provider. 

import React from 'react';
import './App.css';
import ThemeContext from './ThemeContext';

function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      {/* Rest of your app components go here */}
    </ThemeContext.Provider>
  );
}

export default App;

Consume Context: Any child component in the component tree can now consume the Context value. 

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemeToggler() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle Theme
    </button>
  );
}

export default ThemeToggler;

Building a Mobile App with React Native and Expo

Developing a mobile application with React Native provides a seamless way to create cross-platform apps using JavaScript. This section of the article will guide you through the process of using Expo, a framework and platform for universal React applications, which simplifies the development and testing of React Native apps.

Step 1: Setting Up Your Development Environment

Before diving into coding, ensure your environment is prepared for React Native development with Expo.

  • Install Node.js: Ensure Node.js is installed on your system. It’s required for running the Expo CLI (Command Line Interface).
  • Install Expo CLI: Run npm install -g expo-cli in your terminal to install the Expo CLI globally.
  • Expo Go App: For real-device testing, download the Expo Go app from your device’s app store.

Step 2: Creating Your React Native Project with Expo

  1. Initialize the Project: In your terminal, navigate to your workspace and run expo init MyReactNativeApp to create a new React Native project. Choose a template from the options provided.
  2. Start the Development Server: Navigate into your project folder using cd MyReactNativeApp and start the project by running expo start. This command will open a new tab in your default web browser, displaying the Expo developer tools.

Step 3: Building Components and Implementing Navigation

With the project set up, you’ll begin developing your application’s UI and logic.

  • Creating Components: Organize your application by creating separate components for each part of your UI. Use functional components and React Hooks for state management and lifecycle methods.
  import React from 'react';
  import { Text, View } from 'react-native';

  const CustomComponent = () => (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );

  export default CustomComponent;
  • Implementing Navigation: Install React Navigation in your Expo project to enable navigation between different screens.
  npm install @react-navigation/native @react-navigation/stack
  expo install react-native-screens react-native-safe-area-context

Set up a Stack Navigator as the root navigator for your app. This allows you to define a series of screens that users can navigate through.

  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import HomeScreen from './HomeScreen';
  import DetailsScreen from './DetailsScreen';

  const Stack = createStackNavigator();

  function AppNavigator() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

Step 4: Testing and Debugging

  • Testing on Devices: Use the Expo Go app to scan the QR code displayed in your terminal or Expo developer tools. This allows you to test the app on real devices.
  • Debugging: Take advantage of the debugging tools provided by Expo and React Native. Use console.log, React Developer Tools, and the remote debugger to trace and fix issues.

Conclusion

This article has guided you through setting up your development environment, creating a new React Native project with Expo, building components, and implementing navigation.