React App SDK
Everything you love about Create React App plusserver-side code support (SSR, GraphQL API, etc) and config overrides (Babel, Webpack, etc.). Seethe demo project.
React App SDK is intended to be used as a drop-in replacement for react-scripts NPM module.If you want to add server-side code into your application built with Create React App, all you haveto do is to replace react-scripts dev dependency with react-app-tools plus provide one moreentry point for Node.js as demonstrated below:
Directory Layout
.
├── build/ # Compiled output
├── src/ # Universal application source code
│ ├── components/ # Shared React.js components
│ │ ├── /App/ # - The top-level React component
│ │ ├── /Button/ # - Some other UI element
│ │ └── ... # - etc.
│ ├── server/ # Node.js app
│ │ ├── ssr.js # - Server-side rendering, e.g. ReactDOMServer.renderToString(<App />)
│ │ ├── api.js # - GraphQL API endpoint
│ │ └── index.js # - Node.js app entry point
│ └── index.js # Client-side app entry point, e.g. ReactDOM.hydrate(<App />, container)
└── package.json # List of project dependencies and NPM scripts
package.json
{
"main": "build/server.js",
"engines": {
"node": ">=8.10"
},
"dependencies": {
+ "express": "^4.6.14",
"react": "^16.8.4",
"react-dom": "^16.8.4"
},
"devDependencies": {
- "react-scripts": "^1.1.1"
+ "react-app-tools": "^3.1.0-preview.7"
},
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app start",
- "build": "react-scripts build",
+ "build": "react-app build",
- "test": "react-scripts test"
+ "test": "react-app test"
}
}
src/index.js - Client-side rendering
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.hydrate(<App />, document.getElementById('root'));
src/server/index.js - Server-side rendering and/or API endpoint
const path = require('path');
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('../components/App');
const stats = require('./stats.json');
const app = express();
app.get('*', (req, res) => {
res.send(`
<html>
<body>
<div id="root">${ReactDOMServer.renderToString(<App />)}</div>
${stats.entrypoints.main.assets.map(
src => `<script src="${src}"></script>`
)}
</body>
</html>
`);
});
if (process.env.NODE_ENV === 'production') {
app.listen(process.env.PORT || 8080);
} else {
module.exports.default = app;
}
You can launch the app in development mode by running:
$ npm install
$ npm start
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.
For more information refer to Create React App documentation:
- Getting Started – How to create a new app.
- User Guide – How to develop apps bootstrapped with Create React App.
Join our Telegram chat for support and feature requests - https://t.me/reactapp
How to Customize
Create webpack.config.js file in the root of your project that extends thedefault Webpack configuration. For example:
module.exports = () => {
const [
browserConfig,
serverConfig,
] = require('react-app-tools/config/webpack');
return [
browserConfig,
{
...serverConfig,
plugins: {
...serverConfig.plugins.concat(
new LimitChunkCountPlugin({ maxChunks: 1 })
),
},
},
];
};
Backers
Love React App SDK? Help us keep it alive by donatingfunds to cover project expenses!
Contribute
Help shape the future of React App SDK by joining our communitytoday, check out the open issues, submit newfeature ideas and bugreports, send us pullrequests!
License
MIT © 2016-present Facebook, Kriasoft.
-
问题 最近使用create-react-app创建了一个项目，然后使用npm run eject使配置文件暴露 此时，产生了错误 Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are “development”, “te
-
在create-react-app 中配置proxy代理 proxy，默认为NULL，类型为URL，一个为了发送http请求的代理 在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要proxy代理来处理 create-react-app < 2.0 package.json 中配置 "proxy":{ "/api/**":{ "target":"https:
-
问题内容： 我注意到可以这样导入： …或像这样： 第一个导入模块中的所有内容（请参阅：导入整个模块的内容） 第二个仅导入模块导出（请参阅：导入默认值） 似乎这两种方法是不同的，并且根本上是不兼容的。 为什么它们都起作用？ 请参考源代码并解释该机制…我有兴趣了解其工作原理。 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： 下面是
-
主要内容：React 实例React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。 使用方法 绑定一个 ref 属性到 render 的返回值上： 在其它代码中，通过 this.refs 获取支撑实例: 完整实例 你可以通过使用
-
主要内容：React 实例React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。 以下实例演示了获取 Github 用户最新 gist 共享描述: React 实例 cla