Simple dumb question about React and JSX

JavaScript
1

I am starting my first project on React Link to the project

And right now I´m just trying to understand the basics to how actually start building an app…(because despite having done the react challenges damn i don´t have the slightest idea in how to start now lol…)

Any way, this is my doubt: Right now I have this code:

class App extends React.Component{
  constructor(props) {
    super(props);
  }
  render(){
    return (
      <div className="testing">
        <h1 className="testingFont">My first react component!!</h1>
        <Editor />
        <Previewer />
      </div>
    )
  }
}

class Editor extends React.Component {
  render() {
    return (<h2>I´m supposed to be the editor</h2>);
  }
}
class Previewer extends React.Component {
  render() {
    return (<h2>I´m supposed to be the Previewer</h2>)
  }
}

And right now the three sentences are rendered in a **single div (they are in the same html box) **

So I thought adding two divs inside each one of them would make the sentence in the Editor component and the sentence in the Previewer component have each own box:

render(){
    return (
    <div className="testing">
      <h1 className="testingFont">My first react component!!</h1>
       <div> <Editor /> </div>
        <div> <Previewer /> </div>
    </div>
      )
  }

But it doesn´t.

How can I make each one have each own independent box?

2

Caveat, I don’t know React (yet)
It looks like your app constructor will create the following structure:

<div>
  <h1>...</h1>
  <editor />
  <previewer />
</div>

Do you just want the three items to have their own div or do you want the three divs wrapped in an enclosing div?

You don’t say what happened when you wrapped the Editor and Previewer in divs in the constructor, but it looks like that is one option to wrap them, the other would be to add the <div> ...</div> tags to the editor and previewer classes themselves.

Back to my question, if you just want the three items to have their own div, you should move the </div> on the last line after the previewer of the app constructor (in your first example) to immediately after the closing </h1> tag, and then try wrapping the previewer and editor code in a <div>...</div> combination.

If you want the three <div>s wrapped by an enclosing <div> do the above, but add another <div> at the beginning and another </div> at the end of the app constructor

3

As far as I can see if that render is in the top-level component, it should work fine, what is not working for you, and what’s the error?

4 
render(){
    return (
    <div className="testing">
      <h1 className="testingFont">My first react component!!</h1>
       <div> <Editor /> </div>
        <div> <Previewer /> </div>
    </div>
      )
  }

This does give them each their own div. And both divs will be inside <div className="testing">.

That is because

Adjacent JSX elements must be wrapped in an enclosing tag