Setting up a React environment
Tags: react, beginners, webdev, codenewbie
Published: 2020-12-24 03:31:12

Hey learners and beginners. I am starting a new series where you will get to know everything about React. So here is my first post where we will setup our react environment. 

<hr>

### Main tools

You need to install these tools to get started

- Visual Studio Code
![vs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608725901859/fKc_lUzzI.png)

Link ->  [Download VS Code](https://code.visualstudio.com/) 

- Node JS and NPM
![download.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608725911786/NIOUJgZrX.png)
Link ->  [Download](https://nodejs.org/en/download/) 

<hr>

### Create React App

Create React App is a comfortable environment for **learning React**, and is the best wat to start building a new single-page application in React. 

```javascript
npx create-react-app my-app
cd my-app
npm start
```
<hr>

### VS Code Extensions
Get these extension to ease you development workflow

- **Code Snippets**: ES7 React/Redux/GraphQL/React-Native snippets

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608726204119/XjvHryBwm.png)

- **Formatter**: Prettier - Code formatter

![2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608726272200/ggnxQRlYv.png)

[OPTIONAL EXTENSIONS]

- **indent-rainbow**: 
![3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608777765665/OyUCrYBXc.png)

Link ->  [Download](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) 

- **Bracket Pair Colorizer**: 
![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608777828378/eD0OCPba9.png)

Link ->  [Download](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 

<hr>

### Settings.json

Press **Ctrl + Shift + P** and click Open Settings(JSON)

```json
{
      // for prettier configuration
    "editor.defaultFormatter": "esbenp.prettier-vscode", 
    "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
    }, 

    // format code on save
    "editor.formatOnSave": true, 
    
    // update import on file move
    "javascript.updateImportsOnFileMove.enabled": "always",

}
```

### Emmet for JSX
You will need emmet abbreviation for JSX
![6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608778687628/EMD3cZYp2.png)

**Now head towards settings.json again and add these settings**

```json

 "emmet.includeLanguages": {
        "javascript": "javascriptreact", 
    }

```

<hr>

### React developer tools

Now head towards your chrome extension store and download this extension. 

![devtools-v4-screenshot.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608779039566/o_Zf2ftXN.png)

Link ->  [Download React developer tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 

### Install Sass
If you're a sass user you need to install **node-sass** package. 

```npm
npm install --save node-sass
```

<hr>

Now you're done setting up your React Environment. Stay Tuned next post coming up where we will start with **JSX**, **Components**, **Props** and all.

Thank You For Reading!