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
-
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!
Top comments (1)
thank