This project was bootstrapped with Create React App.

Purpose of this example to demonstrate a minimal setup to use LisanJS with ReactJS.

npx create-react-app 03-hello-world-react

cd ./03-hello-world-react

touch .lisanrc

First run the application to see if everything works fine:

npm run dev

If everything works fine, continue as below.

1.1. Install Lisan:

npm install lisan
npm install lisan-cli --save-dev

1.2. Add scripts to package.json:

{
  // ...
  "scripts": {
    "lisan:compile": "lisan compile"
    // ..rest of the scripts
  }
}

1.3. Add dictionaries to .gitignore (Optional)

node_modules/

public/dictionaries/

Update the .lisanrc config as below:

{
  "compile": {
    "inputDir": "src/translations",
    "outputDir": "public/dictionaries",
    "returnArray": true
  }
}

returnArray option makes dictionaries compatible with JSX. Learn more at JSX Interpolation

mkdir -p src/translations/en/ && touch src/translations/en/main.json
mkdir -p src/translations/tr/ && touch src/translations/tr/main.json

Migrate content from ./src/App.js to src/translations/en/main.json.

{
  "locale": "en",
  "entries": {
    "edit.message": "Edit ${codeElement} and save to reload.",
    "learn.lisan": "Learn LisanJS"
  }
}

You can see the differences done to ./src/App.js from here.

To run lisan compiler in watch mode you can use -w flag.

npm run lisan:compile -- -w

npm run dev