Skip to content

Latest commit

 

History

History
71 lines (47 loc) · 2.13 KB

2-Setup-React-Environment.md

File metadata and controls

71 lines (47 loc) · 2.13 KB
Raw

Table of Contents 📚

Install Node.js | Create React App | Importing Libraries | Useful IDE Extensions

How to get a React app started for development.


Install Node.js

  1. Open your command prompt or terminal window
  2. Run node -v
  3. If you don't have Node.js installed on your computer, download the latest version here.

Create a React App

using Vite

  1. Open your command prompt or terminal window
  2. npm create vite@latest
  3. Specify project name (is vite-project by default)
  4. Select a framework (arrow key down to React)
image
  1. Navigate to the project folder you just created (vite-project or your custom name)
  2. Run npm install
  3. Open the project in VS Code (hint: shortcut code .)
  4. Open a terminal in VS Code
  5. Run npm run dev in the IDE terminal
  6. Vist the local host url it gives you to see your React & Vite App running on your local computer.

image



Example: Importing Bootstrap5 library

  1. Open a terminal and navigate to your react app folder.
  2. npm install boostrap@latest
  3. src > App.css => [remove] the contents of the entire App.css file
  4. src > index.css => [delete] the file entirely
  5. src > main.tsx => [remove] the ./index.css import
  6. add to main.tsx 
    import 'bootstrap/dist/css/bootstrap.css'

Useful IDE Extensions

on VS Code

Prettier - Code format

- helps you format your code

Tip: To in VS Code go to: Preferences > Settings => Search: "format on save" => check the box under "Editor: Format On Save"
This allows Prettier to format the code every time the file is saved.

ES7 + React/Redux/React-Native sn

- allows you to type `rafce` to quickly export a React function template to your file.