Prerequisite
Need installation
•
Check installation
# check whether install node.js or not
$ node --version
# check whether install npm or not
$ npm --version
Bash
복사
Create new React application
# create react application with called name "my-app"
# This may take a few minutes to create React application and install its dependencies
# ensure that npx always uses the latest version.
$ npx create-react-app my-app
Bash
복사
Run created React application
# move created React application directory "my-app"
$ cd my-app
# start created React application
$ npm start
Bash
복사
Open created React application project in VSCode
# move my project path
$ cd my-app
# open project in VSCode
$ code .
Bash
복사
If you failed to run command “code .” in any terminal,
1.
Open “VSCode”
2.
Open “Command Palette” (Mac : cmd + shift + p / window : ctr + shift + p)
3.
Select “Shell Command: Install 'code' command in PATH”
4.
Move “Project path” ex) cd my-app
5.
Command “code .”
Optional: Install linter called ESLint
Linters can provide more sophisticated analysis, enforcing coding conventions and detecting anti-patterns. A popular JavaScript linter is ESLint.
Install node module “eslint”
$ npm install -g eslint
Bash
복사
Install extension “ESLint”
1.
Install it and then restart VSCode
2.
Open “Command Palette” (Mac : cmd + shift + p / window : ctr + shift + p)
3.
Select “ESLint: Create ESLint configuration”
