webpack使用原生js和react分别搭建项目

发布时间：2023-09-06 01:49责任编辑：顾先生关键词：js webpack

原生js：
a. head.jsx：

function head(){var head = document.createElement(‘div‘)head.setAttribute(‘class‘,‘head‘)head.innerHTML = "head"return head}module.exports = head

b. 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 = table

c. foot.jsx：

function foot(){var foot = document.createElement(‘div‘)foot.setAttribute(‘class‘,‘foot‘)foot.innerHTML = "foot"return foot}module.exports = foot

d. 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 src="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 = head

b. 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 = table

c. 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 = foot

d. 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 src="bundle.js"></script></body></html>

g. 效果：

webpack使用原生js和react分别搭建项目

原文地址：http://blog.51cto.com/12173069/2103785

webpack使用原生js和react分别搭建项目

知识推荐