REACT IN VSCODE

Getting Started

Step 1: React Necessary Extensions

Open your vscode then install the following Extensions:

• ⬆️ Simple React Snippets By Burke Holland
• ⬆️ ES7 + React/Redux/React-Native Snippets By dsznajder

This extensions will help you to code react on Visual Studio Code.

Step 2: Setup your First React App

Create a folder and name it whatever you want, then after that, on your vscode click File >> Open Folder, then select the folder or find the folder that you've created earlier.

once you created the folder , open your vscode terminal then type:

    npx create-react-app <app_name>

[ Note ]: Remember your app_name as you will use it later inorder to run the app

once you hit Enter this will show up, dont worry this process takes a while to be finished:

Creating a new React app in [ Your Current Folder Path ]

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1325 packages in 3m

268 packages are looking for funding
  run `npm fund` for details

Installing template dependencies using npm...

added 18 packages, and changed 1 package in 10s

268 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1343 packages in 6s

268 packages are looking for funding
  run `npm fund` for details

12 vulnerabilities (6 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created my-app at C:\Users\Vince\Github-Haimonmon\step-by-step-RM-files\setup-react-vscode\my-app\my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

Step 3: Run your React App

Once Finish you will see a new folder on your vscode Explorer tab named after on your input <app_name> earlier, make sure to open it by typing on terminal.

    cd <folder_name>

after that Run your React App by typing:

    npm start

this will redirect you to browser and will see a React Logo, the following will also show on your vscode terminal:

Compiled successfully!

You can now view my-app in the browser.

  Local:            <local_host>
  On Your Network:  <ip>

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

If you wanna know more about React visit react.dev

Happy React Coding ⚛️