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
  

Link -> Download VS Code

• Node JS and NPM
  
  Link -> Download

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  

VS Code Extensions

Get these extension to ease you development workflow

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

• Formatter: Prettier - Code formatter

[OPTIONAL EXTENSIONS]

• indent-rainbow:
  

Link -> Download

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

• Bracket Pair Colorizer:
  

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",

}  

Emmet for JSX

You will need emmet abbreviation for JSX

Now head towards settings.json again and add these settings

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

React developer tools

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

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  

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!