Menu
I am using react.js but not using nodes server. I need a solution for routing, but it seems react-router is working with node. if that is not, give me some example how to integrate react router. if not I need another router which working with react.
946
Building off of @semira here is how I implemented a buildless react application.
Inside of ./index.html (or ./index.php in my case) we load the React library, React router, and the Babel transpiler that will convert ES6 javascript so that browsers can interpret it. Note that you have to explicitly state the script type as text/babel in order for the Babel transpiler to convert ES6 javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App Boilerplate</title>
<!-- Foundation 6.3.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
</head>
<body>
<div id="app"></div>
<!------------------------------------------------------------------------------------------------------------------>
<!-- Dependencies -->
<!------------------------------------------------------------------------------------------------------------------>
<!-- Babel ES6 to ES5 Transpiler -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<!-- React Library -->
<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<!-- React Router -->
<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>
<!------------------------------------------------------------------------------------------------------------------>
<!-- React Components -->
<!------------------------------------------------------------------------------------------------------------------>
<script type="text/babel" src="app/components/App.js"></script>
<script type="text/babel" src="app/components/About.js"></script>
<!-- Application entry point -->
<script type="text/babel" src="app/app.js"></script>
</body>
</html>
Where ./app/components/About.js is a stateless React component written in ES6:
const About = () => <h2>About Page</h2>;
Where ./app/components/App.js is a React component written in ES6:
class App extends React.Component {
render() {
return (
<div>
<h2>App Page</h2>
</div>
);
}
}
Then inside of .app/app.js notice how we can still make the code look like the documentation by storing the ReactDOM and ReactRouter as references.
let render = ReactDOM.render;
let browserHistory = ReactRouter.browserHistory;
let Router = ReactRouter.Router;
let Route = ReactRouter.Route;
let IndexRoute = ReactRouter.IndexRoute;
let Link = ReactRouter.Link;
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>
), document.getElementById('app'))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
