Prerequisite steps to get start with react applications

Tutorials:

• React
• React Dom Elements
• React Synthetic Event
• React Event Handle

Steps to follow

• install nodejs MoreInfo
• install yarn MoreInfo
• install vscode MoreInfo

WebStorm MoreInfo

Vscode Extentions

• Simple react Snippets
• Javascript Es6 code snippets
• Babel ES6/ES7
• Beautify
• Pettier
• Path intelligences
• HTML snippets
• HTML CSS support

Vscode Custom Workplace settings

{
  "editor.fontSize": 16,
  "editor.formatOnSave": true,
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "workbench.iconTheme": "material-icon-theme",
  "editor.minimap.enabled": false,
  "beautify.ignore": ["**/*.js", "**/*.jsx"]
}

Node Modules

• npm install -g babel-cli@6.24.1

#``# Initiate Project

• yarn init
• enter all default steps

Auto watch jsx to js using babel

babel src/app.jsx --out-file=public/scripts/app.js --presets=env,react --watch MoreInfo

To start lice-server

live-server public --port=8082 MoreInfo

Steps completed:

• Setting up dev environment
• Setting up local server
• Setting up babel
• Started with JSX logical operator & Ternary Operator and conditional operator
• Arrow functions and map
• React rendering
• React array jsx
• React map, Synthetic event, keys
• React es6 classes