-
Notifications
You must be signed in to change notification settings - Fork 0
/
reactpost2.html
144 lines (131 loc) · 7.45 KB
/
reactpost2.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
<!DOCTYPE HTML>
<html>
<head>
<title>React Scripting</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<a href="index.html" class="logo"><strong>JuneDev</strong> <span>.com</span></a>
<nav>
<a href="#menu">Menu</a>
</nav>
</header>
<!-- Menu -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="careerHighlights.html">Career Highlights</a></li>
<li><a href="programmingPortfolio.html">Programming Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="codeprojects.html">Gallery</a></li>
</ul>
<ul class="actions stacked">
<li><a href="https://calendly.com/iamjunedev" class="button primary fit">Schedule Interview</a></li>
<li><a href="https://github.com/JuneDev5779/junedev5779.github.io" class="button fit">Explore This Repo</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main" class="alt">
<!-- One -->
<section id="one">
<div class="inner">
<header class="major">
<h1> React Scripts </h1>
</header>
<span class="image main"><img src="images/reactscript.jpeg" alt="react" /></span>
<h1>Organizing File Structure</h1>
<p>There are many challenges in the aspect of maintenance and debugging in web development. This is largely in part due to the file structure of the React project. Since routing is a major feature of developing with React, I would organize my folders according in a way that my features and components and be easily accessed (in any case that code revision would take place). The common practice is organizing files by type, which becomes difficult to maintain when scaled. In the article by Juvo V. “How to Structure React Project” he proposes that project file structure should be organized completely in one folder, creating root level directories. The issue with the 1 file approach is that as the project evolves, certain directories become redundant since routing takes effect, while features are added between scenes with disregard for their specifications.</p>
<h1>The “Better” Way to Organize React Apps</h1>
<p>On the other hand, A. Margin writes a better way to organize Reacts app in his article “How to better organize a React App.” Margin addresses the challenges when maintaining specific features and components from a functional standpoint, keeping the React-Routing rules in mind. This approach seems more practical to me because it organizes related features together, and each component is organized to include all files it needs to work. I find this approach better because if I want to delete a scene, or a button, I can easily access the component and manage it without having severe implications to the code flow of my directories. Given I follow the four rules Margin outlines, I believe I can effectively develop an app that easily sorts out all features and scenes accessibly. These four rules are Margin gives 1) Component can define nested components but cannot define scenes. 2) A scene can define nested components. 3) A service can define nested services but cannot define a component or scene. 4) Nested features can only be used by parent.</p>
<h1>A Note on Webpack Configuration</h1>
<p>An article published on Smashing Magazine by Joseph Zimmerman overviews a detailed introduction to Webpack. The essential data communicated in this article explains the functionality of a Webpack in comparison to its’ competitors or Module Bundlers. Webpacks are necessary because it obtain critical dependencies needed for the apps to run. This is done in two ways, either by asynchronously loading and running the modules, or by combining all necessary files into one Javascript file that would be loaded in the "script" tag of HTML. This plugin facilitates file configuration.</p>
</div>
</section>
</div>
<!-- Contact -->
<section id="contact">
<div class="inner">
<section>
<form method="post" action="mailto:iamjunedev@gmail.com" enctype="text/plain">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Clear" /></li>
</ul>
</form>
</section>
<section class="split">
<section>
<div class="contact-method">
<span class="icon alt fa-envelope"></span>
<h3>Email</h3>
<a href="#">iamjunedev@gmail.com</a>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-phone"></span>
<h3>Phone</h3>
<span>(970) 541-0681 </span>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon alt fa-home"></span>
<h3>Address</h3>
<span>1776 S Garfield St. <br />
Denver, CO 80014<br />
United States of America</span>
</div>
</section>
</section>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<ul class="icons">
<li><a href="https://twitter.com/" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://github.com/iamjunedev" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="https://www.linkedin.com/in/junibeldelacruz/" class="icon alt fa-linkedin"><span class="label">LinkedIn</span></a></li>
</ul>
<ul class="copyright">
<li>© Unfold, Evolve, Advance </li><li>Develop: <a href="https://JuneDev.com">I am June Dev</a></li>
</ul>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>