1.1mb
700kb
1.6mb
300kb
500kb
800kb
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
var mountNode = document.getElementById('reactCode');
ReactDOM.render(<HelloMessage />, mountNode);
<Calendar />
<CalendarDay />
<CalendarDay />
<CalendarDay />
// Calendar.js
import data from '../data.json'
{
data.map((item, index) => {
return <CalendarDay data={item} />
})
}
npm install <packageName>
npm uninstall <packageName>
npm install --save react
npm install --save-dev babel-cli
npm install --save-dev webpack@2.2.0-rc.7
<script src="bundle.js"></script>
import React from 'react'
import ReactDOM from 'react-dom'
import CalendarDay from './components/CalendarDay'
import data from '../data.json'
const App = React.createClass({
render: function() {
//
}
}
ReactDOM.render(<App />, document.getElementById('app'))
{ "presets": ["react","es2015"] }
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: './dist'
},
module: {
loaders: [
{
loader: "babel-loader",
test: /\.js$/,
exclude: /node_modules/
}
]
}
}
webpack --config webpack.config.js --watch
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
ReactJS
ReactJS
Preact
ReactJS
Preact
Preact + Webpack -p