ES6 Environment Construction and React-router learning

First, causes

ES6 a lot of exciting new features, and it's really tempting to try. However, most browsers are not very good at ES6 support. So if you want to use some new features with confidence, you need to use some tools to convert ES6 or ES7 code into ES5 code. Today, the configuration of the environment, wrote a react-router, mainly to practice their own programming skills, haha ... Share here!

Second, ES6 Environment construction

There are many kinds of tools to build the environment, JSPM,WEBPACK,GULP and so on ... I mainly use the gulp+babel+browserify to build. The steps are as follows (the following steps are performed in the node environment):

① Create a new project, open a command line or git hash and enter Git init.

② Installing gulp, enter NPM Install Gulp

③ install some necessary plugins to see the individual needs. I have installed some: babel-preset-es2015 browserify gulp-babel gulp-concat Gulp-cssnano gulp-uglify vinyl-source-stream gulp-sass

④ Configure the Gulpfile file.

The file directory structure is as follows:

My configuration is as follows:

const gulp = require(‘gulp‘);
const babel = require(‘gulp-babel‘);
const uglify = require(‘gulp-uglify‘);
const sass = require(‘gulp-sass‘);
const rename = require(‘gulp-rename‘);
const cssnano = require(‘gulp-cssnano‘);
const concat = require(‘gulp-concat‘);
const browserify = require(‘browserify‘);
const babelify=require(‘babelify‘);
const source = require(‘vinyl-source-stream‘);
//Compile and compress JS
gulp.task(‘convertJS‘, function(){
return gulp.src(‘app/js/*.js‘)
.pipe(babel({
presets: [‘es2015‘,‘react‘]
})
.pipe(uglify())
.pipe(gulp.dest(‘dist/js‘))
}
//Merge and compress CSS
gulp.task(‘convertCSS‘, function(){
return gulp.src(‘app/style/*.scss‘)
.pipe(sass())
.pipe(concat(‘app.css‘))
.pipe(cssnano())
.pipe(rename(function(path){
path.basename += ‘.min‘;
})
.pipe(gulp.dest(‘dist/style‘));
}
//Monitor file changes and automate tasks
gulp.task(‘watch‘, function(){
gulp.watch(‘app/style/*.scss‘, [‘convertCSS‘]);
gulp.watch(‘app/js/*.js‘, [‘convertJS‘, ‘browserify‘]);
}
// browserify
gulp.task("browserify", function () {
var b = browserify({
entries: "dist/js/app.js"
};
return b.transform(babelify)
.bundle ()
.pipe(source("bundle.js"))
.pipe(gulp.dest("dist/js"));
};
gulp.task(‘start‘, [‘convertJS‘, ‘convertCSS‘, ‘browserify‘, ‘watch‘]);

Note that even if all of these are installed, running the Gulp command will still report an undefined Babel object error.

At first I did not know why, I put the compilation ES6 environment alone (that is, react related content and plug-ins commented out), found to be feasible. So the problem is that it's time to compile react. The answer was finally found on the StackOverflow.

Probably mean, Babel in compiling react, there is a plug-in is separated out, need to install another, similar to the patch and other things! According to the above statement, I went to install a bit of this, found that really can, no error ^_^. So far, the environment is ready.

Third, routing construction

First of all, you can click here to learn more about React-route.

In fact, it is very fast to build an environment that is more time-consuming than teaching the official example of routing reference. I wrote a Hello world-level route. The following code:

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { hashHistory, Route, Router } from ‘react-router‘;
import { render } from ‘react-dom‘

import List from ‘./list‘;

class Photo extends React.Component {
  render() {
    return <p>hello, winty!</p>
  }
}

render((
    <Router history={hashHistory}>
      <Route path="/" component={Photo}/>
      {/* add the routes here */}
      <Route path="/list" component={List}/>
    </Router>
), document.getElementById(‘app‘));

The list module code introduced is as follows:

import React from ‘react‘ class List extends React.Component {
    render() { return <div>hello,List</div>  }
}

Just as I am sorry for writing this water program, open the browser, unexpectedly ...

It's really going to output the hello,winty!.

All right. I F12 open the console, very sad, reported two warning:

The saddest thing is, I find the information, have not found explanations, all kinds of groups on the question, no one knows the reply I ...

Okay, holding the warning does not affect the attitude of the operation, I try to change the URL, through the route to the list to go ...

However...

The result is also bright blind ...

The result is nothing, also reported wrong ... Allow me to be quiet ...

So I again a variety of search, various checks, various questions, various questions ...

Originally wanted to ask clearly, again to write this blog, however ... Still can't solve ... So I can only come here to ask for help ...

The great Gods of the blog Park ... Can someone please explain?

Detailed code point here!

PS: Want to practice the new features of ES6, and do not know how to use the environment of the people can refer to the code of Gulpfile Oh ...

ES6 Environment Construction and React-router learning