🪕 1. 跨应用重用 React 组件：Bit.dev

对所有内容使用 React 带来了另一个巨大的优势-组件可以在不同的应用程序和页面中重复使用，以帮助我们更快地发布并保持一致的 UI。 这意味着您可以一次构建组件，并将它们用于新的合成，即使它们用于不同的平台。

单个产品可能具有一个 Web 应用程序，一个静态营销站点，一个 iOS 应用程序和一个 Android 应用程序。 好多啊！ 为了使事情简单和负担得起，我们必须在这些项目之间重用代码。 这就是云组件中心 Bit.dev 对我们最大的帮助。

通过 Bit.dev，可以轻松地从任何代码库发布 React 组件，从而使每个 React 项目迅速成为可重用组件在其他所有项目中使用的另一个来源。

Bit 不仅通过简化发布，而且通过提供一个直观的平台来记录，组织和渲染可重用组件，从而帮助我们重用了组件。 这很重要，因为不容易找到的组件不会被经常重复使用。

[https://bit.dev/](https://bit.dev/) Bit is a scalable and collaborative way to build and reuse components. It’s everything you need from local development to cross-project integrations.

🪕 2. 静态网站：盖茨比

Gatsby 是基于 React 的静态网站生成器，静态网站是一种提供固定内容的网站，通常由诸如 markdown 的标记语言转换为 HTML。 静态站点之所以受欢迎，是因为它不需要后端请求即可从数据库检索内容。 内容已经构建，您只需要将其提供给用户即可。

静态站点也更易于构建，因为它们不需要后端即可。 在静态站点中，HTML 是从 CDN 而不是服务器提供的。 非常适合不需要大量后端处理功能的多种类型的网站，例如博客，投资组合网站，画廊，文档网站。

https://www.gatsbyjs.org/ Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

🪕 3. React for mobile（Android 和 iOS）：React Native

PhoneGap, WebView， Ionic

React Native 将 JavaScript 代码转换为本地代码的移动应用程序框架，使您的应用程序可以像本地应用程序一样运行，而不必使用 WebView。

https://reactnative.dev/ Create native apps for Android and iOS using React.

• Android development Language: Java
• iOS development Languages: swift, Objective-C

🪕 4. React for Desktop：Electron

Electron 是一个开放源代码框架，用于构建针对 Windows，macOS 和 Linux 的跨平台桌面应用程序。 在引擎盖下，Electron 使用了 Chromium，Chromium 是 Chrome 操作系统和 Google 所构建的 Chrome 网络浏览器背后的开源项目。

🪕 5. React SSR 框架：NextJS

服务器端渲染是一种优化 React 应用的性能和 SEO 的方法。 NextJS 实际上是一个完整的 React 框架，具有很多好处，而 SSR 就是其中之一。 通过使用 NextJS，您可以使用尽可能少的代码行创建一个预渲染的 React 应用。

🪕 Apollo + GraphQL

• HOC
• Hooks (react-hooks)
• modules (redux)
• Provider (context)
• Subscription / Pubilsher
• children(props, state) -> ({}) => {}

📑 react-admin

• authProvider
• dataProvider
• i18nProvider
• themeProvider
• layoutProvider

📑 nestJS vs Express

Express is meant for solving problems like routing, body parsing, etc.

NestJS is meant for better structuring your code - it allows you to write clearer, reusable code, adds some higher level constructs like interceptors, filters, etc. It does that, however using Express’ middleware.

📑 Service Mesh

微服务化、多语言和容器化发展的趋势，企业迫切需要一种轻量级的服务发现机制，ServiceMesh 正是迎合这种趋势诞生，当然这还和一些大厂(如 Google/IBM 等)的背后推动有关。

📑 PWA

PWA（Progressive Web App）是一种理念，使用多种技术来增强 web app 的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。

🪕React, Node

📑 🍺 CSS，animation 库 @material-ui

📑 🍺 前端路由 react-router-dom

📑 🍺 前端存储 redux

📑 🍺 代理 http-proxy-middleware

📑 🍺 表单处理 React-Hook-Form, FormData, File Upload 处理

1. form submit with Content-Type=application/json + JSON.stringify, upload-file form use Content-Type: multipart/form-data

   fetch("/api/account/signup", {
   	method: "POST",
   	headers: {
   		"Content-Type": "application/json",
   	},
   	body: JSON.stringify(this.state), //formData
   });

2. Server-side use body-parser:

   // parse application/json
   app.use(bodyParser.json());

3. express uses parseFormdata:

   router.post("/signup", (req, res, next) => {
   	// this is the solution for 'formData'.
   	parseFormdata(req, (err, data) => {
   		console.log("formData, multipart/form-data: ", data.fields, data.parts);
   	});
   });

📑 🍺 表格处理 material-table

📑 🍺 DBMS: MySQL + Sequelize

📑 🍺 cross-platform document-oriented: MongoDB

📑 🍺 jsexcel / grapecity + read-excel-file

📑 🍺 文件上载 + Multer

📑 🍺 TODO: docx

📑 🍺 PDF + pdfkit

📑 🍺 REST: request.js, node-fetch

isomorphic-fetch: 4,881,045 node-fetch: 16,710,148

📑 🍺 邮件 nodemailer

📑 🍺 日期时间：moment, date-fns, dayjs

📑 🍺 Flutter - 谷歌跨平台移动应用开发框架

material-design + Dart

📑 🍺 Ionic - 开源移动应用程序开发框架, webkit

📑 🍺 网络开发资源

The most popular and rank #1 React components for UI.

Facebook React + Google Material-design, the golden pair.

Flutter - Dart + Material-Design

🀄️🐶 ssl certificate, https

🀄️🐶 jexcel, grapecity

• open xml
• openxmlsdkjs
• Handsontable
• jexcel
• ag-Grid (不是很好用，比较排斥)
• ssl certificates in .ssl/ locally.
• docz -在docker里面运行依赖服务: [Ctrl + Shift + Esc]: 将 mysql57, mongodb server, redis server 从 Windows 的 services 自动运行 中去掉，用 docker 容器里的替代。
• react-form-hook, formick/yup

🀄️🐶 UI

• material-ui
• emoji 汉字
• awesome fonts
• sass, less
• bootstrap
• grid.js
• table.js
• loading (load.io?)
• ⌛ 用 ProTip

🀄️🐶 扩展微服务

• Mammoth.js
• JSZip
• turndown

📑 Pending

• gateway: app.use(express.urlencoded({ extended: false }));

📑 Heroku hosting

make news-api-react hosted in heroku

🪕 Node

• express
• cheerio
• nodemailer
• socket.io
• faker
• morgan
• http-errors
• body-parser
• sequelize
• passport
• dotenv, cross-env
• multer
• axios
• cors
• helmet: a middleware package. It can set appropriate HTTP headers that help protect your app from well-known web vulnerabilities (see the docs for more information on what headers it sets and vulnerabilities it protects against).

🪕 11 个精选的 React JS 框架

• Create React App
• Material Kit React
• Shards React
• Styled Components
• Redux
• React Virtualized
• React DnD
• React Bootstrap
• React Suite
• PrimeReact
• React Router

🪕 JS libraries for fast and simple microservices

18 Node.js and JavaScript libraries for fast and simple microservices

• Feathers is an open source project with a big collection of third-party plug-ins that creates quick REST APIs with just a few lines of configuration

  改用gitbook

• KrakenD is an aggregator that will help you organize the communications with the back end and all of the responses, making life simpler for the front end, which has to make just one call to KrakenD.

  代理

• Puppeteer is a headless version of the web browser that runs inside Node.js, waiting for a URL to go to work. You can use Puppeteer to perform lots of background work to support the various microservices.

  像web worker吗？

• Swagger offers a standard format for designing REST APIs.

  改用gitbook吧。

🪕 JavaScript Ecosystem