2020-react 中文文档教程
？？？ 这个加速器在不断改进，请随时提交错误和想法！ ？？？
TheFlyingCoder's 2020 React Accelerator
如果您像我一样构建企业应用程序，则需要完全的架构自由度和代码透明性来设计客户应得的自定义解决方案。
这个框架提供了我发现自己每天都想要的通用工具和代码结构，这样你在开始下一个项目时就有了坚实的基础。
使用我的 npx 安装程序进行尝试：
npx 2020-react
工具
现在是 2020 年，React 有大量的工具选项，但这些是我从事的每个项目的主要工具。
✔️ Typescript - 因为我不能相信你一个人写代码
✔️ Emotion.js - 想象一下 CSS 是否变得更好？ 现在我们到了。
✔️ Prettier/Eslint/Stylelint - 你不敢碰这些配置
✔️ 故事书 - 这将改变您的生活，花时间了解它的所有可能性
✔️ React Hooks - Hello 功能组件和简单的状态管理
✔️ 代码脚手架 - 为什么做同样的事情不止一次？ 让它成为一个节点命令
UI
没有。 因为构建出色的 UI 通常发生在您的客户身边，（当然也有例外）
What to know?
当您第一次尝试这个框架时，仔细看看这些工具，有很多隐藏在引擎盖下的潜力可以随时切换在。
渐进式网络应用
如果您发现自己需要一些离线功能、简单的缓存或在手机上安装的能力，那么 PWA 适合您。
要激活简单的 PWA 设置，只需进入 webpack.config.ts 并将 const isPWA = false 设置为 true 并更新 public/manifest.json 以匹配您应用的详细信息
警告：这将打开服务工作者，这意味着缓存！ 保持您的开发工具打开并关闭缓存，否则您将不会有任何更改。
持久状态
是否曾经需要您的本地状态在刷新后仍然存在？ 现在这比以往任何时候都容易。
只需将 persistenceId 键添加到您的 App.state.ts，并为其指定一个唯一的字符串。 这将创建一个本地存储项目，每次您更改全局状态时都会更新该项目。
请记住，一旦激活，请记住在需要时使用不同的路线将状态重置为正常状态！
异步状态提供程序
您的应用程序首次渲染时是否需要数据？ 然后在 App.tsx 中使用 AsyncStateProvider！
这使您可以传递一个异步函数，该函数可以在呈现应用程序的其余部分之前执行 API 调用或验证路由/数据等。 同时，您可以传递 App.loader.tsx 来呈现完整的页面加载器。
React 将很快通过 Suspense 锁定此功能，但目前我们是这样的。
服务器端渲染
服务器端渲染并不一定很困难！
在此框架中，我们提前注册了所有路由（动态路由除外），因此在 server.tsx 中，我们遍历路由，预渲染 html 并将其设置为服务！
Webpack 在构建时使用，正确编译所有 Typescript 和应用程序文件，在 dist 文件夹中生成 server.js。
您也可以遵循类似的模式，并将所有 html 呈现为每个路由的静态文件。
自定义脚手架
在 /tools 中，您会找到您应该自定义的脚手架代码。
开箱即用，您可以运行 yarn scaffold 来自动创建组件，保持一致性并加快开发速度。
更新 scaffoldUtils/Component 的代码模板以满足您的项目需求，如果您愿意，您可以为 Routes/Api 添加相同的流程，无论您喜欢什么，只需遵循与组件文件夹相同的结构。
VS 代码扩展
总体而言，要获得此框架和工具的最佳体验，您需要进行正确的设置，所以让我分享一些相关的（按字母顺序排列）：
- Bracket Pair Colorizer 2: Unique colours for matching brackets
- Color Highlight: Highlights web colors inline
- ESLint: You know what this does
- Prettier: Same as above
- Stylelint: And again
- Vscode-icons: One of the best icon themes
- Vscode-styled-components: Helps syntax highlting with CSS in JS
???? This accelerator is constantly improving, feel free to submit bugs and ideas! ????
TheFlyingCoder's 2020 React Accelerator
If you are building enterprise applications like me, you need full architectural freedom and code transparency to design the custom solutions your client's deserve.
This framework delivers the common tooling and code structures I found myself wanting day to day, so that you have a strong foundation when starting your next project.
Try it out using my npx installer:
npx 2020-react <project-name>
The Tools
It's 2020 and there are a whole wealth of tooling options for React, but these are the staples for every project I work on.
✔️ Typescript - Because I can't trust you to code alone
✔️ Emotion.js - Imagine if CSS got better? Now here we are.
✔️ Prettier/Eslint/Stylelint - Don't you dare touch these configs
✔️ Storybook - This will change your life, take the time to learn all it's possibilities
✔️ React Hooks - Hello functional components and simple state management
✔️ Code Scaffolding - Why do the same thing more than once? Make it a node command
The UI
There is none. Because building a great UI usually happens with your client by your side, (There are exceptions of course)
What to know?
When you first try out this framework have a good look around the tools, there is a lot of potential hidden under the hood ready to be switched on.
Progressive web app
If you find yourself needing some offline functionality, simple cacheing, or the ability to install on a phone, PWA's are for you.
To activate the simple PWA settings, just go into webpack.config.ts and flip const isPWA = false to true and update the public/manifest.json to match your app's details
WARNING: This will turn on service workers, which means cacheing! keep your dev tools open and cache off otherwise you won't any changes.
Persistent State
Ever needed your local state to stick around after a refresh? Now this is easier than ever.
Just add the persistenceId key to your App.state.ts, and give it a unique string. This will create a local storage item which is updated every time you alter the global state.
Remember once this is active remember to use your different routes to reset the state back to normal when you need it!
Async State provider
Does your app require data for it's first render? then use the AsyncStateProvider in App.tsx!
This lets you pass an Async function that can do API calls or validate routes/data etc before rendering the rest of your app. In the meantime you can pass App.loader.tsx to render a full page loader.
React will have this functionality locked down soon with Suspense, but for the time being here we are.
Server Side Rendering
Server side rendering doesn't have to be difficult!
In this framework we register all our routes ahead of schedule (with the exception being dynamic routes), so in server.tsx we loop through our routes, pre-render the html and set it up to be served!
Webpack is used at build time, to compile all the Typescript and application files correctly, to generate a server.js in your dist folder.
You could also follow a similar pattern, and render all the html to static files for each route.
Custom scaffolding
in /tools you'll find scaffolding code which you SHOULD customise.
Out of the box you can run yarn scaffold <ComponentName> to automate component creation, keeping consistency and speeding up development.
Update the code template of scaffoldUtils/Component to suit your project needs and if you want You can add the same flow for Routes/Api's, whatever you like, just follow the same structure as the component folder.
VS Code Extensions
To have the best experience with this framework and the tools in general, you need to have the right setup, so let me share some relevant ones (Alphabetical):
- Bracket Pair Colorizer 2: Unique colours for matching brackets
- Color Highlight: Highlights web colors inline
- ESLint: You know what this does
- Prettier: Same as above
- Stylelint: And again
- Vscode-icons: One of the best icon themes
- Vscode-styled-components: Helps syntax highlting with CSS in JS
