webpack使用原生js和react分別搭建項(xiàng)目
標(biāo)簽：
JavaScript
原生js：
a. head.jsx：function head(){var head = document.createElement('div')head.setAttribute('class','head')head.innerHTML = "head"return head}module.exports = headb. table.jsx：
function table(){var table = document.createElement('table')table.setAttribute('class','table')var thead = document.createElement('thead')var tbody = document.createElement('tbody')var tdh = document.createElement('td')var tdb = document.createElement('td')var tnh = document.createTextNode('title')var tnb = document.createTextNode('body')tdh.appendChild(tnh)tdb.appendChild(tnb)thead.appendChild(tdh)tbody.appendChild(tdb)table.appendChild(thead)table.appendChild(tbody)return table}module.exports = tablec. foot.jsx：
function foot(){var foot = document.createElement('div')foot.setAttribute('class','foot')foot.innerHTML = "foot"return foot}module.exports = footd. test.less：
.color(@color;@background){color:@color;background:@background;}.table(){border-collapse:collapse;border:1px solid black;padding:1vh 1vw;}.head{.color(red,yellow);}.table{.table();}.foot{.color(white,black);}e. index.js：
var head = require('./static/jsx/head.jsx')var table = require('./static/jsx/table.jsx')var foot = require('./static/jsx/foot.jsx')require('./static/less/test.less')document.body.appendChild(head())document.body.appendChild(table())document.body.appendChild(foot())f. index.html：
<!doctype html><html><head> <title>hello</title></head><body> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.js"></script></body></html>
g. 效果：
react：
a. head.jsx：var React = require('react')var CreateReactClass = require('create-react-class')var head = CreateReactClass({render:function(){ return( <div class="head">head</div> )}})module.exports = headb. table.jsx：
var React = require('react')var CreateReactClass = require('create-react-class')var table = CreateReactClass({render:function(){ return( <table class="table"> <thead> <td>head</td> </thead> <tbody> <td>body</td> </tbody> </table> )}})module.exports = tablec. foot.jsx：
var React = require('react')var CreateReactClass = require('create-react-class')var foot = CreateReactClass({render:function(){ return( <div class="foot">foot</div> )}})module.exports = footd. test.less：
.color(@color;@background){color:@color;background:@background;}.table(){border-collapse:collapse;border:1px solid black;padding:1vh 1vw;}.head{.color(red,yellow);}.table{.table();}.foot{.color(white,black);}e. index.js：
var React = require('react')var ReactDom = require('react-dom')var CreateReactClass = require('create-react-class')var Head = require('./static/jsx/head.jsx')var Table = require('./static/jsx/table.jsx')var Foot = require('./static/jsx/foot.jsx')require('./static/less/test.less')var App = CreateReactClass({render:function(){ return( <div> <Head/> <Table/> <Foot/> </div> )}})ReactDom.render( <App/> , document.getElementById('app'))f. index.html：
<!doctype html><html><head> <title>hello</title></head><body> <div id="app"></div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.js"></script></body></html>
g. 效果：
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦