如何使用ReactJS为web服务构建前端多页网站
我最初的网站是在中开发的，但现在客户想要将后端和前端分开，就像他希望后端完全像基于api的web服务那样工作一样。
因此，我决定使用Lumen构建一个示例博客Api服务，这个api具有以下特性:登录、注册、Post博客、Post注释
我使用Postman测试了api内部操作，一切都很好。
我对前端框架的概念很陌生，所以决定看一看ReactJS，虽然我很喜欢这个框架，但是现在我无法理解使用webpack + bundle + reactjs如何为我的api-服务创建一个多页的前端网站。
计划是在其他服务器上托管api-service，并在其他服务器上托管前端网站。
我的问题是基于我的目标，我对ReactJS的期望是对的吗？还是应该使用AngularJS或其他前端框架？
前端网站将有多个页面，那么我如何决定在特定页面上呈现哪个react组件，除了Apache，我还需要安装任何其他web服务器才能使React工作吗？
我遇到的所有教程似乎只提供一个页面应用程序，其中使用webpack将所有的反应性组件合并到一个bundle.js文件中。
但是，我的要求是为登录、注册、发布博客、查看博客帖子等提供不同的页面，所以如果ReactJS适合这样的要求，那么如何使用reactjs来实现呢?如果不适合，请随意建议一些带有前端框架的技术堆栈，我可以将其用于api-service。
下面是api-service Linux Lumen框架Apache MySQL的currect技术栈。
目前，我的前端网站技术栈是Linux Apache ReactJS(npm+webpack+bundle)，还有什么需要的吗？
这是我第一次被要求使用前端框架，所以我觉得完全迷失了方向。
请帮帮我！
我试图了解如何使React工作，但无法使它正常工作。
我面临的唯一问题是如何在打开的页面基础上加载特定的页面组件，这意味着如何告诉我如何在登录页面中加载登录组件和在注册页面中加载注册组件？
回答 4
Stack Overflow用户
发布于 2017-08-20 14:23:20
React应用程序是单一的web应用程序，但您可以使用反应路由器处理路由问题。
对于与api的交互，有很多模式，但最简单的方法是在任何组件的componentDidMount挂钩中获取数据。
假设您的api服务返回/api/posts下的帖子列表，那么您的组件如下所示：
const PostList extends Component {
constructor(props) {
super(props);
this.state = { posts: [] };
}
componentDidMount() {
fetch('/api/posts')
.then(response => response.json())
.then(data => { this.stateState({ posts: data }) });
}
render() {
return
(<ul>
{this.state.posts.map(post => <li key={post.id}>{post.title}</li>)}
</ul>)
}
}Stack Overflow用户
发布于 2017-08-20 15:30:28
反应符合你的期望。你可以做你想要的一切等等。
如果您还没有见过创建反应-应用程序，那么就使用它来构建您的项目，因为它将为webpack配置最佳实践和所需的所有功能。
至于使用单独的API服务器，您需要使用fetch或axios从客户端进行响应应用程序的调用(没有prob)。
关于你的路由器问题..。下面是一个简单的反应路由器示例
import {
BrowserRouter as Router,
Route,
Link
} from react-router-dom
class App extends React.Component {
render() {
return (
<Router>
<div>
<nav>
<ul>
<Link to='/'><li>Home Link</li></Link>
<Link to='/somepage'><li>Some Link</li></Link>
</ul>
</nav>
<div>
<Route path='/' component={HomeComponent}/>
<Route path='/somepage' component={SomeComponent}/>
</div>
<div>
<Router>
)
}
}
基本上，您可以将整个应用程序包装在BrowserRouter或HashRouter中(请参阅文档了解差异)。该组件通过<Route>高级组件呈现，并且基本上根据url交换组件。
关于<Router>组件，需要注意的一点是。它必须呈现单个子节点。在本例中，我使用了一个div。
Stack Overflow用户
发布于 2017-08-21 07:42:29
我强烈建议您尝试Next.js，这是我迄今为止所见过的最好的ReactJS框架。它附带服务器端呈现和开箱即入的路由。
https://stackoverflow.com/questions/45783008
复制相似问题
腾讯云开发者
