Posts
INTRODUCTION
Recently, I wrote about my first React based program - a grid component. In this blog post I'll describe how to use Facebook's React library for building better user interfaces. For this purpose I will use the JSX syntax to write the react calendar component. So let's get started.
First create a
examples/index.html with the following contents.<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Calendar</title>
<script src="../build/react.min.js"></script>
<script src="../build/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="calendar.css" rel="stylesheet">
</head>
<body>
<div id="calendar"></div>
<script src="../src/calendar.js"></script>
</body>
</html>
Then create
src/calendar.js. This is the place where your React JSX code resides.ReactDOM.render(
React.createElement(Calendar),
document.getElementById("calendar")
);HOW TO TRANSFORM JSX
Since we intend to use this code in browser, we need to translate the JSX to plain JavaScript, so the browser can understand it. There are two ways to achieve this:
- In-Browser Transform - that's what the babel's
browser.min.jsdo in theexamples/index.html. Use this method in dev environment, if you'd like. But in production you should use the offline transform for better performance. - Offline Transform - First install the Babel command-line tools (requires npm):
npm install --global babel-cli
npm install babel-preset-reactThen, translate yoursrc/calendar.jsfile to plain JavaScript:babel --presets react src --watch --out-dir build
The above command will auto-generate
build/calendar.js. If you choose this method, remove the babel's browser.min.js and replace src/calendar.js with build/calendar.js at the examples/index.html.<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Calendar</title>
<script src="../build/react.min.js"></script>
<script src="../build/react-dom.min.js"></script>
<link href="calendar.css" rel="stylesheet">
</head>
<body>
<div id="calendar"></div>
<script src="../build/calendar.js"></script>
</body>
</html>
THE SOURCE CODE
It's time to go deep into JSX. Let's see the
src/calendar.js. You may notice that the calendar is separated into several react components.var Calendar = React.createClass({
calc: function (year, month) {},
componentWillMount: function () {},
componentDidMount: function () {},
componentDidUpdate: function (prevProps, prevState) {},
getInitialState: function () {
var date = new Date();
return {
year: date.getFullYear(),
month: date.getMonth(),
selectedYear: date.getFullYear(),
selectedMonth: date.getMonth(),
selectedDate: date.getDate(),
selectedDt: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
startDay: 1,
weekNumbers: false,
minDate: this.props.minDate ? this.props.minDate : null,
disablePast: this.props.disablePast ? this.props.disablePast : false,
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
monthNamesFull: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
firstOfMonth: null,
daysInMonth: null
};
},
getPrev: function () {},
getNext: function () {},
selectDate: function (year, month, date, element) {},
render: function () {
return (
<div className="r-calendar">
<div className="r-inner">
<Header monthNames={this.state.monthNamesFull} month={this.state.month} year={this.state.year} onPrev={this.getPrev} onNext={this.getNext} />
<WeekDays dayNames={this.state.dayNames} startDay={this.state.startDay} weekNumbers={this.state.weekNumbers} />
<MonthDates month={this.state.month} year={this.state.year} daysInMonth={this.state.daysInMonth} firstOfMonth={this.state.firstOfMonth} startDay={this.state.startDay} onSelect={this.selectDate} weekNumbers={this.state.weekNumbers} disablePast={this.state.disablePast} minDate={this.state.minDate} />
</div>
</div>
);
}
});
var Header = React.createClass({
render: function () {}
});
var WeekDays = React.createClass({
render: function () {}
});
var MonthDates = React.createClass({
statics: {
year: new Date().getFullYear(),
month: new Date().getMonth(),
date: new Date().getDate(),
today: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())
},
render: function () {}
});
ReactDOM.render(
React.createElement(Calendar, {
//onSelect: function (state) {
//console.log(this, state);
//},
//disablePast: true,
//minDate: new Date(2016, 2, 28)
}),
document.getElementById("calendar")
);
DEMO
Play with the react calendar demo on JSFiddle.net
CONCLUSION
If you want to write modular and reusable react components you may want to read more about browserify and webpack. Source code is available at GitHub.
No comments:
Post a Comment