This version is currently being update for 2018. The previous react-lego, with older version of tech and upgrade paths, can be found react-lego-2017
React Lego 2018
The building blocks of a react app
This repo demonstrates how to plug in other technologies, one block at a time, into React.
Hear me out!
The concept is to use GitHub's branch-comparison screens to quickly demo the code changes that are needed for only the technology you are interested in.
A client-side React app which is fully tested and production ready on the master branch.
From Master, Server-side Rendering (SSR) has been added with Koa v2 (for Express see react-lego-2016).
Every other branch then adds one more technology, with the smallest possible changes.
All branches, have been setup with continuous deployment.
>> More about the react-lego concept
What else the Base React app have?
It is production ready and fully tested :
- CSS (Sass-loader, Autoprefixer)
- tests (unit, functional, end-to-end + smoke)
- Code linting with eslint (CSS + JS linting)
- CI integration with CircleCI
- Continuous deployment with Heroku
All other branches include the above and build on this base.
Technology to Add:
All branches use babel v7, React v16.2, react-router v4, Webpack v4 unless otherwise stated
The Code changes column is where you go if you want to see how the code changed from the previous branch.This is a great place to see how to do it yourself.
| Category | Code changes | App size (node_modules) | Comparator | kb | |
|---|---|---|---|---|---|
| Client-side Rendering | React | 23kb (+152kb) | |||
| Server-side Rendering | add Koa v2 | 22kb (+153kb) | |||
| CSS | add CSS Imports | 22kb (+153kb ) | CSS Modules | >> More about adding CSS | |
| State Management | add Redux | 22kb (+188kb) | >> More about adding Redux | ||
Previous branches still to be updated
These branches are from React Lego 2017 and are on my 'todo' list to update!
| Category | New Tech | Code changes | Client-side App (kb) | Comparator | kb | |
|---|---|---|---|---|---|---|
| Client-side Rendering | Preact > Preact code vs React | tbc | >> More about adding Preact | |||
| State Management | Async routes | add async routes | tbc | >> More about adding Promise middleware | ||
| Assets | Importing SVGs | |||||
| Assets | Responsive Images with PNGs | |||||
| Data API | GraphQL | add GraphQL | tbc | Apollo | tbc |
What else ?
I have a few articles that may be interesting to read covering all the branches in this repo: >> wiki
** Something missing? Please see react-lego-2017 or react-lego-2016 or submit a feature request!**
-
react-dom.js Hello, World! 你好，世界！ Today, I will be taking another intermission from the current project I am working on to go over the basics of React.js. I realized that I have never really touched o
-
react 组件名称重复 乐高积木可以教给我们关于React应用中的重用 (What Legos Can Teach Us About Reuse in React Apps) React is a component library. So React makes it easy to break your UI down into composable pieces. The question
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里，它似乎与源代码中的 “ hacky”导出机制有关，但尚
-
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
-
我已经改用react Native制作跨平台应用程序（虽然没有制作）。我只是想要一个答案，我的问题，反应和反应之间的区别。我在网上搜索了一下，但没有找到合适的答案。
-
问题内容： 与 哪个更好，为什么？ 还是除了以后编写更少的代码外没有其他区别？ 写作是否意味着只导入Component对象？ 问题答案： 让您代替。它减少了React名称空间的键入和重复，这通常是一种理想的现代编码约定。 此外，Webpack 2和Rollup之类的工具会“摇晃”，这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/，您可以保证所有React的源代码都将被捆绑。使用，某些工具
-
本文向大家介绍react-native 启动React Native Packager，包括了react-native 启动React Native Packager的使用技巧和注意事项，需要的朋友参考一下 示例 在最新版本的React Native上，无需运行打包程序。它将自动运行。 默认情况下，这将在端口8081上启动服务器。要指定服务器所在的端口
-
我正在使用“React admin”创建一个管理界面（前端）。我正在使用spring boot作为我的REST API。我的React应用程序的url是：“http://localhost:3000”。我的spring boot API的url是：“http://localhost:8080”。 下面是CORS配置的spring boot代码，它在一个单独的类中，称为CORSCONFIG： 下面是