Sublime ReactJS Bootstrap HelloWorld Template for Quickstart
Join the DZone community and get the full member experience.
Join For Free This article represents a Sublime Snippet for quickstarting your ReactJS learning sessions with help of ReactJS-Bootstrap code for HelloWorld. It comes in very handy for me and I thought I would share it with you. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.
Code Sample – Sublime Snippet for ReactJS Bootstrap Hello World Template
In your sublime editor, go to Tools > New Snippet, paste the code below and save. Open a new file, save it as html file, write “rjshello” and press CTRL+Space bar. That is it. You would get the ReactJS Hello World code for quickstarting your project. The code below represents a quick tutorial as well.
<snippet>
<content><![CDATA[
<html>
<head>
<title>Hello React Bootstrap Template</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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="http://code.jquery.com/jquery-1.10.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>ReactJS Hello World - Code Example</h1>
</div>
<div id="sayhello"></div>
</div>
<script type="text/jsx">
/** @jsx React.DOM */
//
// This is the parent component comprising of two inner components
// One of the component is UserName which is used to allow user to enter their name
// Other component is HelloText which displays the text such as Hello, World
//
var SayHello = React.createClass({
// This is used to set the state, "data" which is
// accessed later in HelloText component to display the updated state
//
getInitialState: function() {
return {data: 'World'}
},
// It is recommended to capture events happening with any children
// at the parent level and set the new state that updates the children appropriately
handleNameSubmit: function(name) {
this.setState({data: name});
},
// Render method which is comprised of two components such as UserName and HelloText
//
render: function() {
return(
<div>
<UserName onNameSubmit={this.handleNameSubmit}/>
<HelloText data={this.state.data}/>
</div>
);
}
});
// UserName component which has following two methods:
// handleChange: Used to capture onChange event
// render: Code to render the component
//
var UserName = React.createClass({
handleChange: function() {
var username = this.refs.username.getDOMNode().value.trim();
this.props.onNameSubmit({username: username });
this.refs.username.getDOMNode().value = '';
return false;
},
render: function() {
return(
<form role="form" onChange={this.handleChange}>
<div className="input-group input-group-lg">
<input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
</div>
</form>
);
}
});
// HelloText component to display Hello World or Hello Name text
// render: Consists of code display the HelloText component
//
var HelloText = React.createClass({
render: function() {
return (
<div>
<h3>Hello, {this.props.data}</h3>
</div>
);
}
});
React.renderComponent(
<SayHello />,
document.getElementById( "sayhello" )
);
</script>
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>rjshello</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
</snippet>
Template
Bootstrap (front-end framework)
Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Trending
-
MLOps: Definition, Importance, and Implementation
-
Design Patterns for Microservices: Ambassador, Anti-Corruption Layer, and Backends for Frontends
-
Never Use Credentials in a CI/CD Pipeline Again
-
What Is mTLS? How To Implement It With Istio
Comments