React JS Absolute Beginner Getting Started

Hello.
I’m following a tutorial on YouTube to get started with ReactJS. I’ve downloaded the starter template from reactjs.org I just want to see my first "Hello World! on the screen. But I fail.

I have an index.html file.
And I have the app.js file.

Please, check screenshots below.

Why it doesn’t work? I reviewed several times my tutorial. I don’t understand what is wrong with my code.

Could you please help. Can’t wait to get start and to move further :slight_smile:

Thank you very much in advance.

Helena

Hi @Helena_G! Welcome to the forums :grinning:

When you preview your page in your browser, do you see any errors in the Console in your browser developer tools?

1 Like

Hello, Kirupa.
Yes :frowning:
This is what I see.

Really strange! Can you copy/paste your code here? You can use this button to format your code correctly as part of the response:

From the screenshots, what you have should work.

class App extends React.Component() {

should be

class App extends React.Component {

There should be no parens in the extends clause (you can but just not in this case).

2 Likes

Thank you @senocular It did work :grinning: Now, I can move on to the next tutorial.

Thank you @kirupa

2 Likes

Just curious, what drives your intuition about parentheses in cases like this?

The extends clause accepts any expression. So you can put just about anything there, including a function (invoked with parens) that you can call and return a class with.

class Animal {}
class FeralAnimal {}
function getAnimal () {
    return Math.random() < 0.5 ? Animal : FeralAnimal;
}

class Cat extends getAnimal() {}
let missPrincess = new Cat();
console.log(missPrincess instanceof FeralAnimal); // ???

This is used with class-based mixins.

2 Likes

Ah right, this is JavaScript:

class A extends class B extends function(){ return function(){
    return "senocular".constructor
}() }() { } { }
2 Likes

image