environment setup for ReactJS
Need a text editor
install Node (that will contain NPM inbuild)
install create-react-app by the following command.
npm install -g create-react
Need to be online while creating react app and commands are as follows.
Create react app
Method 1: It is not recommended because on the certain update of the version.
npm install -g create-react
Method 2: Recommended method but need to be online and install the react app as development stage that will install the modules and nessesary files only for the current application
npx create-react-app app-name
cd app-name
npm start
Create app online
This method is not recommended because as we know the react and its supporting modules update day by day. that's why we need to install or create the react app as the development phase with npx create-react-app command.
But yet if we want to create react app at the offline mode or any problem to be always online then here is a solution to create react app while to be offline. But before going for that solution initially we need to install some modules that will give an environment that will let us create react app while offline mode.
for that follow the command to crate the offline environment
npm install -g create-react-app-offline
create react app offline
crao -n --name sam-app
React environment setup for vs code
After following all the above steps install the vs code
Then install some extension which better and very helpful for react development.
Most useful VSCode extensions
ES7 React/Redux/GraphQL/React-Native snippets
It provides many react app development intelligence.
Prettier – Code formatted
An opinionated code formatter that take the maximum line length into accoutn, wrapping when necessary.
Bracket Pair Colorizer
Fromat with unique of the multiple code line and scope
Auto Rename Tag
Automatically renamed paired HTML/ XML tag, same as Visual Studio IDE does. Auto rename the tags
VSCode React Refactor
Its provides JSX refactor code actions for react developers.
ESLint
It analyzes the code to quickly find problems and it build into most text editors and it can run ESLint as part of your continuous integration pipeline.
npm Intellisense
Auto complete the npm modules in import statements.
TabOut
It allows to tab out quotes, brackets etc.
change-case
A wrapper around node-change-case for visual studio code. quickly change the case of the current selection or current word.
EditorConfig for VS Code
It appempts to override user or workspace settings with settings found in .editorconfig files. No additional or vscode-specified, EdotorConfig will continue to look for an .editorconfig file outside of the project
preffier - code formatted
Highlight Matching tag
Highlight open and closing tags.