Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pingf/toyreact
https://github.com/pingf/toyreact
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/pingf/toyreact
- Owner: pingf
- Created: 2020-08-03T08:16:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T20:54:05.000Z (almost 2 years ago)
- Last Synced: 2023-03-25T20:57:46.299Z (over 1 year ago)
- Language: JavaScript
- Size: 762 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ToyReact
```
npx webpack
```
--> dist/main.js
```
mode: 'development',
optimization: {
minimize: false
}
```
```
npx webpack
```
--> dist/main.js
npm install --save-dev babel-loader @babel/core @babel/preset-env
```json
module: {
rules: [
{
test: '\.js$',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
```
main.html
```html
```
main.js
```js
for(let i of [1,2,3]){
console.log(i)
}
let a =
```
npm install --save-dev @babel/plugin-transform-react-jsx
```json
module: {
rules: [
{
test: '\.js$',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-react-jsx']
}
}
}
]
},
```
```
main.js:6 Uncaught ReferenceError: React is not defined
at eval (main.js:6)
at Object../main.js (main.js:96)
at __webpack_require__ (main.js:20)
at main.js:84
at main.js:87
```
```json
module: {
rules: [
{
test: '\.js$',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [['@babel/plugin-transform-react-jsx', {pragma: 'createElement'}]]
}
}
}
]
},
```
```js
function createElement(tagName, attributes, ...children){
return document.createElement(tagName);
}
let a =
```
```js
function createElement(tagName, attributes, ...children){
let e = document.createElement(tagName);
for (let p in attributes){
e.setAttribute(p, attributes[p]);
}
for (let child of children){
if (typeof child === 'string') {
child = document.createTextNode(child);
}
e.appendChild(child);
}
return e;
}
window.a =
```
document.body.appendChild(a)
main.html
```html
```
```js
document.body.appendChild(
1
2
3
)
```