Alright, first things first, let's get those dependencies installed. You'll need MobX, Firestore, and MobX React to make everything play nice together. Just run these commands:

npm install mobx --save
npm install mobx-react --save
npm install firebase --save

Next up, we need to initialize Firebase in your project. Create a new file in your root directory called firebase.js and pop in this code:

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
  // YOUR FIREBASE CONFIG DATA
};

firebase.initializeApp(config);

const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });

export default db;

Don't forget to replace // YOUR FIREBASE CONFIG DATA with your actual Firebase config data.

Now, let's create a MobX store to hold your state and actions. Make a new file in your root directory named store.js and add this:

import { observable, action } from 'mobx';
import db from './firebase';

class Store {
    @observable data = [];

    @action fetchdata = async () => {
        const snapshot = await db.collection('YOUR_COLLECTION_NAME').get();
        snapshot.docs.forEach(doc => {
            this.data.push({ id: doc.id, ...doc.data() });
        });
    };
}

const store = new Store();
export default store;

Remember to replace 'YOUR_COLLECTION_NAME' with the name of your Firestore collection.

Time to connect your React component to the MobX store. Use the inject and observer functions from mobx-react. Here's a quick example:

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';

@inject('store')
@observer
class YourComponent extends Component {
  componentDidMount() {
    this.props.store.fetchData();
  }

  render() {
    const { data } = this.props.store;
    return (
      <div>
        {/* RENDER YOUR DATA HERE */}
      </div>
    );
  }
}

export default YourComponent;

In the componentDidMount method, the fetchData action is called to fetch data from Firestore and store it in the MobX store. The observer decorator ensures your component re-renders whenever the observed state (data) changes.

Finally, wrap your top-level component in a Provider to make the store available to all components:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'mobx-react';
import YourComponent from './YourComponent';
import store from './store';

const App = () => (
  <Provider store={store}>
    <YourComponent />
  </Provider>
);

render(<App />, document.getElementById('root'));

And there you have it! You've now integrated Firebase Firestore with MobX in your React app. When the app launches, data is fetched from Firestore, the state in the MobX store is updated, and your components re-render.