<commit_before># generator-emakinacee-react

_! Work in progress !_

The EMAKINA CEE React generator is built on top of react-scripts used by 
[Create React App](https://github.com/facebookincubator/create-react-app).
This way you can utilize all the awesome features of create-react-app.

And in addition you have access to some even more awesome features.


## Getting started

### 1. Install the generator
```sh
npm install -g generator-emakinacee-react
```
Also make sure you have installed [Yarn](https://yarnpkg.com/en/) 
and the [Yeoman](http://yeoman.io/) command line utility `yo`.
```sh
npm install -g yarn yo
```

### 2. Create your project
```sh
yo emakinacee-react my-awesome-project
```
This command runs the generator which creates a new folder called `my-awesome-project` 
and sets up all the files and dependencies needed to take off.

### 3. Take off
```sh
cd my-awesome-project
npm start
```


## Styles (SCSS)
By default the support for SCSS is enabled and we recommend to use it.

Just add a .scss instead of a .css file for your components.
The SCSS files are watched and compiles to a CSS file right next to it.
As components still import the CSS all the styles will be part of the application.

### Variables and Tools
Variables, Settings and tools which can be used by all components are placed in `./src/scss`.

If you add new files add an import to _base-imports.scss which then gets imported by
a components SCSS file to get access to all settings and tools.

### SASS MQ
To work with Media Queries we have included [SASS-MQ](Progressive Web App).
The breakpoints are configured in `./src/scss/settings/_settings.breakpoints.scss`.<commit_msg>change readme<commit_after># generator-emakinacee-react

_! Work in progress !_

The EMAKINA CEE React generator is built on top of react-scripts used by 
[Create React App](https://github.com/facebookincubator/create-react-app).
This way you can utilize all the awesome features of create-react-app.

And in addition you have access to some even more awesome features.


## Getting started

### 1. Install the generator
```sh
npm install -g generator-emakinacee-react
```
Also make sure you have installed [Yarn](https://yarnpkg.com/en/) 
and the [Yeoman](http://yeoman.io/) command line utility `yo`.
```sh
npm install -g yarn yo
```

### 2. Create your project

For the [Basic Setup](https://github.com/emakina-cee-oss/generator-emakinacee-react#basic-setup) 
run the generator and provide the project name.
```sh
yo emakinacee-react my-awesome-project
```
The generator then creates a new folder called `my-awesome-project` 
and sets up all the files and dependencies needed to take off.

If you need the [SPA Setup](https://github.com/emakina-cee-oss/generator-emakinacee-react#spa-setup) 
just add the `--spa` option flag to the command.
```sh
yo emakinacee-react my-awesome-project --spa
```

### 3. Take off
```sh
cd my-awesome-project
npm start
```


## Basic Setup
The basic setup simply provides a ready to go project structure for React
without any fancy additions.


## SPA Setup
For Single Page Applications the basic react stack will be extended with helpful libraries and
features:

+ Routing
+ [PWA enhancements](https://github.com/emakina-cee-oss/generator-emakinacee-react#pwa-enhancements)
+ [State Management](https://github.com/emakina-cee-oss/generator-emakinacee-react#state-management)



## Styles (SCSS)
By default the support for SCSS is enabled and we recommend to use it.

Just add a .scss instead of a .css file for your components.
The SCSS files are watched and compiles to a CSS file right next to it.
As components still import the CSS all the styles will be part of the application.

### Variables and Tools
Variables, Settings and tools which can be used by all components are placed in `./src/scss`.

If you add new files add an import to _base-imports.scss which then gets imported by
a components SCSS file to get access to all settings and tools.

### SASS MQ
To work with Media Queries we have included [SASS-MQ](Progressive Web App).
The breakpoints are configured in `./src/scss/settings/_settings.breakpoints.scss`.


## PWA Enhancements
...


## State Management
...
{'fraction_non_alphanumeric': 0.09180014343772412, 'fraction_numerical': 0.0014343772412144394, 'mean_word_length': 4.133742331288343, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5571384', 'n_tokens_mistral': 1281, 'n_tokens_neox': 1214, 'n_words': 549}