未加星标

React Calendar with Google Calendar as CMS―tutorial

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

This tutorial was prepared for beginners ― React is great for that, as it has a gentle learning curve while providing super-powers. Some javascript knowledge and familiarity with the command line is welcome, but not necessary.

You can see the finished project on GitHub .

Step 1: Theset-up

This is actually gonna be a big step, but this is how it works in front-end development. Code needs to work in multiple environments and travel fast ― so it has to be translated and minified.

All we do here is creating a build process that will transform modern, readable code into a bundle , that is lightweight and understandable for not-so-modern browsers.

Translating the JavaScript

React is written in JavaScript, which is understood by all modern browsers, but we’re going to use it’s newest version, called ES6 ― which is not. This cutting edge ES6 needs to be translated to boring old JS. Also, we’re gonna use JSX syntax, which needs to be translated as well. Our translator here is gonna be Babel .

To use Babel, and create a small, minified JavaScript file (so it travels fast through the Internets), a module-bundler called webpack will be used. A module bundler, as the name suggests, takes multiple files, and bundles them into one elegant package to distribute over the web. Webpack can do all sorts of things in the process, and one of them is translating old JS to new JS.

In order to use the aforementioned tools, the node.js environment with node package manager (npm) is needed. You can download node on nodejs.org . A project using npm packages should have a package.json file, which lists all dependencies and provides some additional information about the project. Let’s create one by running (in a new folder):

$ npm init

Now that you have a fresh package.json , download all modules that will be needed (if you run into permissions problems, check out this article ):

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react react-dom webpack $ npm install -g webpack

We’re adding webpack also as a global (-g option) module, so it can be used directly from the command line (that’s just for simplicity, normally you’d use npm scripts for build commands).

Now with all these downloaded, there are just two more things we need to get things started. First one is configuration for Babel. Just add the following key to package.json (remember about the comma, if it’s not the last key):

"babel" : { "presets": ["react", "es2015"] }

The second thing is configuration file for webpack, called webpack.config.js :

All it says is:

Hey webpack: get the file source/app.js, resolve all of it’s dependencies (that is if this file wants to include any other ones), and spit out dist/bundle.js. Oh, and if you see any file with.js extension ― translate it with Babel. Thanks.

All right, so let’s try it out ― create a source/app.js file, it can look like that:

const who = 'World' console.log(`Hello ${who}`)

And then run:

$ webpack

Hopefully you can see a new file ― dist/bundle.js! The ‘const’ and the thing with $ sign (called string interpolation) are just the new ES6 features. Take a peek at the bundle.js file ― it has some additional code added by webpack but you should see these lines somewhere:

var who = 'World'; console.log('Hello ' + who);

As you probably guessed, it’s the old JavaScript. You can run webpack with ‘-p’ option to minify the code ― then the translated fragment will look something like that:

var r="World";console.log("Hello "+r)}

Nice, this succinct piece of code can be run on all modern browsers and will get to them fast ― thanks to minification.

What aboutHTML?

Yep, it’s still needed, but just as a vessel for the JavaScript. Create a index.html file at the root of your project:

The quickest way to see the results is to run:

$ npm install -g http-server && http-server

And then visit localhost:8080 , fire up the JavaScript console in the dev tools, and there it is ― your “Hello World”.

Step 2. A React Component

A React component is the basic building block of a React app. There are a couple of ways to create a React component, but most common is instantiating React.Component class :

Which says:

First, I need React itself, and React-DOM (which lets React interact with HTML).

Then here is App, which is just like a React.Component (a blueprint for a component), but additionally: it’s state consists of a string “React” and it renders a div element with a string “Hello ” plus a string from the state.

Finally, please render this component inside of element with id “root”.

(you can read a more comprehensive version of the above here )

In case you were wondering, the HTML-like syntax in the render() method is called JSX . Because with React, you can forget about the traditional HTML+CSS+JS structure of a website and, as we’ll see, write almost everything in JavaScript.

So, let’s add this “root” element, just below the opening “body” tag in index.html file:

<div id="root"></div>

And run webpack, this time with a ‘watch’ flag so it will conveniently recompile whenever the app.js file is saved:

$ webpack --watch

And there you have it ― a React component rendered on a website.

Step 3: A Reactcalendar Building a calendar component from scratch is out of the scope of this tutorial, so we’re gonna use react-big-calendar . First, let’s add it to the list of the dependencies, along with moment.js library , which will handle date localization. We also add two loaders , which are what enables webpack to handle whatever is not plain JS (when translating JS with Babel, we’ve already used a loader!). In this case, it’s CSS

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: ReactJavaJavaScriptHTMLCSSGitGitHub
分页:12
转载请注明
本文标题:React Calendar with Google Calendar as CMS―tutorial
本站链接:http://www.codesec.net/view/522983.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(109)