-
Notifications
You must be signed in to change notification settings - Fork 0
/
features.html
172 lines (159 loc) · 7.26 KB
/
features.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<meta
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3."
name="description" />
<meta name="google" content="notranslate" />
<meta content="Reactonite" name="author" />
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no" />
<link href="./favicon.ico" rel="icon" />
<!-- Primary Meta Tags -->
<title>Reactonite - Features</title>
<meta name="title" content="Reactonite">
<meta name="description"
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://reactonite.github.io/">
<meta property="og:title" content="Reactonite">
<meta property="og:description"
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3.">
<meta property="og:image" content="https://reactonite.github.io/assets/images/reactonite-transpiled.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://reactonite.github.io/">
<meta property="twitter:title" content="Reactonite">
<meta property="twitter:description"
content="Reactonite is a transpiler to convert HTML to React code and PWAs ✨ It's free and open-source and powered by Python3.">
<meta property="twitter:image" content="https://reactonite.github.io/assets/images/reactonite-transpiled.jpg">
<link href="./main.css" rel="stylesheet" />
<style>
/* Some CSS Comments */
h1 {
font-size: 100px;
}
header {
background-color: #4457C0;
}
nav {
margin: 0px !important;
padding: 0 !important;
}
@media (max-width: 991.98px) {
h1 {
font-size: 50px;
}
}
</style>
</head>
<body>
<!-- Add your content of header -->
<header>
<nav class="navbar navbar-default active fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html" title="">
<img src="./assets/images/reactonite-logo.png" width="50px" class="navbar-logo-img" alt="">
Reactonite
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="./features.html" title="">Features</a></li>
<li><a href="./examples/" title="">Examples</a></li>
<li>
<p>
<a href="https://reactonite.github.io/dev/index.html" class="btn btn-default navbar-btn"
title="">Documentation</a>
</p>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="section-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<h1 class="text-center">Features</h1>
<p>Reactonite is a Free and Open Source tool that let's you build React Apps using vanilla HTML code and
convert it to a React code easily, hence building a PWA, SPA. The main aim of Reactonite is to create a
starter multi/single page React apps based on a HTML file provided by the user, however, we have extended
it's functionality to some drag and drop based website generator. This allows even not so experienced
developers build SPAs and PWAs on the fly. We have one of the best documentation for Reactonite to get you
up and running is seconds. <a href="https://reactonite.github.io/dev/index.html">View Docs.</a></p>
<div class="section-container-spacer">
<img src="./assets/images/reactonite-docs.png" alt="" class="img-responsive reveal-content"
data-action="zoom">
<p class="text-center"><small>Fig 1. Reactonite Documentation</small></p>
</div>
<div class="row">
<div class="col-xs-6">
<img src="./assets/images/reactonite-html.jpg" alt="" class="img-responsive reveal-content"
data-action="zoom">
<p class="text-center"><small>Fig 2. HTML code fed into Reactonite</small></p>
</div>
<div class="col-xs-6">
<img src="./assets/images/reactonite-transpiled.jpg" alt="" class="img-responsive reveal-content"
data-action="zoom">
<p class="text-center"><small>Fig 3. Transpiled code generated by Reactonite</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container">
<div class="row section-container-spacer">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<h2 class="text-center">Design Specs</h2>
<div class="section-container-spacer">
<p>Reactonite provides a simple CLI to handle everything from the commandline itslef. The CLI is used to
either start realtime development servers or generate a static build of the website.</p>
<p>As shown in Fig 4. below the Reactonite CLI connects to GrapeJs UI builder which generates HTML and
Static files for the website, however, one can simply skip this and use their own HTML website. Changes in
files are tracked by WatchDog in realtime and Reactonite transpiles the codebase automatically. As we have
a NodeJs server running for React again wrapped using Reactonite, these changes are Hot Reloaded on the
screen. The output is the corresponding React codebase which is very readable as we try our best to not
change the directory structure and varibale names much, along with a SPA or PWA which can be build and
deployed onto a server or Github Pages.</p>
</div>
<img src="./assets/images/reactonite-design.png" alt="Reactonite Design" class="img-responsive reveal-content"
data-action="zoom">
<p class="text-center"><small>Fig 4. Reactonite workflow for Transpilation</small></p>
</div>
</div>
</div>
</div>
<footer class="footer-container white-text-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Reactonite</h3>
<div class="row">
<div class="col-xs-12 col-sm-7">
<p><small>Feel free to use this template for your project purposes.</small>
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="./main.js"></script>
</body>
</html>