Write a React Component from Scratch

JavaScript
1

Tell us what’s happening:

Your code so far


// change code below this line
class MyComponent extends React.Component {
  render() {
    return (
      <h1>My First React Component!</h1>
    );
  }
}

ReactDOM.render(<MyComponent/>,challenge-node);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/write-a-react-component-from-scratch

2

ReactDOM.render(,challenge-node);

:eyes:
Here is the error, do you know how to fix it?

3

I know what is wrong with the above… or at least one item. I am currently stuck this problem too, but I feel like my answer is right…

4

My answer does not get a “correct” mark on the final test but I think it is an improvement over yours since it uses document.getElementById(). @Layer - do you know what is wrong with mine?

class MyComponent extends React.Component{
constructor(props){
super(props);
};
render(){
return(


My First React Component!



)
};
};

ReactDOM.render(MyComponent, document.getElementById(‘challenge-node’));

5

I was missing the html < /> tags in mine… “reactDom.render(, document.getElement…”

4 Likes
6 
// change code below this line
class MyComponent extends React.Component {

  render() {
    return (
      <div>
        <h1>My First React Component!</h1>
        {/* change code below this line */}

        {/* change code above this line */}
      </div>
    );
  }
};
ReactDOM.render(<MyComponent />, document.getElementById("challenge-node"))
7

@Isa.Anagreh You posted some code, but you did not ask any question, so we do not know how to help you.

1 Like
8

Missing class “challenge-node” inside

9

IT does get correct mark so have a look at it.

class MyComponent extends React.Component{
constructor(props){
super(props)
}
render() {
return (


My First React Component!



);
}
};
ReactDOM.render(, document.getElementById(“challenge-node”))
11

I know you passed it by now but for the future strugglers here’s the code to pass it :

class MyComponent extends React.Component {
render() {
return (


My First React Component!



);
}
};
ReactDOM.render( , document.getElementById(“challenge-node”)
);
12