You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.6 KiB
Plaintext
38 lines
1.6 KiB
Plaintext
# Putting it all together
|
|
|
|
At this point the only thing left to do is to create some components and use them!
|
|
|
|
{format: "javascript"}
|
|
```
|
|
const SayNow = ({ dateTime }) => {
|
|
return ['h1', {}, [`It is: ${dateTime}`]];
|
|
};
|
|
|
|
const App = () => {
|
|
return ['div', { 'className': 'header' },
|
|
[SayNow({ dateTime: new Date() }),
|
|
['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
|
|
]
|
|
];
|
|
}
|
|
|
|
render(createElement(App()), document.getElementById('root'));
|
|
```
|
|
|
|
We are creating two components, that output JSM, as we defined it earlier. We create one component prop for the `SayNow` component: `dateTime`. It gets passed from the `App` component. The `SayNow` component prints out the `DateTime` passed in to it. You might notice that we are passing props the same way one does in the real React, and it just works!
|
|
|
|
The next step is to call render multiple times.
|
|
|
|
{format: "javascript"}
|
|
```
|
|
setInterval(() =>
|
|
render(createElement(App()), document.getElementById('root')),
|
|
1000);
|
|
```
|
|
|
|
If you run the code above you will see the DateTime display being updated every second. And if you watch in your dev tools or if you profile the run you will see that the only part of the DOM that gets updated or replaced is the part that changes (aside from the DOM props). We now have a working version of our own React.
|
|
|
|
I> This implementation is designed for teaching purposes and has some known issues and bugs, like always updating the DOM props, along with other things. Fundamentally, it functions the same as React but if you wanted to use it in a more production setting it would take a lot more development.
|
|
|
|
|