From 36e3c629c336dfd2c29273850235bbb261720a75 Mon Sep 17 00:00:00 2001 From: Brice Favre Date: Mon, 25 Jan 2016 21:23:49 +0100 Subject: [PATCH 1/2] Build a first component TodoApp --- index.html | 14 ++++++++++++++ package.json | 33 +++++++++++++++++++++++++++++++++ src/components/TodoApp.js | 11 +++++++++++ src/index.js | 9 +++++++++ 4 files changed, 67 insertions(+) create mode 100644 index.html create mode 100644 package.json create mode 100644 src/components/TodoApp.js create mode 100644 src/index.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..1ca371d --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + MontpellierJS - ToDo List! + + + +
+ + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..bedcb96 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "react-intro", + "version": "1.0.0", + "description": "An Introduction to ReactJS, maintained and amended by MontpellierJS Team", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "watch": "watchify -t [ babelify --presets [ react ] ] ./src/index.js -o ./build/bundle.js" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/MontpellierJS/react-intro.git" + }, + "keywords": [ + "tutorial", + "introduction" + ], + "author": "MontpellierJS", + "license": "ISC", + "bugs": { + "url": "https://github.com/MontpellierJS/react-intro/issues" + }, + "homepage": "https://github.com/MontpellierJS/react-intro#readme", + "dependencies": { + "babel-preset-react": "^6.3.13", + "babelify": "^7.2.0", + "react": "^0.14.6", + "react-dom": "^0.14.6" + }, + "devDependencies": { + "watchify": "^3.7.0" + } +} diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js new file mode 100644 index 0000000..201c0ff --- /dev/null +++ b/src/components/TodoApp.js @@ -0,0 +1,11 @@ +var React = require('react'); + +function TodoApp(props) { + return ( +
+ Todo : Build The App +
+ ); +} + +module.exports = TodoApp; \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..0934c32 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +var React = require('react'); +var ReactDOM = require('react-dom'); + +var TodoApp = require('./components/TodoApp.js'); + +ReactDOM.render( + , + document.getElementById('app') +); \ No newline at end of file From 7a015c91bec2c1402b540d85ce8e7b10e9c1cf2d Mon Sep 17 00:00:00 2001 From: Brice Favre Date: Sat, 6 Feb 2016 16:20:01 +0100 Subject: [PATCH 2/2] Change and use es6 syntax --- package.json | 7 ++++--- src/components/TodoApp.js | 8 +++----- src/index.js | 12 ++++-------- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index bedcb96..03353be 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "watch": "watchify -t [ babelify --presets [ react ] ] ./src/index.js -o ./build/bundle.js" + "watch": "watchify -t [ babelify --presets [ react es2015 ] ] ./src/index.js -o ./build/bundle.js" }, "repository": { "type": "git", @@ -22,12 +22,13 @@ }, "homepage": "https://github.com/MontpellierJS/react-intro#readme", "dependencies": { - "babel-preset-react": "^6.3.13", - "babelify": "^7.2.0", "react": "^0.14.6", "react-dom": "^0.14.6" }, "devDependencies": { + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "babelify": "^7.2.0", "watchify": "^3.7.0" } } diff --git a/src/components/TodoApp.js b/src/components/TodoApp.js index 201c0ff..cf942e2 100644 --- a/src/components/TodoApp.js +++ b/src/components/TodoApp.js @@ -1,11 +1,9 @@ -var React = require('react'); +import React from 'react' -function TodoApp(props) { +export default function TodoApp(props) { return (
Todo : Build The App
- ); + ) } - -module.exports = TodoApp; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0934c32..065df99 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,5 @@ -var React = require('react'); -var ReactDOM = require('react-dom'); +import React from 'react' +import { render } from 'react-dom' +import TodoApp from './components/TodoApp' -var TodoApp = require('./components/TodoApp.js'); - -ReactDOM.render( - , - document.getElementById('app') -); \ No newline at end of file +render((),document.getElementById('app')) \ No newline at end of file