Awesome
esri-loader-react-starter-kit
A fork of the react-starter-kit showing how to use esri-loader in an isomorphic/universal React application.
This fork adds an <EsriMap /> component that lazy loads the ArcGIS API for JavaScript and renders a simple map only once the user navigates to the /map route in a browser. By using the componentDidMount() lifecyle hook, the <EsriMap /> component ensures that the ArcGIS API and it's modules aren't loaded or used when rendering on the server.
The following is from the React Starter Kit:
React Starter Kit — "isomorphic" web app boilerplate <a href="https://github.com/kriasoft/react-starter-kit/stargazers"><img src="https://img.shields.io/github/stars/kriasoft/react-starter-kit.svg?style=social&label=Star&maxAge=3600" height="20"></a> <a href="https://twitter.com/ReactStarter"><img src="https://img.shields.io/twitter/follow/ReactStarter.svg?style=social&label=Follow&maxAge=3600" height="20"></a>
React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.
See getting started guide, demo, docs, roadmap | Join #react-starter-kit chat room on Gitter | Visit our sponsors:<br><br>
<p align="center" align="top"> <a href="https://rollbar.com/?utm_source=reactstartkit(github)&utm_medium=link&utm_campaign=reactstartkit(github)"><img src="https://koistya.github.io/files/rollbar-362x72.png" height="36" align="top" /></a> <a href="https://x-team.com/hire-react-developers/?utm_source=reactstarterkit&utm_medium=github-link&utm_campaign=reactstarterkit-june"><img src="https://koistya.github.io/files/xteam-255x72.png" height="36" align="top" /></a> <sup><a href="https://x-team.com/join/?utm_source=reactstarterkit&utm_medium=github-link&utm_campaign=reactstarterkit-june">Hiring</a></sup> </p>Getting Started
- Follow the getting started guide to download and run the project (Node.js >= 6.5)
- Check the code recipes used in this boilerplate, or share yours
Customization
The master branch of React Starter Kit doesn't include a Flux implementation or any other
advanced integrations. Nevertheless, we have some integrations available to you in feature
branches that you can use either as a reference or merge into your project:
- feature/redux (PR)
— isomorphic Redux by Pavel Lang
(see how to integrate Redux) (based on
master) - feature/apollo (PR)
— isomorphic Apollo Client by Pavel Lang
(see Tracking PR #1147) (based on
feature/redux) - feature/react-intl (PR)
— isomorphic Redux and React Intl by Pavel Lang
(see how to integrate React Intl) (based on
feature/apollo)
You can see status of most reasonable merge combination as PRs labeled as TRACKING
If you think that any of these features should be on master, or vice versa, some features should
removed from the master branch, please let us know.
We love your feedback!
Comparison
<table width="100%"> <tr> <th> </th> <th> <p>React Starter Kit</p> <a href="https://github.com/kriasoft/react-starter-kit"><img src="https://img.shields.io/github/stars/kriasoft/react-starter-kit.svg?style=social&label=~react-starter-kit" height="20"></a> <a href="https://twitter.com/ReactStarter"><img src="https://img.shields.io/twitter/follow/ReactStarter.svg?style=social&label=@ReactStarter" height="20"></a> </th> <th> <p>React Static Boilerplate</p> <a href="https://github.com/kriasoft/react-static-boilerplate"><img src="https://img.shields.io/github/stars/kriasoft/react-static-boilerplate.svg?style=social&label=~react-static-boilerplate" height="20"></a> <a href="https://twitter.com/ReactStatic"><img src="https://img.shields.io/twitter/follow/ReactStatic.svg?style=social&label=@ReactStatic" height="20"></a> </th> <th> <p>ASP.NET Core Starter Kit</p> <a href="https://github.com/kriasoft/aspnet-starter-kit"><img src="https://img.shields.io/github/stars/kriasoft/aspnet-starter-kit.svg?style=social&label=~aspnet-starter-kit" height="20"></a> <a href="https://twitter.com/dotnetreact"><img src="https://img.shields.io/twitter/follow/dotnetreact.svg?style=social&label=@dotnetreact" height="20"></a> </th> <tr> <tr> <th align="right">App type</th> <td align="center"><a href="http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/">Isomorphic</a> (universal)</td> <td align="center"><a href="https://en.wikipedia.org/wiki/Single-page_application">Single-page application</a></td> <td align="center"><a href="https://en.wikipedia.org/wiki/Single-page_application">Single-page application</a></td> </tr> <tr> <th colspan="4">Frontend</th> <tr> <tr> <th align="right">Language</th> <td align="center">JavaScript (ES2015+, JSX)</td> <td align="center">JavaScript (ES2015+, JSX)</td> <td align="center">JavaScript (ES2015+, JSX)</td> </tr> <tr> <th align="right">Libraries</th> <td align="center"> <a href="https://github.com/facebook/react">React</a>, <a href="https://github.com/ReactJSTraining/history">History</a>, <a href="https://github.com/kriasoft/universal-router">Universal Router</a> </td> <td align="center"> <a href="https://github.com/facebook/react">React</a>, <a href="https://github.com/ReactJSTraining/history">History</a>, <a href="https://github.com/reactjs/redux">Redux</a> </td> <td align="center"> <a href="https://github.com/facebook/react">React</a>, <a href="https://github.com/ReactJSTraining/history">History</a>, <a href="https://github.com/reactjs/redux">Redux</a> </td> </tr> <tr> <th align="right">Routes</th> <td align="center">Imperative (functional)</td> <td align="center">Declarative</td> <td align="center">Declarative, cross-stack</td> </tr> <tr> <th colspan="4">Backend</th> <tr> <tr> <th align="right">Language</th> <td align="center">JavaScript (ES2015+, JSX)</td> <td align="center">n/a</td> <td align="center">C#, F#</td> </tr> <tr> <th align="right">Libraries</th> <td align="center"> <a href="https://nodejs.org">Node.js</a>, <a href="http://expressjs.com/">Express</a>, <a href="http://docs.sequelizejs.com/en/latest/">Sequelize</a>,<br> <a href="https://github.com/graphql/graphql-js">GraphQL</a></td> <td align="center">n/a</td> <td align="center"> <a href="https://docs.asp.net/en/latest/">ASP.NET Core</a>, <a href="https://ef.readthedocs.io/en/latest/">EF Core</a>,<br> <a href="https://docs.asp.net/en/latest/security/authentication/identity.html">ASP.NET Identity</a> </td> </tr> <tr> <th align="right"><a href="https://www.quora.com/What-are-the-tradeoffs-of-client-side-rendering-vs-server-side-rendering">SSR</a></th> <td align="center">Yes</td> <td align="center">n/a</td> <td align="center">n/a</td> </tr> <tr> <th align="right">Data API</th> <td align="center"><a href="http://graphql.org/">GraphQL</a></td> <td align="center">n/a</td> <td align="center"><a href="https://docs.asp.net/en/latest/tutorials/first-web-api.html">Web API</a></td> </tr> </table>Backers
♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!
<a href="http://www.nekst.me/" target="_blank" title="lehneres"> <img src="https://github.com/lehneres.png?size=64" width="64" height="64" alt="lehneres"> </a> <a href="http://www.vidpanel.com/" target="_blank" title="Tarkan Anlar"> <img src="https://github.com/tarkanlar.png?size=64" width="64" height="64" alt="Tarkan Anlar"> </a> <a href="https://morten.olsen.io/" target="_blank" title="Morten Olsen"> <img src="https://github.com/mortenolsendk.png?size=64" width="64" height="64" alt="Morten Olsen"> </a> <a href="https://twitter.com/adamthomann" target="_blank" title="Adam"> <img src="https://github.com/athomann.png?size=64" width="64" height="64" alt="Adam"> </a> <a href="http://dsernst.com/" target="_blank" title="David Ernst"> <img src="https://github.com/dsernst.png?size=64" width="64" height="64" alt="David Ernst"> </a> <a href="http://zanehitchcox.com/" target="_blank" title="Zane Hitchcox"> <img src="https://github.com/zwhitchcox.png?size=64" width="64" height="64" alt="Zane Hitchcox"> </a> <a href="https://opencollective.com/react-starter-kit" target="_blank"> <img src="https://opencollective.com/static/images/become_backer.svg" width="64" height="64" alt=""> </a>How to Contribute
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.
Learn More
- Getting Started with React.js
- Getting Started with GraphQL and Relay
- React.js Questions on StackOverflow
- React.js Discussion Board
- Flux Architecture for Building User Interfaces
- Enzyme — JavaScript Testing utilities for React
- Flow — A static type checker for JavaScript
- The Future of React
- Learn ES6, ES6 Features
Related Projects
- GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
- Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
- Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries
Support
- #react-starter-kit on Stack Overflow — Questions and answers
- #react-starter-kit on Gitter — Watch announcements, share ideas and feedback
- GitHub issues, or Scrum board — File issues, send feature requests
- appear.in/react — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
- @koistya on Codementor, or Skype — Private consulting
License
Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.
Made with ♥ by Konstantin Tarkus (@koistya) and contributors