Over a million developers have joined DZone.

ReactJS & Bootstrap UI Template

DZone's Guide to

ReactJS & Bootstrap UI Template

· Java Zone ·
Free Resource

Take 60 minutes to understand the Power of the Actor Model with "Designing Reactive Systems: The Role Of Actors In Distributed Architecture". Brought to you in partnership with Lightbend.

This article represents take away code for working with ReactJS and Bootstrap CSS library. I chose to post it as I need the copy and paste code to get started quickly with every new ReactJS tiny projects and, wanted a place on web which serves my purpose.

Pay attention to some of the following:

  • All JS libraries are accessed from CDNs
  • Inclusion of JSX code snipper /** @jsx React.DOM */
    <title>Some Title</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://fb.me/react-0.11.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container">
      <div class="page-header">
        <h1>Some Heading</h1>
      <div id="helloApp"></div>  
    <script type="text/jsx">
      /** @jsx React.DOM */
      var HelloApp = React.createClass({
        render: function() {
          return ( 
            <div className="well">
              Hello World
      React.renderComponent( <HelloApp/>, document.getElementById( "helloApp" ) );

Learn how the Actor model provides a simple but powerful way to design and implement reactive applications that can distribute work across clusters of cores and servers. Brought to you in partnership with Lightbend.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}