<!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@17/umd/react.development.js" crossorigin></script> | |
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> | |
<!-- Load our React component. --> | |
<script src="like_button.js"></script> | |
</body> | |
</html> |
This comment has been minimized.
This comment has been minimized.
evans was here, also evans says react is cool, so far |
This comment has been minimized.
This comment has been minimized.
how to do this JSX way? |
This comment has been minimized.
This comment has been minimized.
JSX is more understandable for both beginner and |
This comment has been minimized.
This comment has been minimized.
world can develop faster and faster by the passion of you. |
This comment has been minimized.
This comment has been minimized.
How can we import external components? Let say: import Main1 from './Main1'; class MainContentByCity extends React.Component {
}; const domContainer = document.querySelector('#root'); |
This comment has been minimized.
This comment has been minimized.
Thank you @gaearon ! React documentation may be the most accomplished one I ever seen on a NodeJS project. I believe one needs to clearly undestands React & ReactDOM pckg APIs allongside nodeJS transpiling/compiling/rendering steps to truly master the library in a broader software ecosystem. Despite the fact CRA, Next, Gatsby or jsx synthax are genius abstractions, they may all hide the powerfull opportunities plain React has to offer. |
This comment has been minimized.
This comment has been minimized.
When I execute the code , on the click of first like button I get you liked comment number undefined. Only for the first like button. Did anyone encounter the same issue? |
This comment has been minimized.
This comment has been minimized.
why use cdn links.... go staight to npm start . after use to react.... cdn react use to same for jquery... So best way react learning for npm install after use react |
This comment has been minimized.
This comment has been minimized.
I visited from React website! |
This comment has been minimized.
This comment has been minimized.
For this example, you cannot use import because browsers would not understand it, you would have to use a transpilator before on server side, like babel, but, again, for this example, using react on a existing web page, regardless if it uses react on server side, you could not consider the use of the transpilator. |
This comment has been minimized.
This comment has been minimized.
I'm Just approaching the world of JS and react. This simple example let me. understand how powerful this framework is. Amazing. |
This comment has been minimized.
This comment has been minimized.
Learning React in a hurry. This example 'add react to a website' + React Devtools for Chrome was great for understanding the simplicity and power of React. Thank you. |
This comment has been minimized.
This comment has been minimized.
What just happened? I was able to follow along and get this tutorial. |
This comment has been minimized.
This comment has been minimized.
e(LikeButton, { commentID: commentID }), |
This comment has been minimized.
This comment has been minimized.
This correct way for JSX Need to take ComponentDidMount componentDidMount() {
|
This comment has been minimized.
This comment has been minimized.
Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags |
This comment has been minimized.
This comment has been minimized.
HTML+JAVA+JavaScript +JSX+ES6+CSS.... React is an amazing.....MESS! |
This comment has been minimized.
This comment has been minimized.
@jossa2, React is a front-end library so it's all HTML, CSS, and vanilla JavaScript (you don't have to use JSX or ES6). Plus you get to choose whatever language for your backend which can also be JavaScript. It's not that MESSY! |
This comment has been minimized.
This comment has been minimized.
Given some of the comments here it might be worth noting the tutorial that references this gist https://reactjs.org/docs/add-react-to-a-website.html This is just one example of how to quickly add React to a site, without a toolchain. So without any JSX, Babel etc. There are other examples that cover other ways including JSX, and it is noted that this would not be the approach to using multiple components when building a SPA to scale. |
This comment has been minimized.
This comment has been minimized.
That's because you can not understand it and impossible to using it |
This comment has been minimized.
This comment has been minimized.
thanks for your demo |
This comment has been minimized.
This comment has been minimized.
You are Welcome!
…On Mon, Jan 20, 2020, 09:09 xingorg1 ***@***.***> wrote:
thanks for your demo
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<https://gist.github.com/faa67b76a6c47adbab04f739cba7ceda?email_source=notifications&email_token=ABAOKSXAFCIK6YUN5UIBJCTQ6UMH7A5CNFSM4HP6BQD2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAF76JO#gistcomment-3144855>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABAOKSSLNIJJMPIG23JDFM3Q6UMH7ANCNFSM4HP6BQDQ>
.
|
This comment has been minimized.
This comment has been minimized.
is there a way to include hooks in this easy example? At least two (useState, useEffect) |
This comment has been minimized.
This comment has been minimized.
What the commentID at line 30 was supossed to do ? I thought that it should set a id in the button element, but it didnt. |
This comment has been minimized.
This comment has been minimized.
will react re-render if other parts of the DOM change? let's say we have
if vue changes its view part of the app, will React rerender and wipe off the |
This comment has been minimized.
This comment has been minimized.
To be sure that you have understood correctly, modify this example to work JS 100%. |
This comment has been minimized.
This comment has been minimized.
very nice! |
This comment has been minimized.
This comment has been minimized.
commentID at line 30 is a props to the LikeButton component, as you can see this props is used line 13: |
This comment has been minimized.
This comment has been minimized.
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 |
This comment has been minimized.
This comment has been minimized.
Very nice! |
This comment has been minimized.
This comment has been minimized.
This is amazing and still a wonderful example. Thank you! |
This comment has been minimized.
This comment has been minimized.
Had build a complete project with react and find it amazing.! <3 |
This comment has been minimized.
This comment has been minimized.
< нормал > |
This comment has been minimized.
This comment has been minimized.
Amazing how fast it works ! |
This comment has been minimized.
This comment has been minimized.
awssmm |
This comment has been minimized.
This comment has been minimized.
Informative. Thank you! |
This comment has been minimized.
This comment has been minimized.
is it possible to remove the React component (clicking on a button for exemple and emptying the div) and reload it (clicking on another button...) without reloading the page ? |
This comment has been minimized.
Good!