Skip to content

Commit 0f1f764

Browse files
BunlongBunlong
committed
add React - Create React App
1 parent 40f6541 commit 0f1f764

File tree

5 files changed

+119
-15
lines changed

5 files changed

+119
-15
lines changed

‎_posts/2018-05-16-react-create-react-app.markdown

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: React - Create React App
4+
date: 2018-05-09
5+
description:
6+
img: create-react-app.png
7+
tags: [react, reactjs, learn react]
8+
---
9+
10+
Setting up Gulp, Webpack, Browserify, Babel, JSX, ES6, ES6 modules, hot reloading, … etc. manually - forget about it and no more fuss with it.
11+
12+
13+
Inspired by the cohesive developer experience provided by Ember.js Facebook wanted to provide an easy way to develop React apps, they created [create-react-app](https://github.com/facebook/create-react-app) with the targets zero configuration.
14+
15+
## Install
16+
17+
You may need [NPM](https://nodejs.org/en/download/) installed and you can use [NVM](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects.
18+
19+
The Node installation is only required for Create React App itself.
20+
21+
To install create-react-app module:
22+
23+
```javascript
24+
npm install -g create-react-app
25+
```
26+
27+
## Creating an App
28+
29+
To create a new app:
30+
31+
```javascript
32+
create-react-app my-app
33+
```
34+
35+
It will create a directory called geekhmer inside the current folder. And inside that directory, it will generate the initial project structure and install the transitive dependencies:
36+
37+
```javascript
38+
my-app
39+
README.md
40+
node_modules/
41+
package.json
42+
.gitignore
43+
public/
44+
favicon.ico
45+
index.html
46+
src/
47+
App.css
48+
App.js
49+
App.test.js
50+
index.css
51+
index.js
52+
logo.svg
53+
```
54+
55+
No configuration or complicated folder structures, just the files you need to build your app.
56+
57+
## Run the App
58+
59+
Runs the app in development mode:
60+
61+
```javascript
62+
npm start
63+
```
64+
65+
Open http://localhost:3000 to view it on the browser.
66+
67+
## Run the Test
68+
69+
Runs the test watcher in an interactive mode:
70+
71+
```javascript
72+
npm test
73+
```
74+
75+
## Builds the App for Production
76+
77+
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.
78+
79+
The build is minified and the filenames include the hashes. By default, it also includes a service worker so that your app loads from local cache on future visits.
80+
81+
```javascript
82+
npm run build
83+
```
84+
85+
Your app is ready to be deployed. So far so good, I will launch the new one website for learning create-react-app (http://learncreatereactapp.github.io). Stay turn!

‎_site/index.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,18 @@ <h3 class="contact-title">Contact</h3>
110110
</aside> <!-- End Sidebar -->
111111
<div class="content-box clearfix">
112112

113+
<article class="post">
114+
115+
<a class="post-thumbnail" style="background-image: url(http://github.com/assets/img/create-react-app.png)" href="/react-create-react-app/"></a>
116+
117+
<div class="post-content">
118+
<h2 class="post-title"><a href="/react-create-react-app/">React - Create React App</a></h2>
119+
<p>Setting up Gulp, Webpack, Browserify, Babel, JSX, ES6, ES6 modules, hot reloading, … etc. manually...</p>
120+
<span class="post-date">2018, May 09&nbsp;&nbsp;&nbsp;—&nbsp;</span>
121+
<span class="post-words">2 minute read</span>
122+
</div>
123+
</article>
124+
113125
<article class="post">
114126

115127
<a class="post-thumbnail" style="background-image: url(http://github.com/assets/img/react-composing-component.png)" href="/react-composing-component/"></a>
@@ -194,18 +206,6 @@ <h2 class="post-title"><a href="/react-refs-and-dom/">React - Refs and DOM</a></
194206
</div>
195207
</article>
196208

197-
<article class="post">
198-
199-
<a class="post-thumbnail" style="background-image: url(http://github.com/assets/img/react-ownership.png)" href="/react-ownership/"></a>
200-
201-
<div class="post-content">
202-
<h2 class="post-title"><a href="/react-ownership/">React - Ownership</a></h2>
203-
<p>In React, an owner is the component that sets the props of other components. More...</p>
204-
<span class="post-date">2018, May 06&nbsp;&nbsp;&nbsp;—&nbsp;</span>
205-
<span class="post-words">2 minute read</span>
206-
</div>
207-
</article>
208-
209209

210210
<div class="container">
211211
<nav class="pagination" role="pagination">

‎_site/sitemap.xml

+4
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@
6161
<lastmod>2018-05-09T00:00:00+07:00</lastmod>
6262
</url>
6363
<url>
64+
<loc>/react-create-react-app/</loc>
65+
<lastmod>2018-05-09T00:00:00+07:00</lastmod>
66+
</url>
67+
<url>
6468
<loc>/</loc>
6569
</url>
6670
<url>

‎_site/tags/index.html

+18-3
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,13 @@ <h1>Tags in Blog</h1>
118118
<!-- cycles through tag list and creates header row of all tags used in site with accompanying per-tag counts...-->
119119

120120

121-
<li ><a href="#learn+react" class="tag">learn react <span>(15)</span></a></li>
121+
<li ><a href="#learn+react" class="tag">learn react <span>(16)</span></a></li>
122122

123123

124-
<li ><a href="#react" class="tag">react <span>(15)</span></a></li>
124+
<li ><a href="#react" class="tag">react <span>(16)</span></a></li>
125125

126126

127-
<li ><a href="#reactjs" class="tag">reactjs <span>(15)</span></a></li>
127+
<li ><a href="#reactjs" class="tag">reactjs <span>(16)</span></a></li>
128128

129129
</ul>
130130
<!--cycles through tag list and creates subheader for each tag name...-->
@@ -133,6 +133,11 @@ <h1>Tags in Blog</h1>
133133
<h2 id="learn+react">learn react</h2>
134134
<!-- lists all posts corresponding to specific tag...-->
135135

136+
<div class="tag-list">
137+
<span><a href="/react-create-react-app/">React - Create React App</a></span>
138+
<small><span>| 09 May 2018</span></small>
139+
</div>
140+
136141
<div class="tag-list">
137142
<span><a href="/react-composing-component/">React - Composing Component</a></span>
138143
<small><span>| 09 May 2018</span></small>
@@ -213,6 +218,11 @@ <h2 id="learn+react">learn react</h2>
213218
<h2 id="react">react</h2>
214219
<!-- lists all posts corresponding to specific tag...-->
215220

221+
<div class="tag-list">
222+
<span><a href="/react-create-react-app/">React - Create React App</a></span>
223+
<small><span>| 09 May 2018</span></small>
224+
</div>
225+
216226
<div class="tag-list">
217227
<span><a href="/react-composing-component/">React - Composing Component</a></span>
218228
<small><span>| 09 May 2018</span></small>
@@ -293,6 +303,11 @@ <h2 id="react">react</h2>
293303
<h2 id="reactjs">reactjs</h2>
294304
<!-- lists all posts corresponding to specific tag...-->
295305

306+
<div class="tag-list">
307+
<span><a href="/react-create-react-app/">React - Create React App</a></span>
308+
<small><span>| 09 May 2018</span></small>
309+
</div>
310+
296311
<div class="tag-list">
297312
<span><a href="/react-composing-component/">React - Composing Component</a></span>
298313
<small><span>| 09 May 2018</span></small>

‎assets/img/create-react-app.png

448 KB
Loading

0 commit comments

Comments
 (0)