-
-
Save gaearon/faa67b76a6c47adbab04f739cba7ceda to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Add React in One Minute</title> | |
| </head> | |
| <body> | |
| <h2>Add React in One Minute</h2> | |
| <p>This page demonstrates using React with no build tooling.</p> | |
| <p>React is loaded as a script tag.</p> | |
| <p> | |
| This is the first comment. | |
| <!-- We will put our React component inside this div. --> | |
| <div class="like_button_container" data-commentid="1"></div> | |
| </p> | |
| <p> | |
| This is the second comment. | |
| <!-- We will put our React component inside this div. --> | |
| <div class="like_button_container" data-commentid="2"></div> | |
| </p> | |
| <p> | |
| This is the third comment. | |
| <!-- We will put our React component inside this div. --> | |
| <div class="like_button_container" data-commentid="3"></div> | |
| </p> | |
| <!-- Load React. --> | |
| <!-- Note: when deploying, replace "development.js" with "production.min.js". --> | |
| <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> | |
| <!-- Load our React component. --> | |
| <script src="like_button.js"></script> | |
| </body> | |
| </html> |
I'm getting "You liked comment number undefined"
only on the first button. When I click #2 or #3 it works well.
Even if I switch between #2 and #1, and click #2 (which is now the first in the list) - I get the same "undefined" message.
Any clue why?
Using this approach, how do you import local components and how do you import thrird party components (charka ui components for example)
thanks for the simple to follow and helpful reuse of the previous DOC code.
Question: on line 26 you have domContainer but should that be declared in line 25 or is your way correct and I need to learn something? Any help would be appreciated. Thanks
I wondered the same. Following the docu it should be declared as a root container for each element attributes rendering... but ReactDom is being used as a root container. So, for each element ( being domContainer), render the attribute ( commentID).
It seems to be a different way when elements are outside of the components.
I'm getting "You liked comment number undefined" only on the first button. When I click #2 or #3 it works well.
Even if I switch between #2 and #1, and click #2 (which is now the first in the list) - I get the same "undefined" message. Any clue why?
Does the first dataset is correctly?
pretty nice!
Button does not show on my screen
< нормал >
хорош
amazing
Cool!
Amazing
Can we use functions instead of classes to load components?
帅的呀~
Thanks very much!
root.render(e(LikeButton)); this line i am not understand
root.render(e(LikeButton)); this line i am not understand
谢谢你
I had no idea it was possible to have as many root elements as you want. Could be considered as bad practice? Does it matter?
It seems to be great.
root.render(e(LikeButton));this line i am not understand
Read the .js file that sets alias "e" to "React.createElement"
awesome
so niubility
in the return statement if add html tags I am getting syntax errors
can you please show an example with tags rendered with latest functions tags
root.render(e(LikeButton));this line i am not understand
Same as root.render(React.createElement(LikeButton));. Because of the earlier const e = React.createElement.
hi,
thank you
It's very helpful to understand React advantage.
achei um pouco complexo com o CDN .