-
Notifications
You must be signed in to change notification settings - Fork 1
/
react.html
executable file
·180 lines (179 loc) · 11.5 KB
/
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="manifest" href="/site.webmanifest">
<title>DevDum!</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<div id="header">
<svg version="1.1" id="Capa_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"></svg>
</div>
<div id="mobileMenuToggle" title="Menu">Menu</div>
<div id="headerLeft">
<a href="/"><img alt="Home" title="Home" id="menuToggle" src="DevDum copy (1).png" width="190px"/></a>
</div>
<div id="headerRight">
<nav>
<ul>
<li><a id="github"rel="nofollow" href="https://github.com/" target="_blank">GitHub</a></li>
<li><a id="dailydev" rel="nofollow" href="https://app.daily.dev/" target="_blank">DailyDev</a></li>
<li><a id="w3" rel="nofollow" href="https://www.w3schools.com/" target="_blank">W3Schools</a></li>
<li><a id="mdn" rel="nofollow" href="https://developer.mozilla.org/en-US/" target="_blank">MDN WebDocs</a></li>
<li><a id="stack" rel="nofollow" href="https://stackoverflow.com/" target="_blank">StackOverflow</a></li>
</ul>
</nav>
</div>
</header>
<div id="wrapall">
<div id="sidebar">
<div id="stickThis">
<div id="sidebarContent">
<!-- <div id="logo"><imd </h1>
<h4>Less Searching. More Learning.</h4> -->
<aside>
<div><a id="color1" href="html.html"><img alt="HTML" title="HTML" src="icons/output-onlineimagetools-html.png"/></a></div>
<div><a id="color2" href="style.html"><img alt="CSS" title="CSS" src="icons/output-onlineimagetools-css.png"/></a></div>
<div><a id="color3" href="javascript.html"><img alt="JavaScript" title="Javascript" src="icons/output-onlineimagetools-js.png" width="53px"/></a></div>
<div><a id="color4" href="bootstrap.html"><img alt="Bootstrap" title="Bootstrap" src="icons/output-onlineimagetools-bootstrap.png"/></a></div>
<div><a id="color5" href="react.html"><img alt="React" title="React" src="icons/output-onlineimagetools-react.png"/></a></div>
<div><a id="color6" href="nodejs.html"><img alt="Node" title="Node" src="icons/output-onlineimagetools-nodejs.png" width="50px"/></a></div>
<div><a id="color7" href="api.html"><img alt="API" title="API" src="icons/output-onlineimagetools-api.png"/></a></div>
<div><a id="color8" href="mysql.html"><img alt="SQL" title="SQL" src="icons/output-onlineimagetools-sql.png"/></a></div>
<div><a id="color9" href="github.html"><img alt="GitHub" title="GitHub" src="icons/output-onlineimagetools-github.png"/></a></div>
<div><a id="color10" href="youtube.html"><img alt="YouTube" title="YouTube" src="icons/output-onlineimagetools-youtube.png"/></a></div>
<div><a id="color11" href="more.html"><img alt="More" title="More" src="icons/output-onlineimagetools-more.png" width="48px"/></a></div>
<a class="back2Top" href="#"><code>⮝ Back to Top ⮝</code></a>
</aside>
</div>
</div>
<div id="stick-here"></div>
</div>
<div id="main">
<section id="page">
<main>
<article id="yellow">
<h1 class="display-2">REACT<span class="vim-caret"><img alt="react" title="react" src="icons/output-onlineimagetools-react.png" width="68px"/></span></h1>
<h4><strong>React is a library developed by Facebook which makes it very easy to create interactive UIs.
React is used to build single-page applications and allows us to create reusable UI components. </strong></h4>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for resources..." title="Type in a name">
</article>
<ul id="myUL">
<article>
<h2><a href="https://create-react-app.dev/" target="_blank">Create React App</a></h2>
<p>Set up a modern web app by running one command. Create React App lets you focus on code, not build tools.</p>
</article>
<article>
<h2><a href="https://www.w3schools.com/react/default.asp" target="_blank">W3 Schools | React Tutorials</a></h2>
<p>React is a JavaScript library for building user interfaces. Our "Show React" tool makes it easy to demonstrate React. It shows both the code and the result. </p>
</article>
<article>
<h2><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" target="_blank">MDN WebDocs| React Reference</a></h2>
<p>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer,
and create and play with a simple starter app — learning a bit about how React works in the process.</p>
</article>
<article>
<h2><a href="https://www.freecodecamp.org/news/react-for-beginners-cheatsheet/" target="_blank">Free Code Camp | React Beginners Cheatsheet </a></h2>
<p>It's designed to teach you all the core React concepts that you need to know to start building React applications in 2021.</p>
</article>
<article>
<h2><a href="https://owlypixel.com/learning-react-main-concepts/#next-steps" target="_blank">Learning React: The Main Concepts</a></h2>
<p>Mastering these key React concepts will help you very quickly to get up and running with this new front-end library and become a React guru.</p>
</article>
<article>
<h2><a href="https://reactjs.org/tutorial/tutorial.html" target="_blank">React JS Tutorial</a></h2>
<p>W3.org is the current HTML standard. It obsoletes all other previously-published HTML specifications.</p>
</article>
<article>
<h2><a href="https://www.30secondsofcode.org/react/t/hooks/p/1" target="_blank">30 Seconds of Code | React Hooks</a></h2>
<p>The React snippet collection contains function components and reusable hooks for React 16.</p>
</article>
<article>
<h2><a href="https://reactjsexample.com/tag/templates/" target="_blank">React JS Examples</a></h2>
<p>Reactjsexamples's goal is to be the go-to website for developers looking for React libraries and open source projects to get their work done.</p>
</article>
<article>
<h2><a href="https://www.educba.com/react-components-libraries/" target="_blank">React Components Libraries</a></h2>
<p>All these libraries are made in such a way that we need to write minimum code for HTML, we only need to pass a parameter for design what we want.</p>
</article>
<article>
<h2><a href="https://www.freecodecamp.org/news/react-cheatsheet-with-real-world-examples/"" target="_blank">Free Code Camp | Reach Examples Cheatsheet </a></h2>
<p>A comprehensive visual cheatsheet to master all the major concepts and features of the React library in 2021.</p>
</article>
<article>
<h2><a href="https://create-react-app.dev/docs/deployment/#github-pages" target="_blank">React | Deploy to GitHub</a></h2>
<p>Learn how to create a react app and deploy it to GitHub page and Herokus platform. </p>
</article>
<article>
<h2><a href="https://web.dev/react/" target="_blank">Web.dev | Progressive Web Apps</a></h2>
<p>Learn how to use built-in APIs and third-party libraries to improve the performance of your React applications.</p>
</article>
<article>
<h2><a href="http://www.developer-cheatsheets.com/react" target="_blank">Developer-CheatSheets | React & React Router</a></h2>
<p>A website that contains a variety of cheatsheets for React, Redux, ES6, React Router in downloadable PDFs. </p>
</article>
<article>
<h2><a href="https://reactbyexample.github.io/getting-started" target="_blank">React By Example </a></h2>
<p>About JSX, Function Components, Hooks, Styling, Events & Forms, Best Practices, Testing, & more... </p>
</article>
<article>
<h2><a href="https://www.reactboilerplate.com/" target="_blank">React Boilerplate</a></h2>
<p>Quick setup for new performance oriented, offline–first React.js applications</p>
</article>
<article>
<h2><a href="https://www.freecodecamp.org/news/react-fundamentals-for-beginners/" target="_blank"> Free Code Camp | React for Beginners</a></h2>
<p>DEV Community is a community of 815,848 amazing developers, We're a place where coders share, stay up-to-date and grow their careers.</p>
</article>
<article>
<h2><a href="https://react-bootstrap.github.io/" target="_blank"> React Bootstrap | Front-End Framework </a></h2>
<p>The most popular front-end framework Rebuilt for React. Learn how to include React Bootstrap in your project </p>
</article>
<article>
<h2><a href="https://javascript.plainenglish.io/unique-project-ideas-to-practice-react-86a76645a389" target="_blank">Project Ideas to Practice React</a></h2>
<p>Unique projects you can make to practice and improve your React Skills: Movie Recommendation App, Quiz App, Travel Advisor, Group Chat App, & more... </p>
</article>
</ul>
</main>
<footer>
<p>2022©DevDum! Code Smarter. Not Harder.<a rel="nofollow" href="https://github.com/rdevans87/DevDum" target="_blank" rel="nofollow">Hosted on GitHub!</a></p>
<a href="https://www.buymeacoffee.com/ryanevans" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 42px !important;width: 180px !important;"></a>
<a href="https://www.producthunt.com/posts/devdum-code-smarter-not-harder?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-devdum-code-smarter-not-harder" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=343032&theme=light"
alt="DevDum! Code Smarter. Not Harder. - 200+ Resources for web developers. It's a no brainer! | Product Hunt" style="width: 200px; height: 43px;" width="250" height="54" /></a>
</footer>
</section>
</div>
</div>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
article = ul.getElementsByTagName("article");
for (i = 0; i < article.length; i++) {
a = article[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
article[i].style.display = "";
} else {
article[i].style.display = "none";
}
}
}
</script>
</body>
</html>