---
title: App
---

# App

The entry file for Ray applications defaults to `src/app.js`. Different from the `app.js` for native MiniApps, this `app.js` for Ray is a React component.

```js
// src/app.js
import React from 'react';

export default class App extends React.Component {
  render() {
    return this.props.children;
  }
}
```

## App configuration

Ray applications are configured using `src/global.config.js`, corresponding to the [app.json](/en/miniapp/develop/miniapp/framework/app/app-json) for native MiniApps.

```ts
import { GlobalConfig } from '@ray-js/types';

export const wechat = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: 'WeChat MiniApp',
    navigationBarBackgroundColor: '#f2f4f6',
    navigationBarTextStyle: 'black',
  },
};

export const tuya = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: 'Smart MiniApp',
    navigationBarBackgroundColor: '#f2f4f6',
    navigationBarTextStyle: 'black',
  },
};

export const web = {
  window: {
    backgroundColor: '#f2f4f6',
    navigationBarTitleText: 'Ray Web App',
  },
};

const globalConfig: GlobalConfig = {
  basename: '',
};

export default globalConfig;
```

When Ray is built, it will automatically select the configuration according to the target platform to be built. If there are no adaptation requirements for other ends, you can just keep `export const tuya = {}`.

## Lifecycle

You can write the application lifecycle directly in the app component.

```js
import React from 'react';

export default class App extends React.Component {
  // did mount triggered on `onLaunch`
  componentDidMount() {
    console.log('App launch');
  }
  onShow(options) {
    console.log('onShow', options);
  }
  render() {
    return this.props.children;
  }
}
```

For functional components, you can use the `useAppEvent` hook to listen for the lifecycle.

```js
import { useAppEvent } from '@ray-js/ray';

export default function App(props) {
  useAppEvent('onShow', () => {
    console.log('This hook is equivalent to onShow');
  });
  useAppEvent('onThemeChange', () => {
    console.log('This hook is equivalent to onThemeChange');
  });
  return props.children;
}
```