Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 96e9e7d

Browse files
committed
Reverted generated page
1 parent 809cbde commit 96e9e7d

File tree

9 files changed

+737
-0
lines changed

9 files changed

+737
-0
lines changed

‎images/bg_hr.png‎

78 Bytes
Loading[フレーム]

‎images/blacktocat.png‎

463 Bytes
Loading[フレーム]

‎images/icon_download.png‎

216 Bytes
Loading[フレーム]

‎images/sprite_download.png‎

14.5 KB
Loading[フレーム]

‎index.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset='utf-8'>
6+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
7+
<meta name="description" content="React Webpack Tutorial : This is a tutorial for how to get started developing a client side application using ReactJS, Webpack and Npm">
8+
9+
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
10+
11+
<title>React Webpack Tutorial</title>
12+
</head>
13+
14+
<body>
15+
16+
<!-- HEADER -->
17+
<div id="header_wrap" class="outer">
18+
<header class="inner">
19+
<a id="forkme_banner" href="https://github.com/jansoren/react-webpack-tutorial">View on GitHub</a>
20+
21+
<h1 id="project_title">React Webpack Tutorial</h1>
22+
<h2 id="project_tagline">This is a tutorial for how to get started developing a client side application using ReactJS, Webpack and Npm</h2>
23+
24+
<section id="downloads">
25+
<a class="zip_download_link" href="https://github.com/jansoren/react-webpack-tutorial/zipball/master">Download this project as a .zip file</a>
26+
<a class="tar_download_link" href="https://github.com/jansoren/react-webpack-tutorial/tarball/master">Download this project as a tar.gz file</a>
27+
</section>
28+
</header>
29+
</div>
30+
31+
<!-- MAIN CONTENT -->
32+
<div id="main_content_wrap" class="outer">
33+
<section id="main_content" class="inner">
34+
<h1>
35+
<a id="react-webpack-tutorial" class="anchor" href="#react-webpack-tutorial" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>React Webpack Tutorial</h1>
36+
37+
<p>This tutorial will cover how to get started developing a client side application using these technologies:</p>
38+
39+
<ul>
40+
<li><a href="https://facebook.github.io/react/">ReactJS</a></li>
41+
<li><a href="https://webpack.github.io/">Webpack</a></li>
42+
<li><a href="https://docs.npmjs.com/getting-started/what-is-npm">Npm</a></li>
43+
</ul>
44+
45+
<p>You can either follow the tutorial below or just jump to the resulting code with:</p>
46+
47+
<ol>
48+
<li>Cloning this repo <code>git clone git@github.com:jansoren/react-webpack-tutorial.git</code>
49+
</li>
50+
<li>Run <code>npm install</code> from the <a href="/myapp">myapp</a>-folder</li>
51+
<li>Run command <code>webpack</code>
52+
</li>
53+
<li>Open <code>/myapp/dist/index.html</code>
54+
</li>
55+
</ol>
56+
57+
<p>If you find the tutorial helpful, and maybe learned something new, please give it a star. If you have improvement suggestions please create an issue or a pull request. Enjoy :-)</p>
58+
59+
<h2>
60+
<a id="tutorial-prerequisites" class="anchor" href="#tutorial-prerequisites" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Tutorial prerequisites</h2>
61+
62+
<ul>
63+
<li>Use your preferred IDE or you can install <a href="https://atom.io/">Atom</a>
64+
</li>
65+
<li>Install <a href="https://nodejs.org/en/download/">NodeJS</a>
66+
</li>
67+
<li>Install <a href="https://webpack.github.io/">Webpack</a> - <code>npm install -g webpack</code>
68+
</li>
69+
</ul>
70+
71+
<h3>
72+
<a id="1-initializing-your-project-with-npm" class="anchor" href="#1-initializing-your-project-with-npm" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>1. Initializing your project with npm</h3>
73+
74+
<ol>
75+
<li>Enter your project main folder. For this tutorial I will use <a href="/myapp">myapp</a> as folder and you will find the resulting code there</li>
76+
<li>Run <code>npm init</code> to create the project <code>package.json</code> file</li>
77+
<li>Press on the npm init questions to get the default value</li>
78+
<li>Install Webpack with <code>npm install --save-dev webpack</code>. When npm uses <code>--save-dev</code> it automatically adds the webpack package to the <code>package.json</code>
79+
</li>
80+
</ol>
81+
82+
<p>You have now created an initial <a href="/myapp/package.json">package.json</a> file that we later on will fill with the necessary packages for installing the application with <code>npm install</code>.</p>
83+
84+
<h3>
85+
<a id="2-create-initial-application-files" class="anchor" href="#2-create-initial-application-files" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>2. Create initial application files</h3>
86+
87+
<ol>
88+
<li>Open <a href="/myapp">myapp</a>-folder in your preferred IDE or <a href="https://atom.io/">Atom</a>
89+
</li>
90+
<li>
91+
<p>Create your application Webpack config file <a href="/myapp/webpack.config.js">webpack.config.js</a> in main project folder with this initial content:</p>
92+
93+
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> config <span class="pl-k">=</span> {
94+
context<span class="pl-k">:</span> <span class="pl-c1">__dirname</span> <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span>/app<span class="pl-pds">"</span></span>,
95+
entry<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>./main.js<span class="pl-pds">"</span></span>,
96+
97+
output<span class="pl-k">:</span> {
98+
filename<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>bundle.js<span class="pl-pds">"</span></span>,
99+
path<span class="pl-k">:</span> <span class="pl-c1">__dirname</span> <span class="pl-k">+</span> <span class="pl-s"><span class="pl-pds">"</span>/dist<span class="pl-pds">"</span></span>,
100+
},
101+
};
102+
<span class="pl-smi">module</span>.<span class="pl-smi">exports</span> <span class="pl-k">=</span> config;</pre></div>
103+
</li>
104+
<li><p>Create folder <a href="/myapp/app">myapp/app</a> to contain all your application files.</p></li>
105+
<li>
106+
<p>Create your application main file <a href="/myapp/app/main.js">main.js</a> with this initial content:</p>
107+
108+
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> React <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>);
109+
<span class="pl-k">var</span> ReactDOM <span class="pl-k">=</span> <span class="pl-c1">require</span>(<span class="pl-s"><span class="pl-pds">'</span>react-dom<span class="pl-pds">'</span></span>);
110+
111+
<span class="pl-k">var</span> Content <span class="pl-k">=</span> <span class="pl-smi">React</span>.<span class="pl-en">createClass</span>({
112+
<span class="pl-en">render</span><span class="pl-k">:</span> <span class="pl-k">function</span>() {
113+
<span class="pl-k">return</span> (
114+
<span class="pl-k">&lt;</span>div<span class="pl-k">&gt;</span>
115+
<span class="pl-k">&lt;</span>b<span class="pl-k">&gt;</span>Congratulations<span class="pl-k">&lt;</span><span class="pl-k">/</span>b<span class="pl-k">&gt;</span>, you are now ready to implement your client side application<span class="pl-k">!</span> Enjoy <span class="pl-k">:-</span>)
116+
<span class="pl-k">&lt;</span><span class="pl-k">/</span>div<span class="pl-k">&gt;</span>
117+
);
118+
}
119+
});
120+
<span class="pl-smi">ReactDOM</span>.<span class="pl-en">render</span>(<span class="pl-k">&lt;</span>Content <span class="pl-k">/</span><span class="pl-k">&gt;</span>, <span class="pl-smi">document</span>.<span class="pl-c1">getElementById</span>(<span class="pl-s"><span class="pl-pds">'</span>content<span class="pl-pds">'</span></span>));</pre></div>
121+
</li>
122+
<li><p>Install React DOM and add it to your package.json file automatically using <code>npm install --save react react-dom</code></p></li>
123+
<li>Install Babel to transform the content of a .js file from ES6 to ES5 <code>npm install --save-dev babel-preset-react babel-preset-es2015 babel-loader</code>
124+
</li>
125+
<li>
126+
<p>In your <code>webpack.config.js</code> add the babel-loader that you just installed like this:</p>
127+
128+
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> config <span class="pl-k">=</span> {
129+
<span class="pl-k">...</span>
130+
module<span class="pl-k">:</span> {
131+
loaders<span class="pl-k">:</span> [
132+
{
133+
test<span class="pl-k">:</span><span class="pl-sr"> <span class="pl-pds">/</span><span class="pl-cce">\.</span>js<span class="pl-k">$</span><span class="pl-pds">/</span></span>,
134+
exclude<span class="pl-k">:</span><span class="pl-sr"> <span class="pl-pds">/</span>node_modules<span class="pl-pds">/</span></span>,
135+
loader<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>babel-loader<span class="pl-pds">'</span></span>,
136+
query<span class="pl-k">:</span> {
137+
presets<span class="pl-k">:</span> [<span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>es2015<span class="pl-pds">'</span></span>]
138+
}
139+
}
140+
],
141+
},
142+
};</pre></div>
143+
</li>
144+
<li>
145+
<p>Create folder <a href="/myapp/dist">myapp/dist</a> and create <code>index.html</code> file with content:</p>
146+
147+
<div class="highlight highlight-text-html-basic"><pre>&lt;!DOCTYPE html&gt;
148+
&lt;<span class="pl-ent">html</span>&gt;
149+
&lt;<span class="pl-ent">head</span>&gt;
150+
&lt;<span class="pl-ent">meta</span> <span class="pl-e">charset</span>=<span class="pl-s"><span class="pl-pds">"</span>UTF-8<span class="pl-pds">"</span></span> /&gt;
151+
&lt;<span class="pl-ent">title</span>&gt;Hello React Webpack Tutorial!&lt;/<span class="pl-ent">title</span>&gt;
152+
&lt;/<span class="pl-ent">head</span>&gt;
153+
&lt;<span class="pl-ent">body</span>&gt;
154+
&lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>content<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
155+
<span class="pl-s1"> &lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>bundle.js<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">script</span>&gt;</span>
156+
&lt;/<span class="pl-ent">body</span>&gt;
157+
&lt;/<span class="pl-ent">html</span>&gt;</pre></div>
158+
</li>
159+
<li>
160+
<p>Run command <code>webpack</code> in your main folder that will result in something like this:</p>
161+
162+
<pre><code>Hash: dd141258ef660950584c
163+
Version: webpack 1.12.11
164+
Time: 3711ms
165+
Asset Size Chunks Chunk Names
166+
bundle.js 676 kB 0 [emitted] main
167+
+ 159 hidden modules
168+
</code></pre>
169+
</li>
170+
<li><p>Open <code>/dist/index.html</code> to see your client side application</p></li>
171+
<li>
172+
<p>If you want some pointers on developing your client side application you should check these sites out:</p>
173+
174+
<ul>
175+
<li><a href="https://facebook.github.io/react/docs/thinking-in-react.html">Thinking in React</a></li>
176+
<li><a href="https://blog.risingstack.com/react-js-best-practices-for-2016/">React.js Best Practices for 2016</a></li>
177+
</ul>
178+
</li>
179+
</ol>
180+
</section>
181+
</div>
182+
183+
<!-- FOOTER -->
184+
<div id="footer_wrap" class="outer">
185+
<footer class="inner">
186+
<p class="copyright">React Webpack Tutorial maintained by <a href="https://github.com/jansoren">jansoren</a></p>
187+
<p>Published with <a href="https://pages.github.com">GitHub Pages</a></p>
188+
</footer>
189+
</div>
190+
191+
192+
193+
</body>
194+
</html>

‎javascripts/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
console.log('This would be the main JS file.');

‎params.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"React Webpack Tutorial","tagline":"This is a tutorial for how to get started developing a client side application using ReactJS, Webpack and Npm","body":"# React Webpack Tutorial\r\n\r\nThis tutorial will cover how to get started developing a client side application using these technologies:\r\n- [ReactJS](https://facebook.github.io/react/)\r\n- [Webpack](https://webpack.github.io/)\r\n- [Npm](https://docs.npmjs.com/getting-started/what-is-npm)\r\n\r\nYou can either follow the tutorial below or just jump to the resulting code with:\r\n\r\n1. Cloning this repo `git clone git@github.com:jansoren/react-webpack-tutorial.git`\r\n1. Run `npm install` from the [myapp](/myapp)-folder\r\n1. Run command `webpack`\r\n1. Open `/myapp/dist/index.html`\r\n\r\nIf you find the tutorial helpful, and maybe learned something new, please give it a star. If you have improvement suggestions please create an issue or a pull request. Enjoy :-)\r\n\r\n## Tutorial prerequisites\r\n\r\n- Use your preferred IDE or you can install [Atom](https://atom.io/)\r\n- Install [NodeJS](https://nodejs.org/en/download/)\r\n- Install [Webpack](https://webpack.github.io/) - `npm install -g webpack`\r\n\r\n### 1. Initializing your project with npm\r\n\r\n1. Enter your project main folder. For this tutorial I will use [myapp](/myapp) as folder and you will find the resulting code there\r\n1. Run `npm init` to create the project `package.json` file\r\n1. Press <enter> on the npm init questions to get the default value\r\n1. Install Webpack with `npm install --save-dev webpack`. When npm uses `--save-dev` it automatically adds the webpack package to the `package.json`\r\n\r\nYou have now created an initial [package.json](/myapp/package.json) file that we later on will fill with the necessary packages for installing the application with `npm install`.\r\n\r\n### 2. Create initial application files\r\n\r\n1. Open [myapp](/myapp)-folder in your preferred IDE or [Atom](https://atom.io/)\r\n1. Create your application Webpack config file [webpack.config.js](/myapp/webpack.config.js) in main project folder with this initial content:\r\n ```javascript\r\n var config = {\r\n context: __dirname + \"/app\",\r\n entry: \"./main.js\",\r\n\r\n output: {\r\n filename: \"bundle.js\",\r\n path: __dirname + \"/dist\",\r\n },\r\n };\r\n module.exports = config;\r\n ```\r\n\r\n1. Create folder [myapp/app](/myapp/app) to contain all your application files.\r\n1. Create your application main file [main.js](/myapp/app/main.js) with this initial content:\r\n ```javascript\r\n var React = require('react');\r\n var ReactDOM = require('react-dom');\r\n\r\n var Content = React.createClass({\r\n render: function() {\r\n return (\r\n <div>\r\n <b>Congratulations</b>, you are now ready to implement your client side application! Enjoy :-)\r\n </div>\r\n );\r\n }\r\n });\r\n ReactDOM.render(<Content />, document.getElementById('content'));\r\n ```\r\n\r\n1. Install React DOM and add it to your package.json file automatically using `npm install --save react react-dom`\r\n1. Install Babel to transform the content of a .js file from ES6 to ES5 `npm install --save-dev babel-preset-react babel-preset-es2015 babel-loader`\r\n1. In your `webpack.config.js` add the babel-loader that you just installed like this:\r\n ```javascript\r\n var config = {\r\n ...\r\n module: {\r\n loaders: [\r\n {\r\n test: /\\.js$/,\r\n exclude: /node_modules/,\r\n loader: 'babel-loader',\r\n query: {\r\n presets: ['react', 'es2015']\r\n }\r\n }\r\n ],\r\n },\r\n };\r\n ```\r\n\r\n1. Create folder [myapp/dist](/myapp/dist) and create `index.html` file with content:\r\n ```html\r\n <!DOCTYPE html>\r\n <html>\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <title>Hello React Webpack Tutorial!</title>\r\n </head>\r\n <body>\r\n <div id=\"content\"></div>\r\n <script src=\"bundle.js\"></script>\r\n </body>\r\n </html>\r\n ```\r\n\r\n1. Run command `webpack` in your main folder that will result in something like this:\r\n ```\r\n Hash: dd141258ef660950584c\r\n Version: webpack 1.12.11\r\n Time: 3711ms\r\n Asset Size Chunks Chunk Names\r\n bundle.js 676 kB 0 [emitted] main\r\n + 159 hidden modules\r\n ```\r\n\r\n1. Open `/dist/index.html` to see your client side application\r\n\r\n1. If you want some pointers on developing your client side application you should check these sites out:\r\n - [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html)\r\n - [React.js Best Practices for 2016](https://blog.risingstack.com/react-js-best-practices-for-2016/)\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}

‎stylesheets/github-light.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/*
2+
Copyright 2014 GitHub Inc.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
16+
*/
17+
18+
.pl-c /* comment */ {
19+
color: #969896;
20+
}
21+
22+
.pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
23+
.pl-s .pl-v /* string variable */ {
24+
color: #0086b3;
25+
}
26+
27+
.pl-e /* entity */,
28+
.pl-en /* entity.name */ {
29+
color: #795da3;
30+
}
31+
32+
.pl-s .pl-s1 /* string source */,
33+
.pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
34+
color: #333;
35+
}
36+
37+
.pl-ent /* entity.name.tag */ {
38+
color: #63a35c;
39+
}
40+
41+
.pl-k /* keyword, storage, storage.type */ {
42+
color: #a71d5d;
43+
}
44+
45+
.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
46+
.pl-s /* string */,
47+
.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
48+
.pl-sr /* string.regexp */,
49+
.pl-sr .pl-cce /* string.regexp constant.character.escape */,
50+
.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */,
51+
.pl-sr .pl-sre /* string.regexp source.ruby.embedded */ {
52+
color: #183691;
53+
}
54+
55+
.pl-v /* variable */ {
56+
color: #ed6a43;
57+
}
58+
59+
.pl-id /* invalid.deprecated */ {
60+
color: #b52a1d;
61+
}
62+
63+
.pl-ii /* invalid.illegal */ {
64+
background-color: #b52a1d;
65+
color: #f8f8f8;
66+
}
67+
68+
.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
69+
color: #63a35c;
70+
font-weight: bold;
71+
}
72+
73+
.pl-ml /* markup.list */ {
74+
color: #693a17;
75+
}
76+
77+
.pl-mh /* markup.heading */,
78+
.pl-mh .pl-en /* markup.heading entity.name */,
79+
.pl-ms /* meta.separator */ {
80+
color: #1d3e81;
81+
font-weight: bold;
82+
}
83+
84+
.pl-mq /* markup.quote */ {
85+
color: #008080;
86+
}
87+
88+
.pl-mi /* markup.italic */ {
89+
color: #333;
90+
font-style: italic;
91+
}
92+
93+
.pl-mb /* markup.bold */ {
94+
color: #333;
95+
font-weight: bold;
96+
}
97+
98+
.pl-md /* markup.deleted, meta.diff.header.from-file */ {
99+
background-color: #ffecec;
100+
color: #bd2c00;
101+
}
102+
103+
.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
104+
background-color: #eaffea;
105+
color: #55a532;
106+
}
107+
108+
.pl-mdr /* meta.diff.range */ {
109+
color: #795da3;
110+
font-weight: bold;
111+
}
112+
113+
.pl-mo /* meta.output */ {
114+
color: #1d3e81;
115+
}
116+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /