REACT - Simple Intro component not rendering?

JavaScript
1

Hey I’ve been trying React, total newbie but this component mainIntro.js is not getting imported into the main react component App.js. I’d appreciate if anyone can help me figure out how this works !

EDIT: I’m using CDN links for React and ReactDOM because I was trying this out on a friend’s laptop.

mainIntro.js

const mainIntro = props => (
    <div id="quote-box">
     <h1> Hunter x Hunter Quotes </h1>

     <div id="text">
        "When I say it doesn't hurt me, that means I can bear it."
     </div>

     <div id="author">
        - Killua Zoldyck
     </div>

     <button id="new-quote"> Next Quote </button>

     <a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a>

    </div>
)

export default mainIntro;

App.js

import mainIntro from './components'

class App extends React.Component{
    render(){
        return(
            <mainIntro />
        );
    }
}


const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);
2

React component names must start with a capital letter :wink:

4

I tried that and renamed the component everywhere to MAINintro . Yet , it’s not getting rendered .

5

I did a quick test on codepen and it’s rendering fine:

Maybe you forgot to define the “quoter” ?

7

It rendered in this way ! But I had the component in a different file called Mainintro,js and imported that. It doesn’t work that way ? Why is that ?

8

Did you use:

import MainIntro from './components/MainIntro.js'

and in MainIntro.js you need to import React:

import React from 'react';

const MainIntro = props => (
    <div id="quote-box">

    [.....]

    </div>
)

export default MainIntro;
10

Did that but won’t work. I think I can’t use import React from 'react'; because I’m using a CDN. Is that why ?

11

It’s probably because the way you are writing your component. You are using a functional component, but there’s an error in your code. It should be:

const MainIntro = props => {
  return (
    <div id="quote-box">
     //... rest of the code   
    </div>
  );
}

Notice that you are not using curly brackets after the arrow and you are not returning anything either. This is not a React thing, this is JavaScript syntax. I’d suggest you to read more about arrow functions and ES6 features since you are going to see them a lot in React apps.

Also use the documentation, I find React official docs to be very helpful unlike other documentations.

13

I thought so too ! I tried the exact same code with using return specifically and it still won’t render.

14

Can you provide me with the exact same code that you are currently using in both modules?

15

I’d recommend using codepen for first steps with react (since they make importing things easy). If you want to go further, consider a code editor like

and use

to setup your initial files.

React is a steep road, if you begin, so I agree with @Gilbert1391, get comfortable with ES6 features first!

16

This is the component it self

const MainIntro = props => {
    return(
    <div id="quote-box">
     <h1> Hunter x Hunter Quotes </h1>

     <div id="text">
        "When I say it doesn't hurt me, that means I can bear it."
     </div>

     <div id="author">
        - Killua Zoldyck
     </div>

     <button id="new-quote"> Next Quote </button>

     <a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a>

    </div>
    );
}

export default MainIntro;

And this is the main file which Im trying to import the component above into

import MainIntro from './components/MainIntro.js';

class App extends React.Component{
    render(){
        return(
            <MainIntro />
        );
    }
}


const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);

Also this is the index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HxH Quote Generator</title>

    <!--CDN links below this line-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
    <!--CDNs end here-->
    
    <link rel="stylesheet" href="style.css">
    
</head>
<div id="quoter"><!-- React JSX comes in here--></div>
<script type=text/babel src="app.js"></script>
</html>
17

I am using VS Code and also I have a fair grip over ES6 and React ( theory ). I’ve finished the Front End Certification and this was for one of the final projects

18

are you importing React at the top of your <MainIntro> component, i.e.: import React from "react"; ?

19

Tried importing React in both the js files and no results.:frowning:

20

But I didn’t see the import in your snippet?, show me the entire code for your MainIntro component.

Take a look at that code, maybe you can see if something is missing in your code?

22

Yep it’s all the same. I’m pretty sure it’s not working due to the CDN. I’ll install React on this laptop ( it’s my friend’s ) and try again. I don’t know where to put the React app afterwards though ? I mean is Heroku the only way or are there easier ways ? I need to put the link on FCC’s certifcations page.

23

The example below is working:

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
  <div id='quoter'></div>
  <script type='text/babel'  >



class App extends React.Component{
   render(){
       return(
           <MainIntro />
       );
   }
}

const MainIntro = props => (
   <div id="quote-box">
    <h1> Hunter x Hunter Quotes </h1>

    <div id="text">
       "When I say it doesn't hurt me, that means I can bear it."
    </div>

    <div id="author">
       - Killua Zoldyck
    </div>

    <button id="new-quote"> Next Quote </button>

    <a href="#" id="tweet-quote" target="_blank"> Tweet this quote </a>

   </div>
)



const mainNode = document.getElementById("quoter");
ReactDOM.render(<App />,mainNode);

 </script>
</body>
</html>

The problem seems to be you can’t import things when using a CDN. Take a look at the console: it’s saying “require is not defined” when you use

script type=text/babel src=“app.js”></script

You could also put your react app on github as well, if you upload the build.js file. Codepen also works :wink:

24

I’m not familiar with the CDN, the only way to be 100% sure is if you drag your code to codesanbox for example and see if it works. You can use GitHub to deploy your react app as long as it’s static site (no back-end stuff).

25

I thought you can host only one site per account. Got it. Thanks !