├── .gitignore
├── .babelrc
├── .editorconfig
├── index.html
├── src
├── counter.js
├── index.js
├── qnd-react-dom.js
└── qnd-react.js
├── webpack.dev.js
├── README.md
├── webpack.prod.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | /node_modules
3 | dist
4 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | ["@babel/plugin-transform-react-jsx", {
4 | "pragma": "QndReact.createElement", // default pragma is React.createElement
5 | "throwIfNamespace": false // defaults to true
6 | }]
7 | ]
8 | }
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 4
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | QndReact
7 |
8 |
9 |
10 |
Hello World from webpack starter pack
11 |
12 | This is a very basic webpack setup with just ES6 support and everything else is left upto your imagination
13 |
14 |
19 |
Count: {this.state.count}
20 |
23 |
Welcome {name}!
;
9 | const foods = [
10 | 'idly',
11 | 'dosa',
12 | 'vada'
13 | ]
14 |
15 | const App = (
16 |
17 |
18 | QndReact is Quick and dirty react
19 |
20 |
It is about building your own React in 90 lines of JavsScript
21 |
22 |
23 |
The following renders a list of food
24 |
25 | {foods.map(food => - {food}
)}
26 |
27 |
{todo}
) work in jsx
7 | // [['idly'], ['dosa', 'vada']] -> ['idly', 'dosa', 'vada']
8 | children = children.flat();
9 |
10 | // if type is a Class then
11 | // 1. create a instance of the Class
12 | // 2. call the render method on the Class instance
13 | if (type.prototype && type.prototype.isQndReactClassComponent) {
14 | const componentInstance = new type(props);
15 |
16 | // remember the current vNode instance
17 | componentInstance.__vNode = componentInstance.render();
18 |
19 | // add hook to snabbdom virtual node to know whether it was added to the actual DOM
20 | componentInstance.__vNode.data.hook = {
21 | create: () => {
22 | componentInstance.componentDidMount()
23 | }
24 | }
25 |
26 | return componentInstance.__vNode;
27 | }
28 | // if type is a function then call it and return it's value
29 | if (typeof (type) == 'function') {
30 | return type(props);
31 | }
32 |
33 | props = props || {};
34 | let dataProps = {};
35 | let eventProps = {};
36 |
37 | // This is to seperate out the text attributes and event listener attributes
38 | for(let propKey in props) {
39 | // event props always startwith on eg. onClick, onChange etc.
40 | if (propKey.startsWith('on')) {
41 | // onClick -> click
42 | const event = propKey.substring(2).toLowerCase();
43 |
44 | eventProps[event] = props[propKey];
45 | }
46 | else {
47 | dataProps[propKey] = props[propKey];
48 | }
49 | }
50 |
51 | // props -> snabbdom's internal text attributes
52 | // on -> snabbdom's internal event listeners attributes
53 | return h(type, { props: dataProps, on: eventProps }, children);
54 | };
55 |
56 | // component base class
57 | class Component {
58 | constructor() { }
59 |
60 | componentDidMount() { }
61 |
62 | setState(partialState) {
63 | // update the state by adding the partial state
64 | this.state = {
65 | ...this.state,
66 | ...partialState
67 | }
68 | // call the __updater function that QndReactDom gave
69 | QndReact.__updater(this);
70 | }
71 |
72 | render() { }
73 | }
74 |
75 | // add a static property to differentiate between a class and a function
76 | Component.prototype.isQndReactClassComponent = true;
77 |
78 | // to be exported like React.createElement, React.Component
79 | const QndReact = {
80 | createElement,
81 | Component
82 | };
83 |
84 | export default QndReact;
85 |
--------------------------------------------------------------------------------