https://github.com/klaemo/react-es6
React's official tutorial with ES6 and Browserify
https://github.com/klaemo/react-es6
es2015 react tutorial
Last synced: 8 months ago
JSON representation
React's official tutorial with ES6 and Browserify
- Host: GitHub
- URL: https://github.com/klaemo/react-es6
- Owner: klaemo
- Created: 2015-03-12T14:08:26.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-04-27T21:10:46.000Z (over 9 years ago)
- Last Synced: 2025-01-03T15:12:35.822Z (about 1 year ago)
- Topics: es2015, react, tutorial
- Language: JavaScript
- Size: 838 KB
- Stars: 78
- Watchers: 7
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# React + Browserify + Babel = Future
I wanted to get familiar with React while also continuing to use browserify. Also, ES6 seems cool. So, I took the [official React tutorial](https://facebook.github.io/react/docs/tutorial.html) and wrote it as CommonJS modules and added some ES6 sugar where appropriate.
## Usage
Clone this repository and run:
```
npm install
npm start
```
This will install all the necessary dependencies, start the server and watch your code for changes
so it'll get transpiled ([Babel](http://babeljs.io)) and bundled ([browserify](http://browserify.org)) on the fly.
`npm run build` will build a minified "production" version.
## Libraries
Here and there I opted to use different libraries than in the original tutorial. Notably
- `marked` instead of `showdown` because the latter isn't compatible with browserify.
- `whatwg-fetch` (the [proposed](https://fetch.spec.whatwg.org/) replacement for XHR) instead of jquery.
## Babel
As of Babel 6.0 we need to explicitly install all the presets we want to use. For this tutorial that's
going to be `babel-preset-react` for the React related transforms and `babel-preset-es2015` for the ES6/ES2015
syntax.
The presets are enabled in `.babelrc`.
## Result
I particularly like how `fetch` and ES6 arrow functions transformed this:
```javascript
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
```
...into this:
```javascript
fetch(this.props.url)
.then(response => response.json())
.then(data => this.setState({ data: data }))
.catch(err => console.error(this.props.url, err.toString()))
```
After the update to `react 0.14` I decided to use the `class` syntax as well as stateless components
and switch to ES6 style exports/imports.
## Contributing
Just open an issue or pull request or whateveer :)