feat: update OpenFeature React example

[missionmike]

Description

This PR updates the OpenFeature React example for compatibility with a new OpenFeature article.

Notable Changes

• Uses environment variable for the client key.
• Uses environment variable for the API endpoint in order to allow users to test with local Flagsmith docker compose instances (or their own hosted version).
• Updates dependencies.
• Removes unused dependencies.
• Swaps out react-scripts for Vite.

Testing React App

Setup

1. Checkout branch, open the open-feature/react/ folder in your IDE.
2. Copy .env.example to .env file.
3. Use your own Flagsmith client-side environment ID in the REACT_APP_FLAGSMITH_ENVIRONMENT_ID property in the .env file:

Note: leave REACT_APP_FLAGSMITH_API as-is, unless you're testing with a different Flagsmith API endpoint.

4. Run nvm use to use the Node version located in .nvmrc (v22). If you do not have nvm installed, visit here to install: https://github.com/nvm-sh/nvm

5. Run npm i to install dependencies.

Flagsmith Setup

6. Ensure you have a font_size feature set in Flagsmith with a numeric value. 16 is used in this example.

7. Add a Segment Override for example_trait with a value of 1 and set the overridden value to 17.

Run the App

8. Run npm start to start the dev server.

Open the browser, and you should see the following:

Click the "Login" button, which will set the example_trait property in the Flagsmith provider to 1, and you should see a 17 as the font_size value:

Testing checkEnv.js

Within the npm start script in package.json, there's a preliminary run to execute checkEnv.js first. This script checks if the .env.example file is properly copied and configured during initial setup. This is meant to help ensure people are reminded to set up this .env file correctly before they attempt to run this demo.

If the .env.example file is not copied to .env yet, and you run npm start, you should see this error:

If .env.example is copied to .env, but the Flagsmith environment ID is not updated, you should see this error:

TODO

• Update React and other package major versions.
• Test identities locally.
• Update styling of the demo app.

[missionmike]

For prettier formatting (automatic line wrap) on .md files.

[missionmike]

I grabbed the favicon from the main Flagsmith repo.

[missionmike]

This config was generated by viject: https://github.com/bhbs/viject