Skip to content

Commit 6577538

Browse files
committed
docs(readme): clean up
1 parent 6b5104f commit 6577538

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h1 align="center">
2-
<img src="https://user-images.githubusercontent.com/266302/27487896-6a8cc4fa-5835-11e7-8061-b481ad72a065.png" alt="loadable-components" title="loadable-components" width="300">
2+
<img src="https://user-images.githubusercontent.com/266302/27487896-6a8cc4fa-5835-11e7-8061-b481ad72a065.png" alt="loadable-components" title="Loadable Components" width="300">
33
</h1>
44
<p align="center" style="font-size: 1.2rem;">React code splitting made easy. Reduce your bundle size without stress ✂️✨.</p>
55

@@ -22,15 +22,15 @@ npm install loadable-components
2222
```
2323

2424
Webpack allows modern code splitting via the [dynamic `import` syntax](https://webpack.js.org/guides/code-splitting/#dynamic-imports).
25-
`loadable-components` makes it possible to use that awesome feature with React components. It is compatible with **`react-router`** and **server side rendering**. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.
25+
Loadable Components makes it possible to use that awesome feature with React. It is compatible with **`react-router`** and **server side rendering**. The API is designed to be as simple as possible to avoid useless complexity and boilerplate.
2626

27-
We use it in production on [our website](https://www.smooth-code.com/), it's open source https://github.com/smooth-code/website.
27+
We use it in production on [smooth-code.com](https://www.smooth-code.com/), it's open source https://github.com/smooth-code/website.
2828

2929
## Motivation
3030

3131
Splitting your React application and rendering it server-side is complicated. Several have tried, [react-router gave up](https://reacttraining.com/react-router/web/guides/code-splitting), today only [next.js](https://github.com/zeit/next.js/) is doing it right. First I decided to not do it (afraid by react-router 😱) on my website. But then I think "Fuck code splitting shouldn't be a problem today, let's do it.".
3232

33-
I tried several solutions, [react-async-components](https://github.com/ctrlplusb/react-async-component), [react-loadable](https://github.com/thejameskyle/react-loadable) and for each of them server-side rendering is very complicated. I decided to create `loadable-components` with for main goal: reducing API in order to make it as easier as possible for the developer. I inspired from [`styled-components`](https://www.styled-components.com/) and [Apollo](http://dev.apollodata.com/) for the API and `loadable-components` was born.
33+
I tried several solutions, [react-async-components](https://github.com/ctrlplusb/react-async-component), [react-loadable](https://github.com/thejameskyle/react-loadable) and for each of them server-side rendering was very complicated. I decided to create Loadable Components with for main goal: reducing API in order to make it as easier as possible for the developer. I inspired from [Styled Components](https://www.styled-components.com/) and [Apollo](http://dev.apollodata.com/) for the API.
3434

3535
## Getting started
3636

@@ -327,7 +327,7 @@ To have a different configuration for client and server, you can use [Babel env
327327

328328
An alternative to server-side rendering is [snapshoting](https://medium.com/superhighfives/an-almost-static-stack-6df0a2791319). Basically, you crawl your React website locally and you generate HTML pages.
329329

330-
You need to instruct your snapshot solution to save state of `loadable-components` to the `window` in the end.
330+
You need to instruct your snapshot solution to save state of Loadable Components to the `window` in the end.
331331

332332
`getState()` will return `{__LOADABLE_STATE__: {...} }`, and this should be converted to `<script>window.__LOADABLE_STATE__ = {...}</script>` in the resulting html.
333333

@@ -484,12 +484,12 @@ The main difference between these two libraries is the server-side rendering app
484484
* `react-loadable` requires a webpack plugin and a babel plugin. I think it's too complicated and we should not rely on it.
485485
* `react-async-component` has a better approach, analyzing tree + context, it also rely on another library. I like the idea but not the API.
486486

487-
`loadable-components` has a simpler approach, it relies on [dynamic-import-specification](https://github.com/tc39/proposal-dynamic-import) and assumes that [it is working for node and Webpack](https://babeljs.io/docs/plugins/syntax-dynamic-import/). Then it analyzes the tree server-side and waiting for every modules to be loaded. Client-side it loads modules before rendering the application. The API is as simple as possible, no context, no magic variable.
487+
Loadable Components has a simpler approach, it relies on [dynamic-import-specification](https://github.com/tc39/proposal-dynamic-import) and assumes that [it is working for node and Webpack](https://babeljs.io/docs/plugins/syntax-dynamic-import/). Then it analyzes the tree server-side and waiting for every modules to be loaded. Client-side it loads modules before rendering the application. The API is as simple as possible, no context, no magic variable.
488488

489489
## Inspirations
490490

491-
* API inspired by [styled-components](https://github.com/styled-components/styled-components)
492-
* React tree traversing from [react-apollo](https://github.com/apollographql/react-apollo)
491+
* API inspired by [Styled Components](https://github.com/styled-components/styled-components)
492+
* React tree traversing from [React Apollo](https://github.com/apollographql/react-apollo)
493493

494494
## MIT
495495

0 commit comments

Comments
 (0)