You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 6, 2025. It is now read-only.
Copy file name to clipboardExpand all lines: docs/building-blocks/README.md
+3-5Lines changed: 3 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,8 @@ First we have to look at what is happening when react starts its life with out `
9
9
It is one of the biggest files of the boilerplate. It contains all the global setup to make sure your app runs smoothly. Let's break its contents down:
10
10
11
11
-`react-app-polyfill` is imported to enable compatibility with many browsers and cool stuff like generator functions, Promises, etc.
12
-
- A `history` object is created, which remembers all the browsing history for your app. This is used by the ConnectedRouter to know which pages your users visit. (Very useful for analytics, by the way.)
13
12
- A redux `store` is instantiated.
14
-
-`ReactDOM.render()` not only renders the [root react component](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/App/index.js) called `<App />`, of your application, but it renders it with `<Provider />`, `<ConnectedRouter />`.
13
+
-`ReactDOM.render()` not only renders the [root react component](https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/App/index.js) called `<App />`, of your application, but it renders it with `<Provider />`.
15
14
- Hot module replacement is set up via [Webpack HMR](https://webpack.js.org/guides/hot-module-replacement/) that makes all the reducers, injected sagas, components, containers, and i18n messages hot reloadable.
16
15
- i18n internationalization support setup.
17
16
-`<Provider />` connects your app with the redux `store`.
@@ -40,10 +39,9 @@ The store is created with the `createStore()` factory, which accepts three param
40
39
2.**Initial state:** The initial state of your app as determined by your reducers.
41
40
3.**Middleware/enhancers:** Middlewares are third party libraries which intercept each redux action dispatched to the redux store and then... do stuff. For example, if you install the [`redux-logger`](https://github.com/evgenyrodionov/redux-logger) middleware, it will listen to all the actions being dispatched to the store and print previous and next state in the browser console. It's helpful to track what happens in your app.
42
41
43
-
In our application we are using two such middleware.
42
+
In our application we are using a single middleware.
44
43
45
-
1.**Router middleware:** Keeps your routes in sync with the redux `store`.
46
-
2.**Redux saga:** Used for managing _side-effects_ such as dispatching actions asynchronously or accessing browser data.
44
+
1.**Redux saga:** Used for managing _side-effects_ such as dispatching actions asynchronously or accessing browser data.
Copy file name to clipboardExpand all lines: docs/building-blocks/css.md
+18Lines changed: 18 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -61,3 +61,21 @@ _(The CSS rules are automatically vendor prefixed, so you don't have to think ab
61
61
🧙**Tips:** Importing from `styled-components/macro` will enable some features you can [see here](https://styled-components.com/docs/tooling#babel-macro)
62
62
63
63
{% endhint %}
64
+
65
+
## Media queries
66
+
67
+
Type-safe media queries can be complicated if you haven't mastered the typescript. Therefore we include a [media utility file](../../src/styles/media.ts) to make things easier for you.
Copy file name to clipboardExpand all lines: docs/building-blocks/routing.md
+3-24Lines changed: 3 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,10 @@
1
1
# Routing
2
2
3
3
`react-router` is the de-facto standard routing solution for react applications.
4
-
The thing is that with redux and a single state tree, the URL is part of that
5
-
state. `connected-react-router` takes care of synchronizing the location of our
6
-
application with the application state.
7
4
8
-
(See the [`connected-react-router` FAQ](https://github.com/supasate/connected-react-router/blob/master/FAQ.md)
9
-
for more information)
5
+
## Why not using [connected-react-router](https://github.com/supasate/connected-react-router)?
6
+
7
+
There is detailed explanation [here](https://reacttraining.com/react-router/web/guides/redux-integration/deep-integration). In short, it is not suggested to integrate route with redux, simply because it shouldn't be needed. There are other ways of navigating as explained there.
10
8
11
9
## Usage
12
10
@@ -20,25 +18,6 @@ Top level routes are located in `src/app/index.tsx`.
20
18
21
19
If you want your route component (or any component for that matter) to be loaded asynchronously, use container or component generator with 'Do you want to load resources asynchronously?' option activated.
22
20
23
-
To go to a new page use the `push` function by `connected-react-router`:
24
-
25
-
```ts
26
-
import { push } from'connected-react-router';
27
-
28
-
dispatch(push('/path/to/somewhere'));
29
-
```
30
-
31
-
You can do the same thing in a saga:
32
-
33
-
```ts
34
-
import { push } from'connected-react-router';
35
-
import { put } from'redux-saga/effects';
36
-
37
-
exportfunction* mySaga() {
38
-
yieldput(push('/home'));
39
-
}
40
-
```
41
-
42
21
## Child Routes
43
22
44
23
For example, if you have a route called `about` at `/about` and want to make a child route called `team` at `/about/our-team`, follow the example
This docs is still awaiting help 😢If you want to help with this documenation please contact to us
3
+
### Easy 5-Step Deployment Process
4
+
5
+
_Step 1:_ Create a `netlifty.toml` file in the root directory of your project and copy this code below. Edit these settings if you did not follow the boilerplate structure. More settings available here (https://docs.netlify.com/configure-builds/file-based-configuration/#sample-file)
6
+
7
+
```
8
+
[build]
9
+
# Directory to change to before starting a build.
10
+
# This is where we will look for package.json/.nvmrc/etc.
11
+
base = "/"
12
+
13
+
# Directory (relative to root of your repo) that contains the deploy-ready
14
+
# HTML files and assets generated by the build. If a base directory has
15
+
# been specified, include it in the publish directory path.
16
+
publish = "./build"
17
+
18
+
# Default build command.
19
+
command = "npm run build"
20
+
21
+
# The following redirect is intended for use with most SPAs that handle routing internally.
22
+
[[redirects]]
23
+
from = "/*"
24
+
to = "/index.html"
25
+
status = 200
26
+
```
27
+
28
+
_Step 2:_ Commit your code and push your latest updates to a GitHub repository.
29
+
30
+
_Step 3:_ Register or Login in at Netlify (https://app.netlify.com/).
31
+
32
+
_Step 4:_ In your account | team page click `New site from git` then chose your repository.
33
+
34
+
_Step 5:_ Click deploy.
35
+
36
+
37
+
> Note: No need to change any setting in the last step as `netlify.toml` overwrites these settings.
38
+
39
+
Now your code will be deployed automatically to netlify on every push to the default branch of your repository.🥳🥳
-[Using global reducers instead of injecting](#load-reducers-optimistically)
4
+
-[Keeping up-to-date with the template](keeping-up-to-date-with-the-template)
5
+
-[Are there any examples or tutorials?](examples-and-tutorials)
6
+
7
+
## Using reducers optimistically
8
+
9
+
If you have containers that should be available throughout the app, like a `NavigationBar` (they aren't route specific), you need to add their respective reducers to the root reducer with the help of `combineReducers`.
Eventhough the template is an npm package it's not possible for you to **just update** the package, since you start CRA with this template initially. The suggested way to keep an eye on the [CHANGELOG](../../CHANGELOG.md) file. All the changes that **concerns** the template user will be displayed there, like bug fixes, documentation updates, new features etc... You can check each change's commits and file changes and see what has been changed. Then, the decision is yours if you want to apply those to your code.
33
+
34
+
## Examples & Tutorials
35
+
36
+
Take a look our [another 'how to' repo](https://github.com/react-boilerplate/cra-template-examples) for examples and common web app implementations & patterns
0 commit comments