# React JS Absolute Beginner Getting Started

**URL:** <https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573>\
**Category:** programming\
**Created:** [April 25, 2020, 8:11pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573 "2020-04-25T20:11:03Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [April 25, 2020, 8:11pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/1 "2020-04-25T20:11:03Z")

</div>

Hello.  
I’m following a tutorial on YouTube to get started with ReactJS. I’ve downloaded the starter template from [reactjs.org](http://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 🙂

Thank you very much in advance.

Helena

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [April 25, 2020, 8:16pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/2 "2020-04-25T20:16:39Z")

</div>

![Screenshot 2020-04-25 at 22.36.47](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/4/45b367ce9f4d34be09595b40404fd704bfb1743b.png)

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [April 25, 2020, 8:17pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/3 "2020-04-25T20:17:10Z")

</div>

![Screenshot 2020-04-25 at 22.16.12](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/c/c9289c955467d5770b4757384cc41962c4306088.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 25, 2020, 9:05pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/4 "2020-04-25T21:05:04Z")

</div>

Hi @Helena_G! Welcome to the forums 😀

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

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [April 25, 2020, 9:21pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/5 "2020-04-25T21:21:02Z")

</div>

Hello, Kirupa.  
Yes ☹  
This is what I see.

 ![Screenshot 2020-04-25 at 23.19.49](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/2/2242c9e0b80a48c6748cb9859e2e1a17cc1ef97a.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 25, 2020, 10:03pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/6 "2020-04-25T22:03:26Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/3/350fd18bd69e017d79319920ad1333834b836788.jpeg)

From the screenshots, what you have should work.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 25, 2020, 10:11pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/7 "2020-04-25T22:11:54Z")

</div>

```
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).

---

<div class="post-metadata">

**Author:** ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)\
**Post date:** [April 25, 2020, 10:24pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/8 "2020-04-25T22:24:39Z")

</div>

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

Thank you @kirupa

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [April 26, 2020, 4:56am UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/9 "2020-04-26T04:56:08Z")

</div>

> [@senocular](#):
>
> There should be no parens in the extends clause (you _can_ but just not in this case).

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 26, 2020, 12:54pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/10 "2020-04-26T12:54:20Z")

</div>

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.

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Mix-ins).

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [April 26, 2020, 3:54pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/11 "2020-04-26T15:54:14Z")

</div>

Ah right, this is JavaScript:

```javascript
class A extends class B extends function(){ return function(){
    return "senocular".constructor
}() }() { } { }

```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 26, 2020, 5:41pm UTC](https://forum.kirupa.com/t/react-js-absolute-beginner-getting-started/642573/12 "2020-04-26T17:41:57Z")

</div>

![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/3/33e0e73a622e1408c797d23f6394004d08c9749d.jpeg)