<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class="well clearfix">
<textarea class="form-control"></textarea><br/>
<button class="btn btn-primary pull-right">Tweet</button>
</div>
</body>
</html>
// Initially disable the button
$("button").prop("disabled", true);
// When the value of the text area changes (using input event that works on modern browsers)
$("textarea").on("input", function() {
// If there's at least one character...
if ($(this).val().length > 0) {
// Enable the button.
$("button").prop("disabled", false);
} else {
// Else, disable the button.
$("button").prop("disabled", true);
}
});
-------------------------------------------------------------------------------------------------------------------------
Using React
There is no markup in the HTML. Instead Markup and Behavior are together in JavaScript code!
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.13.3.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
</body>
</html>
//JSX(React)
var TweetBox = React.createClass({
getInitialState: function() {
return {
text: ""
};
},
handleChange: function(event) {
this.setState({ text: event.target.value });
},
render: function() {
return (
<div className="well clearfix">
<textarea className="form-control" onChange={this.handleChange}></textarea>
<br/>
<button className="btn btn-primary pull-right" disabled={this.state.text.length === 0}>Tweet</button>
</div>
);
}
});
React.render(
<TweetBox />,
document.body
);
--------------------------------------------------------------------------------------------------------------------
- In jQuery, you write event handlers which modify the DOM.
- In React.js, you write event handlers which modify the state. And you write
render()to reflect the current state
- We used
inputevent for jQuery, but in React we useonChange- you'll learn about how events differ in React's JSX from React's documentation, so don't worry too much now. - More importantly, we use
{...}syntax to include any JavaScript code inside the HTML syntax part of JSX. In this case, we want to pass the handlerhandleChange, and we prefix it withthis.because it's a method on this UI object. - If you're used to jQuery, this might seem like a bad practice, but don't worry. Again, in large applications, the code will be more manageable if those markup and behaviors are kept together for each piece of UI!!
--------------------------------------------------------------------------------------------------------
To read more, follow the link
http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/
