-
Notifications
You must be signed in to change notification settings - Fork 0
/
Intro_react.html
112 lines (93 loc) · 6.6 KB
/
Intro_react.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>REACT</title>
</head>
<body>
<h1>React Introduction: </h1>
<ul>
<li><strong>React </strong> is a free and open-source JavaScript library for building interactive websites and user interfaces or front-end webpage components such as forms along with fields like text areas and buttons.</li>
<li>Since its release in 2013, React has been maintained by Meta (formerly Facebook) along with a community of developers and companies.</li>
<li>It is component-based. An example of a component could be a form or even just a form field or button on a website. In React, applications are completely built with components.</li>
<li>React is a JavaScript library for building user interfaces. <br> React is used to build single-page applications. <br> React allows us to create reusable UI components.</li>
<li>ReactJS is an open-source JavaScript library created by Facebook's Jordan Walke to make user interfaces for both web and mobile systems. <br> React was first used in 2011 on Facebook's newsfeed. In 2012, it was used on Instagram, and in 2013 it
was made available to the public. <br> React is best for applications that change their data quickly and dynamically. <br> It can show the parts of the UI that are changing without re-rendering the whole page. This makes the user experience
much faster.
</li>
</ul>
<ul><strong>Prerequisites to learn react:</strong> <br>
1. HTML, CSS, Javascript fundamentals : <br>
2. ES6 Javascript concepts: 'this' keyword, map, reduce, filter. <br>
3. ES6: let and const , Arrow functions, Callbacks, Promises, template literals, default parameters,
object literals, rest and spread operators and destructing assignment etc.</ul>
<ul><strong>How does react work:</strong>
<li>While building client-side apps, a team of Facebook developers realized that the DOM is slow (The Document Object Model
(DOM) is an application programming interface (API) for HTML and XML documents.)</li>
<li>It defines the logical structure of documents and the way a document is accessed and manipulated.</li>
<li>So, to make it faster, React implements a virtual DOM that is basically a DOM tree representation in JavaScript.</li>
<li>So when it needs to read or write to the DOM, it will use the virtual representation of it. Then the virtual DOM will
try to find the most efficient way to update the browser’s DOM.</li>
</ul>
<h2>NPX: (Node Package Execute)</h2>
<ul>1. NPX is a 'npm' package runner which gets installed when u install node. <br>
2. To install the package globally we have a command <strong>'npm install create react-app -g' , then use 'create-react-app' </strong>
but it is little bit tricky compared to 1st method which is npx.
<li>NPX allows the developers to execute different javascript packages available on the npm.</li>
</ul>
<p><strong> For creating new project : </strong> 'npx create-react-app gaming-blog', 'cd gaming blog', 'npm start'</p>
<h3>Node Modules: </h3>
<p>It is where all our project dependencies are present, include react library.</p>
<h3>Public:</h3>
<p>Are open to browser to present</p>
<h3>Src:</h3>
<p>Includes 90% of code, react components, css files</p>
<h3>index.js</h3>
<li>Help to Kickstart our app building</li> <hr>
<h2>1. Components:</h2>
<ul>
<li>React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.</li>
<li>React has basically 5 Components:</li>
<ul>
<li>One for 'Header'</li>
<li>One for 'SideNav'</li>
<li>One for 'Main content'</li>
<li>One for 'Footer'</li>
<li>Last component is 'Root(App) component' which contains all the 1st 4 components content.</li>
</ul>
<li>Components are reusable that, the same component can be used with diff. properties to display diff. information.</li>
<li>In react, We have two component types:</li>
<ul>
<li><strong>Stateless Functional Component:</strong> </li>
<ul>
<li>Simple Functions</li>
<li>Absence of 'this' Keyword</li>
<li>Solution without using state</li>
<li>Mainly responsible for UI</li>
</ul>
<li><strong>Stateful Class Component:</strong> </li>
<ul>
<li>More feature rich</li>
<li>Use of 'this' Keyword</li>
<li>Maintain their own private data: state</li>
<li>Complex UI logic</li>
<li>Provide lifecycle hooks</li>
</ul>
</ul>
<li>The components always starts with a capital letter in 'App.js' file. For ex. 'App', 'MyButton' etc. That’s how you know it’s a React component.
React component names must always start with a capital letter, while HTML tags must be lowercase.</li>
</ul>
<ul><h2>2. Writing markup with JSX: { }</h2>
<li>The markup syntax you’ve seen above is called JSX. It is optional, but most React projects use JSX for its convenience.</li>
<li>JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return multiple JSX tags. </li>
<li>You have to wrap them into a shared parent, like a <div>...</div> or an empty <>...</> wrapper:</li>
<li>JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. <br> For example, this will display user.name: return (
<h4>{user.name}</h4>);</li>
<li>JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user.</li>
<li>JSX lets you write HTML - like markup inside a JavaScript file, keeping rendering logic and content in the same place.</li>
<li> Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup.In this situation, you can use curly braces in your JSX to “open a window” to JavaScript:</li>
</ul> <hr>
</body>
</html>