Silent React JS : 1. Installation and Startup
** Let's LEARN REACT JS QUICKLY **
note -
REACT JS - is for creating website ( runs on browsers )
REACT NATIVE - creating application for Mobiles/tablets/desktops apps
Here, We will quick learn creating website on REACT JS ...not REACT Native for mobile apps etc.
Lets START ---
===================================
Step 1: Install Node.js and npm
Go to https://nodejs.org/ and download the LTS version.
Install it with default settings.
Verify installation in terminal:
[ I have already installed it , so we can verify this using below]
commands -
nod -v ( check Node version . Node.js is a JavaScript runtime that lets you run JS outside the browser.)
npm -v (check NPM version. NPM is used to install/manage JavaScript packages/libraries. )
Installation looks good ... let goto next steps
Step 2: Install VS Code
==============================
( This is the Microsoft S/w Platform (IDE) I am using for coding..other SS/w are also available online )
Download VS Code at https://code.visualstudio.com/
Install it. (include ADD to path option for global install to your system environment)
[ I Already have it installed ..so skipping this step ..lets move to next step ]
lets now open the VS code first from Windows search
Step 3 : Install extensions for React in VSCode (Extensions option is in left side menu as I showed you in video)
lets click on extension option , and on the search type and search the below extensions
================================================
(This Step will help you React Codes look Beautiiful in VScode,formatted with intellisense for react syntax with some useful dev/debug tools )
Extensions :
ES7+ React/Redux/React-Native/JS snippets
Prettier – Code formatter - Auto-format your code in VS Code. ....
React Developer Tools (optional)
Browser DevTools: React Developer Tools extension for Chrome/Edge. ( goto Extension in Chrome browser and install it )
[ I have already installed all the above ]
Now lets create our REACT JS website
Step 4: Create a React Project using "typescript"
===================================================
( Note - Typescript is preferred over normal js becoz - TypeScript catches errors at Compile time instead of Runtime )
Now create 1 new empty folder in your system ( say ReactApp )
Open VS Code in search bar (Administrator Mode ) in your system ...then open the new folder (ReactApp) in it
We have already opened VS code ..lets go there ...
We have 2 options to create our first application or website --
[Option A] : Using Create React App ... ( will do this option A in current video )
Open Terminal in VS Code. ( shortcut is ctrl + ` )
-Run: npx create-react-app [my-app-name] --template "typescript" ( my-app is your application name , say will create "myreactappdemo" )
Eg. npx create-react-app myreactappdemo --template "typescript"
Go into project folder: cd [my-app-name]
cd src
npm start
Browser opens at http://localhost:3000
BINGO , our website is now running on the localhost port 3000.
Lets quick modify the design to see if it is showing on browser .
NOTE : we don't need to stop the browser while coding design or script in react JS ( we can do it on the fly )
Step 6 : Quick test design changes :
Edit src/App.js ...in case of Typescript , you will have .tsx extension file not .js file ( i.e App.tsx )
Remove jsx codes inside return () section in App.tsx and add your own jsx ( all html body level tags like div , p, button etc ) in proper format
Also you can add javascript methods and add them onjsx control events like button onclick ( as shown in video ).
Save the page and goto existing Browser page at http://localhost:3000 to view and test the new design changes.
Note - Changes automatically reflect in browser (hot reload).
OUR APPLICATION START WEB PAGE IS READY ....
Will See Below How to Develop/Debug Components or Multiple Design/Forms on Web in upcoming VIDEOS
How to create new components in src/components
Thanks for watching react Js startup session....!!