React Component in Visual Studio Code

JavaScript
1

Greetings;
Can someone please help me with a hint on the below inquiry.

I started the JSX React challenges couple days ago and it has been interesting to explore other extensions of JavaScript and the CSS(SCSS), but I am having problem at this point displaying the JSX React Components on the Webpage(live sever). Can someone please review the link between reactIndex.html and reactJsx.jsx and tell what I am missing

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compitable" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>React Exercise</title>
        <link rel="stylesheet" href="./reactJsx.scss"/>
    </head>
    <body>
        <main class="general-container">
            <div class="exercise-work" id="exercise"></div>
            <div class="students" id="student-supply"></div>
            <div id="type-of-fruits" class="fruits"></div>
        </main>
        <script rel="script-sheet" src="./reactJsx.jsx"></script>
    </body>
</html>

JSX

function GreenFruit() {
    return (
        <div>
            <h1>Green Fruits</h1>
            <ul>
                <li>Plum</li>
                <li>Apple</li>
                <li>Breadfruit</li>
                <li>Tomatoes</li>
                <li>Cucumber</li>
                <li>Watermelon</li>
            </ul>
        </div>
    );
};

function YellowFruit() {
    return(
        <div>
            <h1>Yellow Fruits</h1>
            <ul>
            <li>Bananas</li>
            <li>Goden Plum</li>
            <li>Grapefruit</li>
            <li>Zorzor</li>
            <li>Vahun Plum</li>
            <li>Guava</li>
            </ul>
        </div>
    );
};

class Fruits extends React.Component {
    constructor(prop) {
        super(prop)
    }

    render() {
        return (
            <div>
                <h1>Types of Fruits</h1>
                <GreenFruit />
                <br />
                <YellowFruit />
            </div>
        );
    }
};


ReactDOM.render(<Fruits />, document.getElementById("type-of-fruits"));

Your help will highly be appreciated.

2

Hi!
You need to use npm or yarn.

3

the browser can’t read jsx, it needs first to be converted to js, there are different ways to set up an environment to use react, so please research it

4

Grand Rising Stephen,
I ran npm dev in my Terminal but it is still not working.

5

Grand Rising ILM,
thanks for stopping by. I have done some research about it but none of them seems to solve the problem https://legacy.reactjs.org/docs/introducing-jsx.html. However, thanks for the flashback.

6

those docs are deprecated , you may want to consult the new ones

1 Like
7

I don’t think that’s the right command. npm starts will kick off your React development server. I am certain that’s what you should use.
However, the command to use is determined by what you have in your script. You should also take some time and get familiar with some npm if you’re already not. It’ll save you the hassle.