[docs] add docs of how to integrate with an existing react app

[sibelius]

it would be great to have a step by step tutorial on docs of how to setup fbt in an existing React app project

which packages should we install?
how should we modify our babel config?
should we modify our webpack config?
how to translate new generated hash keys?

[ahmadalfy]

I am kind of confused how can I use it, I checked the example app and didn't find any packages called fbt in package.json. Also all the references I can find on npm is this and it doesn't say anything

[jrwats]

I am kind of confused how can I use it, I checked the example app and didn't find any packages called fbt in package.json. Also all the references I can find on npm is this and it doesn't say anything

I have no idea what fbt-cli is, but the packages used in the demo-app are actually using the yarn workspaces. You can look at my example npm-only app for the relevant npm modules:
https://github.com/jrwats/fbt-npm-app

We should be landing and finalizing versions for all of these modules soon...

[ahmadalfy]

@jrwats thank you so much for your effort, I checked the new version again. It's still not user friendly I have been trying to get it to work in my existing project without any success. I will continue to tinker and document the steps in a format an average developer can understand.

[aldeka]

A +1 on this issue -- even after guessing at a bunch of steps (e.g. manually installing babel-node and related dependencies globally) by reading the sample app's package.json, we were unable to get fbt working in our existing application. fbt's promised feature set is super great, but right now there is zero documentation for consumers of the library to get started (versus developers building the library from source). :(

[retyui]

It took me an hour to add fbt to my react-native project.

@aldeka You don't need babel-node to run scripts from an npm package!

[retyui]

You can find diff for create-react-app project here...

[Zbish]

It took me an hour to add fbt to my react-native project.

@aldeka You don't need babel-node to run scripts from an npm package!

can u upload a diff or sample for
react-native app works with fbt ???

[retyui]

@Zbish there is no big difference, you can use this diff

[Zbish]

thanks, will try
and it will work on react-native init app ??

[retyui]

Migrate to the latest version retyui/fbt-getting-started@6d55f47

[vhesener]

thanks, will try
and it will work on react-native init app ??

@Zbish Did you ever get this working? Wondering if I should attempt to integrate into a React Native app or not. I can't seem to find anyone using it successfully

[jrwats]

@vhesener, @Zbish, @retyui: here's some breaking news we haven't announced yet...

We released the Android NPM package and corresponding RN demo-app. Take a look and let @dalmendray know if you hit any issues :)

[vhesener]

I understand there's a demo app that proves this can work, but I think there's a slight disconnect in what we were expecting. I'm willing to help you get there, but I just need to know what steps need to be taken to bring this functionality into an existing React (Native) app.

There seems to be some missing magic to get from here to here. For example, where are the install steps and where are the import statements? Package documentation usually includes a typical cadence in the beginning pages in the docs. Here's a pseudo outline of what I would like to see before I know if I can use a any given package:

---

Installation

1. Add dependencies: yarn add fbt or maybe even yarn add https://github.com/facebookincubator/fbt.
2. add plugin to babel
3. if using RN version < 0.60, do some manual linking stuff

Getting Started

1. import { fbt } from 'fbt';
2. Add some Provider to the app
3. Use the <fbt /> component

---

I understand it's probably not too much effort to clone the demo app and figure out how to massage this to a working state. I'm not being lazy here, but I just want to know this use case is even supported and if you intend to add this type of documentation for future tinkerers. Candidly, if no one is using this package in a traditional way, I am reluctant to be on the fringe. There's strength in numbers with a larger community sharing the same problem sets.

Let me know your thoughts and if we can help. I think many of us would be willing to help you polish the usability if you were to share your vision regarding app integrations.

[jrwats]

@vhesener, @sibelius feel free to comment on this
#126

[Zbish]

thanks, will try
and it will work on react-native init app ??

@Zbish Did you ever get this working? Wondering if I should attempt to integrate into a React Native app or not. I can't seem to find anyone using it successfully

yes working great in react-native app
but it was not easy to set all to work fine

[jrwats]

Documentation

@sibelius

how to translate new generated hash keys?

We should probably add a section giving a bit more detail under the "Translations". I don't think it necessarily belongs in "Getting Started".

React Native

@Zbish @vhesener
Regarding React Native, We should have some docs getting published this week for using the recently released NPM Android package.

[jrwats]

Closing this out for now with
7cfe665 and 12558f6 now live.

@sibelius, @vhesener, if you feel the documentation is still lacking, feel free to re-open.

If you think it can be improved, we'll gladly look at any PRs you have!