DEV Community

loading...
Cover image for Setting up a React environment

Setting up a React environment

Rahul
16😬 | Developer and Blogger | JavaScript and React 🍕 | Hustler⚡
・2 min read

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.


Main tools

You need to install these tools to get started

  • Visual Studio Code vs.png

Link -> Download VS Code


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.

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

VS Code Extensions

Get these extension to ease you development workflow

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

1.png

  • Formatter: Prettier - Code formatter

2.png

[OPTIONAL EXTENSIONS]

  • indent-rainbow: 3.png

Link -> Download

  • Bracket Pair Colorizer: 4.png

Link -> Download


Settings.json

Press Ctrl + Shift + P and click Open Settings(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",

}
Enter fullscreen mode Exit fullscreen mode

Emmet for JSX

You will need emmet abbreviation for JSX
6.png

Now head towards settings.json again and add these settings


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

Enter fullscreen mode Exit fullscreen mode

React developer tools

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

devtools-v4-screenshot.png

Link -> Download React developer tools

Install Sass

If you're a sass user you need to install node-sass package.

npm install --save node-sass
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (1)

Collapse
heywirdgirl profile image
van Manh

thank