This is my first using of react.js and
Code works in browser but html is highlighting in red how to fix this. I'm using JSX Harmony, Webstorm 11 ?
You can't put raw HTML/JSX into render. If you look at the docs, you'll see that you need to pass a ReactElement to render.
The easiest way to do that would be to create a simple React class using React.createClass()
Related
I am using Typescript and REACT and I want to utilize and wrap some custom html elements in my TSX. For example, I am using a library with a customer html element called ch5-button an it is used in a vanilla html file as such
<ch5-button class="shadow-pulse-button" type="default" shape="circle" label="" iconClass="fas fa-award">
</ch5-button>
I did a ton of searching, but seems like i am not even smart enough to get the search correct to find how to do this. I am not even sure if I have the correct import statement to get those elements -- the closest I got was :
declare var CrComLib: typeof import('#crestron/ch5-crcomlib');
...
const ch5Button = new CrComLib.Ch5Button();
console.log("ch5Button");
console.log(ch5Button);
The console.log display <ch5-button></ch5-button> soI have no idea if I am even on the right track to using this thing. The ch5Button is a class with a lot of methods that look pretty much like what an html element would have but I just dont know what to do with it and how to learn a method for using it. I found some sites that explain how to use observables and such but I am sketchy on if I am heading down the right path. I have attached am image of what some if the properties and methods of the ch5Button looks like in chrome debugger.
Can anyone point me in the right direction? I would create a REACT component that wraps this class and can use props to set the correct attributes etc.
I am very comfortable building REACT apps but admittedly, I am not an advanced developer with it yet but doing my best to learn.
I am trying to build a react app with customized components. The input to the app is a jsx(as a string) coming from an API.
Now i want to render this input jsx (a string variable), but not able to do that. I have tried eval() and dangerouslySetInnerHTML options, but it did not work out.
My JSX String looks like
'<div> <MyComponent attr_1={this.state.array["field"]}></MyComponent> </div>'
Hi I figured out JsxParser is the right way of solving my problem.
react-jsx-parser provides capability to parser and render react component from JSX string.
I'm doing a video course from Packt on React. I'm trying to build a component.
Unfortunately I think the video course is a little outdated.
When I save my js file with a component I get this message in the browser console:
index.js:19240 Uncaught TypeError: _react2.default.render is not a function
My package.json looks like this:
https://gist.github.com/anonymous/396478849378a7a31c2dfc3fe8290ed4
My webpack config looks like this:
https://gist.github.com/anonymous/43fa0751262b5faab1e6910ce53b1c0d
My own script looks like this:
https://gist.github.com/anonymous/6936234da970dadaf4b06e3f9e95e404
My guess is that I'm using either the wrong call to render the component, or that I'm using an outdated react package.
What do I need to do in order to successfully call a method for rendering the component?
To render a react element into a DOM node, you should use ReactDOM.render(). So, replace React.render(component, document.getElementById('react')) with ReactDom.render(component, document.getElementById('react')) in your scripthttps://gist.github.com/anonymous/6936234da970dadaf4b06e3f9e95e404
For more info, visit https://reactjs.org/docs/rendering-elements.html
If you go to the React home page and add the attribute className='button' to the first example "A Simple Component" you should get this result:
(i.e. the div with "Hello Jane" now looks like a button)
If you also add the attribute is='super-nice-button' you should get this result:
(i.e. the button styling is gone)
Why you ask? Seems when you combine className with is react doesn't generate a class attribute on the resulting dom node instead it generates a classname (which obviously has no meaning for the browser). Watch the difference below.
With only the class attribute:
With both the class and the is attributes:
My question: Why does react generate classname and not class when using the is attribute on a react element (and essentially destroying all styling)?
(background: I'm using inline-styling (or Fela) and I like to use the is attribute to tag my divs/panels so I can easily see the flow of components when clicking "Inspect Element" without having to tab over to the "React devtools". I understand it's kind of a hack but is is a supported attribute in React and HTML and it's a nice short word :) )
This is likely related to this:
https://github.com/facebook/react/issues/4933
You'll need to set class instead of className if you're pretending it's a WebComponent.
Personally I'd go a different route, still have it processed like a React component, and do it in a different way, or just use the React devtools.
FWIW, this answer was researched on-the-fly. For future reference, here's the flow:
1) Verified behavior using a basic React JSX fiddle. Confirmed.
2) Searched for the is HTML attribute, which led here within first few links:
What is HTML "is" attribute?
3) Looking in the W3C docs I learned the name of what is is used for. Then I searched for "react components w3c custom elements" which led quickly to:
https://github.com/facebook/react/issues/4933
4) Verified using class instead of className on WebComponent-like DOM, same fiddle.
So from complete ignorance and some surprise I'd say I found the answer in about five minutes.
I see this a lot...
this.function = this.function.bind(this)
Is there a good video that explains what's happening here?
Thanks!
I'm assuming you are already using babel to compile your code, why not use the class properties feature and then you define your class method as an arrow function and don't have to bind it in the constructor. https://medium.com/#joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a#.igcom8sgv gives step by step how to set it up then you write your class methods like such : myFunction = () => { // do stuff } and the arrow function binds this appropriately.
WebStorm is most powerfull IDE for React: understand JSX Harmony, Components, props, state, etc. Has code auto formatting, understand npm scriptsm etc.
for free..
I always used Brackets, but when I started working with React I had to switch to a different editor due to the complete lack of support by Brackets.
I'm now using Atom with ton of plugins to work with React and be comfortable, these are the ones needed to work with React:
language-babel by gandm
linter-eslint by AtomLinter
react by orktes
the latter, especially, has an awesome support for React and JSX stuff.