├── Create App using Webpack.docx
├── CreateApp
├── React Intro.docx
├── Setup Environment for Building React Application.docx
└── feb-18-notes


/Create App using Webpack.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sharma-NareshIT/ReactJs/d44c2d598742e5dbcc5a32a9fcf57e17e196390b/Create App using Webpack.docx


--------------------------------------------------------------------------------
/CreateApp:
--------------------------------------------------------------------------------
 1 | 1. Use React JS in Existing Web Application
 2 | 2. Create a new React Application using Web Pack [End]
 3 | 3. Create a new React Application using Templates
 4 | 
 5 | 
 6 | Setup Environment for React
 7 | ======================
 8 | 1. Download and Install a Package Manager 
 9 | 	NPM
10 | 	Yarn
11 | 	NuGet
12 |    Download and Install "Node.js" that will provide "NPM"
13 | 
14 |             C:\> node  -v
15 |             C:\> npm -v
16 | 
17 | 
18 | 2. Download and Install  Editor   "Visual Studio Code"
19 | 
20 | 
21 | 3. Download and Install following extensions in VS Code
22 | 
23 | 	- Live Server
24 | 	- vscode-icons
25 | 	- Intellisense for CSS Class Names
26 | 
27 | 
28 | React Tool Chain
29 | =============
30 |  A typical react application requires the following tool chain
31 |  - Compiler		Babel
32 |  - Core Library		React
33 |  - Virtual DOM Library	React-DOM
34 |  - Web Pack
35 |  - Rendering Engine / View	Babel
36 |  - Testing Tools		
37 | 
38 | 
39 | Using React in Existing Web Application
40 | ===============================
41 | 1. Create a new Web Application
42 |      - Create a new folder for project
43 | 	"C:\react-web-app"
44 |      - Open Project folder in Visual Studio Code
45 |      - Open Terminal
46 | 	 >npm  init  -y
47 |      - This generates "package.json"
48 | 
49 | 2. Add following folders into project
50 | 	- public	  	: static resources like html, text, images
51 | 	- src		: dynamic resources like .js, ts, css, scss
52 | 
53 | 3. Create a statup page for project
54 | 
55 | 	public\index.html
56 | 
57 | 	<div id="container">  </div>
58 | 
59 | 4. Install following libraries 
60 | 
61 | 	> npm  install  react   --save
62 | 	> npm  install  react-dom  --save
63 | 	> npm  install @babel/standalone  --save
64 | 
65 | 
66 | 5. Link the following files to your Index page  [use from UMD]
67 | 
68 | 	react.development.js
69 | 	react-dom.development.js
70 | 	babel.js
71 | 
72 | 6.  Add script element in head section
73 | 
74 | 	<script type="text/babel>
75 | 	        ReactDOM.render(
76 | 	            "Your Message",
77 | 	            document.getElementById("container")
78 | 	       )
79 | 	</script>
80 | 


--------------------------------------------------------------------------------
/React Intro.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sharma-NareshIT/ReactJs/d44c2d598742e5dbcc5a32a9fcf57e17e196390b/React Intro.docx


--------------------------------------------------------------------------------
/Setup Environment for Building React Application.docx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sharma-NareshIT/ReactJs/d44c2d598742e5dbcc5a32a9fcf57e17e196390b/Setup Environment for Building React Application.docx


--------------------------------------------------------------------------------
/feb-18-notes:
--------------------------------------------------------------------------------
  1 | What is React?
  2 | Features of React?
  3 | - Virtual DOM
  4 |    DOM, Shadow DOM, Virtual DOM
  5 | - Components
  6 | - Async
  7 | - Modular
  8 | - 3rd Party
  9 | - Speed , Performance
 10 | 
 11 | Drawbacks of React
 12 | ===============
 13 | - It only about handling UI.
 14 | - Only one way binding
 15 | - Lot of events and references
 16 | - Pace of development
 17 | - Poor document
 18 | - Indexing in SEO
 19 | 	                Setup Environment for React
 20 | 1. Download and Install Node.js on PC
 21 |            NPM - Package Manager
 22 |            Yarn
 23 |            Bower
 24 |            Grunt
 25 |            RubyGems
 26 |            NuGet
 27 | 
 28 | 	https://nodejs.org/en/
 29 | 
 30 |     C:\> node  -v	 12+
 31 |     C:\> npm  -v	  6+
 32 | 
 33 | 2. Download and Install  "Visual Studio Code" editor
 34 |       Build, Debug, Test, Deploy
 35 | 
 36 | 
 37 | 3. Install following extensitions into VS Code
 38 | 
 39 |      - Live Server
 40 |      - vscode-icons
 41 |      - Intellisense for css class names 
 42 | 
 43 | 		       React Environment
 44 | 		      ===============
 45 | 1. You can use react in existing web application.
 46 | 2. You can create a separate react application.
 47 | 3. React can be used as SPA, PWA [mobile].
 48 | 
 49 | 	SPA - Single Page Application
 50 | 	PWA - Progressive Web Application
 51 | 
 52 | 
 53 | React in existing web application
 54 | -------------------------------------------
 55 | 1. Create a new folder for project
 56 | 	
 57 | 	D:\react-web-app
 58 | 
 59 | 2. Open folder in VS Code editor
 60 | 
 61 | 3. Open Terminal and run the command
 62 | 
 63 | 	> npm init -y
 64 |      
 65 |     This will generate  "package.json"
 66 | 
 67 | 4. Add folders
 68 | 	- public
 69 | 	- src
 70 | 
 71 | 5. Add files in public
 72 | 	- index.html
 73 | 	- home.html
 74 | 	- react.jpg
 75 | 
 76 | Note: To you react in any application you need basic library
 77 | 	a) React
 78 | 	b) React-DOM
 79 | 	c) Babel/Standalone
 80 | 
 81 |           react		: It is the core library for react
 82 |           react-dom		: It is to handle virtual DOM.
 83 |           babel/standalone	: It is a compiler for react
 84 | 
 85 |           You can get from CDN links 
 86 |           You can download using NPM.
 87 | 	
 88 | 	<script type="text/javascript">
 89 |                 <script type="module">
 90 |                 <script type="text/babel">  or  <script type="text/jsx">
 91 | 
 92 | 
 93 | Ex:
 94 | index.html
 95 | 
 96 | <!DOCTYPE html>
 97 | <html>
 98 |     <head>
 99 |         <title>Web App</title>
100 |         <style>
101 |             body {
102 |                 background-color: black;
103 |             }
104 |             a{
105 |                 color:white;
106 |                 font-size: 20px;
107 |                 text-decoration: none;
108 |             }
109 |             a:hover {
110 |                 text-decoration: underline;
111 |             }
112 |         </style>
113 |     </head>
114 |     <body align="center">
115 |         <h2>Web Application</h2>
116 |         <div>
117 |             <img src="react.jpg" width="200" height="200">
118 |         </div>
119 |         <p>
120 |             <a href="home.html">React Home</a>
121 |         </p>
122 |     </body>
123 | </html>
124 | 
125 | home.html
126 | 
127 | <!DOCTYPE html>
128 | <html>
129 |     <head>
130 |         <title>Home</title>
131 |         <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
132 |         <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
133 |         <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
134 |         <script type="text/babel" >
135 |             function Title(){
136 |                 return(
137 |                     <h4>Welcome to React JS - Virtual DOM</h4>
138 |                 )
139 |             }
140 |             ReactDOM.render(
141 |                  <Title />,
142 |                  document.getElementById("container")
143 |             );
144 |         </script>
145 |     </head>
146 |     <body align="center">
147 |         <h2>React Home</h2>
148 |         <div id="container">
149 | 
150 |         </div>
151 |     </body>
152 | </html>
153 | 


--------------------------------------------------------------------------------