# Understanding react-boilerplate

This document is intended to give you a taste of how **`react-boilerplate`** works. It still assumes basic knowledge of React, Redux, and `react-router`. **If you're completely new to React, please refer to** <https://github.com/petehunt/react-howto> **instead!**

This is a production-ready boilerplate, not for beginners. It includes tools to help you manage performance, asynchrony, styling, everything you need to build a **real** application. Before you get your hands dirty with the source code, we'd like you to go through a checklist that will help you determine whether or not you're ready to use this boilerplate. It's not because we're *holier-than-thou*, but rather because we genuinely want to save you the frustration.

## Tech Stack

Here's a curated list of packages that you should be at least familiar with before starting your awesome project. However, the best way to see a complete list of the dependencies is to check **`package.json`**.

### Core

* [React](https://facebook.github.io/react/)
* [React Router](https://github.com/ReactTraining/react-router)
* [Redux](http://redux.js.org/)
* [Redux Toolkit](https://redux-toolkit.js.org/)
* [Reselect](https://github.com/reactjs/reselect)
* [Redux-Saga](https://redux-saga.github.io/redux-saga/)
* [Styled Components](https://github.com/styled-components/styled-components)
* [Typescript](https://github.com/microsoft/TypeScript)
* [React-i18next](https://github.com/i18next/react-i18next)

### Unit Testing

* [Jest](http://facebook.github.io/jest/)
* [react-testing-library](https://github.com/testing-library/react-testing-library)

### Linting

* [ESLint](http://eslint.org/)
* [Prettier](https://prettier.io/)
* [Stylelint](https://stylelint.io/)

## Code/Folder Structure

Let's start with understanding why we have chosen our particular structure. It has been an [evolving discussion](https://github.com/react-boilerplate/react-boilerplate/issues/27), and if you have an afternoon or two we recommend you read the full thread.

In any case, here's the TL;DR:

* You will write your app in the **`src/app`** folder. This is the folder you will spend most, if not all, of your time in.
* Configuration, generators, and templates are in the **`internals`** folder.

### `src/app`

**FOLDER STRUCTURE HERE IS COMPLETELY DETERMINED BY YOU!**

There have been many discussions on how the components and everything else should be structured. Yet, one size never fits all. Therefore, it is entirely personal. This boilerplate dictates **NO** folder structures. Example application provides a simple structure for a simple web application.

### `src/`

Here is the rest of the code that supports your app behind-the-scenes, with features like creating a Redux store, translations, styles & themes, and your Redux state types (or any custom typings)...

### `internals/`

This section you won't be bothering with much. We ship some extra functionalities to help with your web app and here it lies. It contains the code for:

* `internals/extractMessages`: Utils to extract messages into JSON syntax.
* `internals/generators`: Create new components and redux-toolkit slices using CLI.
* `internals/testing`: Testing the internal features like `generators`. You can customize your generators and still test them if they are working

{% hint style="warning" %}
👀 We will dive into more details in the [Building Blocks](https://github.com/react-boilerplate/react-boilerplate-cra-template/tree/f4ac26d099b0a9143272f99e6235245dc062a614/docs/building-blocks/overview/README.md) section.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cansahin.gitbook.io/react-boilerplate-cra-template/understanding-react-boilerplate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.