ReactJS in an existing HTML
I'm creating my first application with ReactJS. So I want to know if React can be used (added) in an existing HTML ?
Please help me
javascript html reactjs
asked Apr 15 '16 at 15:30
RandaRanda
98138
add a comment |
I'm creating my first application with ReactJS. So I want to know if React can be used (added) in an existing HTML ?
Please help me
javascript html reactjs
asked Apr 15 '16 at 15:30
RandaRanda
98138
add a comment |
I'm creating my first application with ReactJS. So I want to know if React can be used (added) in an existing HTML ?
Please help me
javascript html reactjs
asked Apr 15 '16 at 15:30
RandaRanda
98138
I'm creating my first application with ReactJS. So I want to know if React can be used (added) in an existing HTML ?
Please help me
javascript html reactjs
javascript html reactjs
asked Apr 15 '16 at 15:30
RandaRanda
98138
asked Apr 15 '16 at 15:30
RandaRanda
98138
asked Apr 15 '16 at 15:30
RandaRanda
98138
asked Apr 15 '16 at 15:30
RandaRanda
98138
asked Apr 15 '16 at 15:30
RandaRanda
98138
98138
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component
render()
return <div>Hello this.props.name</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
1
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
add a comment |
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
add a comment |
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36651260%2freactjs-in-an-existing-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component
render()
return <div>Hello this.props.name</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
1
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
add a comment |
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component
render()
return <div>Hello this.props.name</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
1
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
add a comment |
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component
render()
return <div>Hello this.props.name</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component
render()
return <div>Hello this.props.name</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
answered Apr 15 '16 at 15:40
Luciano MamminoLuciano Mammino
715722
715722
1
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
add a comment |
1
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
1
1
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
add a comment |
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
add a comment |
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
add a comment |
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
answered Apr 15 '16 at 15:39
rubentdrubentd
1,102821
1,102821
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
add a comment |
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
so we need to transpile anyway if I understand well?
– Webwoman
Jan 16 at 21:14
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
Not necessarily, you can use React with or without jsx: reactjs.org/docs/react-without-jsx.html
– rubentd
Jan 17 at 3:52
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
It's just a lot harder IMO @webman
– rubentd
Jan 17 at 3:53
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
I see I can specifically avoid to transpile if I write directly my component in JS if I understand what you mean logically
– Webwoman
Jan 17 at 12:39
add a comment |
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
add a comment |
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
add a comment |
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
answered Apr 15 '16 at 15:49
andre mcgruderandre mcgruder
1,022188
1,022188
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
add a comment |
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
Ok thank you very much
– Randa
Apr 18 '16 at 14:35
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
thanks andre, it's for basic features I assume?
– Webwoman
Jan 16 at 21:14
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f36651260%2freactjs-in-an-existing-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
