43 lines
1.7 KiB
Plaintext
43 lines
1.7 KiB
Plaintext
{sample: "true"}
|
||
# Putting it all together
|
||
|
||
Now that we've explored how React renders your components, it's time to finally 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’ll see the DateTime display being updated every second. And if you watch in your dev tools, or if you profile the run, you’ll 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 bugs, like always updating the DOM props, along with other issues. Fundamentally, it functions the same as React, but if you want to use it in a more production-like setting, it would take a lot more development.
|
||
|
||
|