React Course: Using Visual Studio Code

React is one of the most popular libraries in modern web development, helping to efficiently build user interfaces (UI). In this tutorial, we will explore how to set up and develop a React project using Visual Studio Code (VS Code).

1. Introduction to Visual Studio Code

VS Code is a source code editor developed by Microsoft, supporting various programming languages. It is lightweight yet provides powerful features, making it popular among developers. The main features of VS Code include:

  • Scalability and Customization
  • Integrated Terminal
  • Version Control (Git) Integration
  • Debugging Support
  • Variety of Themes and Icon Packages

2. Setting Up the Environment

2.1 Installing VS Code

First, you need to install VS Code. Visit here to download and install the version suitable for your operating system. The installation process is straightforward and consists of simple click steps.

2.2 Installing Node.js and npm

To use React, you need Node.js and npm (Node Package Manager). Node.js is a JavaScript runtime environment, while npm is a tool for managing JavaScript packages. Download and install the installer from the link below:

Once the installation is complete, you can check if the installation was successful by entering the following commands in the terminal:

node -v
npm -v

2.3 Creating a React Project with Create React App

After installing VS Code, Node.js, and npm, you can create a new React application. By using Create React App, it sets up a basic React project with all configurations automatically done. Run the following command to create the project:

npx create-react-app my-app

Here, my-app is the name of the project you are creating. You can change it to whatever name you prefer. Once the command is complete, navigate to that directory:

cd my-app

3. Opening the Project in VS Code

After launching VS Code, select File > Open Folder from the top menu and choose the created my-app folder. You can now check the project structure.

4. Understanding the Project Structure

The basic project structure generated using Create React App is as follows:

  • node_modules/: Contains all the packages used in the project.
  • public/: Contains static files and the HTML template.
  • src/: Contains the application’s code, primarily JavaScript and CSS files.
  • package.json: Contains information about the project and manages dependencies and scripts.
  • README.md: A documentation file about the project.

5. Setting Up the Development Environment

5.1 Code Formatting and Linting

To maintain a consistent code style and improve code quality, we set up ESLint and Prettier. Install both packages with the following command in the terminal:

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

Then, create .eslintrc.js and .prettierrc files in the root directory of the project to add configurations. The content of the .eslintrc.js file is as follows:

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'prettier',
    ],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        sourceType: 'module',
    },
    plugins: [
        'react',
        'prettier',
    ],
    rules: {
        'prettier/prettier': 'error',
    },
};

You can add the following settings in the .prettierrc file:

{
    "semi": true,
    "singleQuote": true
}

5.2 Installing VS Code Extensions

VS Code extensions are convenient development tools; we will install several useful extensions for React development. Recommended extensions include:

  • ESLint
  • Prettier – Code formatter
  • Simple React Snippet
  • Reactjs code snippets

Extensions can be installed by clicking the Extensions icon in the left sidebar and entering the names in the search bar.

6. Basic Concepts of React

To understand React, you need to know a few foundational concepts:

  • Component: The fundamental building block of a React application. Components are defined as JavaScript functions and facilitate code reuse.
  • JSX: Stands for JavaScript XML, it uses a syntax similar to HTML to represent the UI.
  • State: Represents the data state of a component, causing re-rendering when data changes.
  • Props: Data passed from parent components to child components.

7. Creating a React Component

Now let’s create a React component. Create a file named MyComponent.js in the src/ folder and enter the following code:

import React from 'react';

const MyComponent = () => {
    return (
        

            
Hello, React!

            
This is my first React component.

        

    );
};

export default MyComponent;

Now, let’s use this component in the src/App.js file. Update the code as follows:

import React from 'react';
import MyComponent from './MyComponent';

function App() {
    return (
        

            
        

    );
}

export default App;

8. Setting Up React Routing

To implement navigation between pages in a React application, we use the react-router-dom library. Install this package with the following command:

npm install react-router-dom

Now, you can set up routing. Modify the src/App.js file as follows:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import MyComponent from './MyComponent';

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

In the code above, AboutComponent is a newly added component. You can create new components in the same way for routing.

9. Communicating with APIs

To communicate with external APIs in a React application, you can use libraries like axios. Install axios with the following command:

npm install axios

Here’s a simple example of fetching data using axios. Modify src/MyComponent.js as follows:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios('https://api.example.com/data');
            setData(result.data);
        };

        fetchData();
    }, []);

    return (
        

            
Data Fetching Example

            
    
                {data.map(item => (
                    
  • {item.title}
    • 
                ))}
            

        

    );
};

export default MyComponent;

10. Building and Deploying the Application

Once development is complete, you need to build the application to prepare for deployment. You can perform the build with the following command:

npm run build

Executing the above command will create a build/ folder with optimized static files in it. You can upload these files to your chosen hosting service for deployment.

11. Conclusion

In this tutorial, we learned how to develop a web application using Visual Studio Code and React. You can build dynamic user interfaces using React and create an efficient development environment with the various features of VS Code. I hope you will continue to learn more in-depth React and frontend development techniques!