webpack使用原生js和react分别搭建项目
标签：
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. 效果：
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦