Skip to content

Better to return created reactElement.#213

Closed
DimaZab wants to merge 1 commit intoshakacode:masterfrom
DimaZab:return-react-element
Closed

Better to return created reactElement.#213
DimaZab wants to merge 1 commit intoshakacode:masterfrom
DimaZab:return-react-element

Conversation

@DimaZab
Copy link
Copy Markdown
Contributor

@DimaZab DimaZab commented Jan 19, 2016

If I use only React component and I want to manually set state, maybe better to return rendered reactElement?

  render(name, props, domNodeId) {
    const reactElement = createReactElement({ name, props, domNodeId });
    return ReactDOM.render(reactElement, document.getElementById(domNodeId));
  }

// then I can
  var renderedElement = ReactOnRails.render('Element', {}, 'app');
  renderedElement.setState({ option: value });

Review on Reviewable

@justin808
Copy link
Copy Markdown
Member

@DimaZab I've never seen that pattern. What's the use case? Jade?

@alexfedoseev any opinion?

@justin808
Copy link
Copy Markdown
Member

@DimaZab Maybe push up small test repo demonstrating this?

@alex35mil
Copy link
Copy Markdown
Member

Also never seen that pattern. Use case will be nice.

@DimaZab
Copy link
Copy Markdown
Contributor Author

DimaZab commented Jan 20, 2016

@justin808, @alexfedoseev https://github.com/DimaZab/example here is an example, see README.

And if we look in react source code we will see that render method return created react element.

  render: function (nextElement, container, callback) {
    return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
  }

@alex35mil
Copy link
Copy Markdown
Member

@DimaZab @justin808 It makes sense 👍

@justin808
Copy link
Copy Markdown
Member

OK -- so no harm in doing this. Yikes, and yuck for mixing jQuery with React! 😄

@justin808
Copy link
Copy Markdown
Member

@DimaZab can you please add a JS test for this. I think JS will be sufficient. rather than a full integration test.

@DimaZab
Copy link
Copy Markdown
Contributor Author

DimaZab commented Jan 21, 2016

@justin808 I agree about jQuery and React but it's only for the first time.

@DimaZab
Copy link
Copy Markdown
Contributor Author

DimaZab commented Jan 21, 2016

@justin808 I've try to write test for this method:

  render(name, props, domNodeId) {
    const reactElement = createReactElement({ name, props, domNodeId });
    return ReactDOM.render(reactElement, document.getElementById(domNodeId));
  },

But get an error: 'document is not defined'. So, can I use something like mock-browser (https://www.npmjs.com/package/mock-browser) or may be you know better way?

@justin808
Copy link
Copy Markdown
Member

@DimaZab Sure -- you'll need to use something like that. Thanks!

@DimaZab DimaZab force-pushed the return-react-element branch 2 times, most recently from 1a624fa to 7e77cf9 Compare January 22, 2016 13:13
@DimaZab
Copy link
Copy Markdown
Contributor Author

DimaZab commented Jan 22, 2016

@justin808 done =)

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we name this "actualElement" or "actualComponent"?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@justin808 I think we should stick with the JSX testing convention, which is to leave it as actual

@justin808
Copy link
Copy Markdown
Member

@DimaZab, I'd like to get the merged as soon as you complete the changes I've requested. Thanks.


Reviewed 3 of 3 files at r1.
Review status: all files reviewed at latest revision, 2 unresolved discussions.


Comments from the review on Reviewable.io

@DimaZab DimaZab force-pushed the return-react-element branch 2 times, most recently from b2e33b4 to 679ce31 Compare January 25, 2016 11:20
@DimaZab
Copy link
Copy Markdown
Contributor Author

DimaZab commented Jan 25, 2016

@justin808 done

@justin808
Copy link
Copy Markdown
Member

Some additional small items.


Reviewed 5 of 5 files at r2.
Review status: all files reviewed at latest revision, 5 unresolved discussions, some commit checks failed.


docs/additional_reading/javascript_rendering.md, line 26 [r2] (raw file):
Need empty line at end of file per red marker.


node_package/src/ReactOnRails.js, line 31 [r2] (raw file):
we need to put the return value here, @DimaZab


node_package/tests/ReactOnRails.test.js, line 24 [r1] (raw file):
I'm not 100% sold that we're using the right terminology. However, it's not critical. @jbhatab?


README.md, line 380 [r2] (raw file):
Let's rename to

Rails View Rendering from Inline JavaScript


Comments from the review on Reviewable.io

@DimaZab DimaZab force-pushed the return-react-element branch 3 times, most recently from 81e8884 to 386599a Compare January 26, 2016 14:40
@justin808
Copy link
Copy Markdown
Member

Reviewed 5 of 6 files at r2.
Review status: 2 of 5 files reviewed at latest revision, 6 unresolved discussions.


docs/additional_reading/rails_view_rendering_from_inline_javascript.md, line 7 [r3] (raw file):
We need to state the return value here.

We should copy the jsdoc from the JS file.


node_package/src/ReactOnRails.js, line 32 [r3] (raw file):
This should go into the doc rails_view_rendering_from_inline_javascript.


Comments from the review on Reviewable.io

@DimaZab
Copy link
Copy Markdown
Contributor Author

DimaZab commented Jan 27, 2016

@robwise Thank you)

@robwise robwise closed this Jan 30, 2016
AbanoubGhadban pushed a commit that referenced this pull request Sep 25, 2025
Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
AbanoubGhadban pushed a commit that referenced this pull request Sep 26, 2025
Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants