React Installation in Visual Studio Code then Hello World

| Page Views: 64

How to Install and Setup React using Visual Studio Code

In this tutorial we want to cover how to setup and install ReactJS in Visual Studio then create our Hello World app. We use the Create React App template.

Let's go.

Demo

Here's the demo of the simple hello world we create after installation

Video Tutorial

The Video tutorial below contains the complete step by step. It's easy to see than to read. So please watch it then come to the source code.

(a). index.js

Here's our React code. Please watch the video for explanations.

import React from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
}

class App extends React.Component {
  handleClick(event) {
    alert("Aldebaran is a Red Supergiant located in the Consteallattion Tauri");
  }

  render() {
    return (
      <div style={styles}>
        <h2>Aldebaran</h2>
        <p>Click the Button Below</p>
        <button onClick={this.handleClick.bind(this)}>
          Show
        </button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
(c)index.html

Here's the index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
</head>

<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

</body>

</html>
Download

You can download the full source code below or watch the video from the link provided.

No. Location Link
1. GitHub Direct Download
2. GitHub Browse
3. YouTube Video Tutorial
4. YouTube ProgrammingWizards TV Channel

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.




Recommendations


What do You Think


Previous Post Next Post