Skip to content

Commit 8bc7973

Browse files
committed
Reimplemented example using CRA
1 parent 48fe999 commit 8bc7973

19 files changed

+6354
-210
lines changed

examples/basic/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

examples/basic/README.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ Run the [Basic](https://github.com/loktar00/react-lazy-load/tree/master/examples
66
git clone https://github.com/loktar00/react-lazy-load.git
77

88
cd react-lazy-load
9-
npm install
9+
yarn install
1010

1111
cd ./examples/basic
12-
npm install
13-
npm start
14-
15-
open http://localhost:3000/
12+
yarn install
13+
yarn start
1614
```

examples/basic/initializers/client/index.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

examples/basic/initializers/config.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

examples/basic/initializers/server/index.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

examples/basic/initializers/server/render.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

examples/basic/initializers/server/template.ejs

Lines changed: 0 additions & 14 deletions
This file was deleted.

examples/basic/initializers/server/webpackAsset.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

examples/basic/initializers/webpack/common.js

Lines changed: 0 additions & 61 deletions
This file was deleted.

examples/basic/initializers/webpack/development.js

Lines changed: 0 additions & 38 deletions
This file was deleted.

examples/basic/package.json

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,20 @@
22
"name": "react-lazy-load-basic-example",
33
"version": "0.0.0",
44
"description": "React Lazy Load basic example",
5-
"scripts": {
6-
"start": "node -r 'babel-core/register' ./initializers/server/index.js"
7-
},
85
"license": "MIT",
96
"bugs": "https://github.com/loktar00/react-lazy-load/issues",
10-
"engines": {
11-
"node": "^4.0.0",
12-
"npm": "^3.0.0"
13-
},
147
"dependencies": {
15-
"react": "^0.14.0",
16-
"react-dom": "^0.14.0"
8+
"react": "^15.5.4",
9+
"react-dom": "^15.5.4",
10+
"react-lazy-load": "^3.0.12"
1711
},
1812
"devDependencies": {
19-
"babel-core": "^6.4.0",
20-
"babel-plugin-react-transform": "^2.0.0",
21-
"babel-preset-es2015": "^6.3.13",
22-
"babel-preset-react": "^6.3.13",
23-
"css-loader": "^0.23.1",
24-
"ejs": "^2.3.4",
25-
"express": "^4.13.3",
26-
"morgan": "^1.6.1",
27-
"postcss-bem": "^0.4.1",
28-
"postcss-loader": "^0.8.0",
29-
"postcss-nested": "^1.0.0",
30-
"react-transform-catch-errors": "^1.0.1",
31-
"react-transform-hmr": "^1.0.1",
32-
"redbox-react": "^1.2.0",
33-
"style-loader": "^0.13.0",
34-
"webpack": "^1.12.10",
35-
"webpack-dev-middleware": "^1.4.0",
36-
"webpack-hot-middleware": "^2.6.0"
13+
"react-scripts": "1.0.7"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test --env=jsdom",
19+
"eject": "react-scripts eject"
3720
}
3821
}

examples/basic/public/favicon.ico

24.3 KB
Binary file not shown.

examples/basic/public/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React App</title>
23+
</head>
24+
<body>
25+
<noscript>
26+
You need to enable JavaScript to run this app.
27+
</noscript>
28+
<div id="root"></div>
29+
<!--
30+
This HTML file is a template.
31+
If you open it directly in the browser, you will see an empty page.
32+
33+
You can add webfonts, meta tags, or analytics to this file.
34+
The build step will place the bundled scripts into the <body> tag.
35+
36+
To begin the development, run `npm start` or `yarn start`.
37+
To create a production bundle, use `npm run build` or `yarn build`.
38+
-->
39+
</body>
40+
</html>

examples/basic/public/manifest.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "192x192",
8+
"type": "image/png"
9+
}
10+
],
11+
"start_url": "./index.html",
12+
"display": "standalone",
13+
"theme_color": "#000000",
14+
"background_color": "#ffffff"
15+
}
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.LazyLoad {
22
opacity: 0;
33
transition: all 2s ease-in-out;
4+
}
45

5-
&.is-visible {
6-
opacity: 1;
7-
}
6+
.LazyLoad.is-visible {
7+
opacity: 1;
88
}
99

1010
.filler {
@@ -15,4 +15,4 @@
1515
height: 200px;
1616
overflow: scroll;
1717
background-color: grey;
18-
}
18+
}
Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { Component } from 'react';
22
import LazyLoad from 'react-lazy-load';
33

4-
import './style.css'
4+
import './App.css';
55

66
class Application extends Component {
77
render() {
@@ -10,29 +10,29 @@ class Application extends Component {
1010
Scroll to load images.
1111
<div className="filler" />
1212
<LazyLoad height={762} offsetVertical={300}>
13-
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
13+
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' alt=''/>
1414
</LazyLoad>
1515
<div className="filler" />
1616
<LazyLoad height={683} offsetVertical={300}>
17-
<img src='http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg' />
17+
<img src='http://apod.nasa.gov/apod/image/1502/2015_02_20_conj_bourque1024.jpg' alt=''/>
1818
</LazyLoad>
1919
<div className="filler" />
2020
<div className="ScrollableContainer">
2121
<div className="filler" />
2222
<div className="filler" />
2323
<div className="filler" />
2424
<LazyLoad height={480}>
25-
<img src='http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif' />
25+
<img src='http://apod.nasa.gov/apod/image/1502/MarsPlume_jaeschke_480.gif' alt=''/>
2626
</LazyLoad>
2727
</div>
2828
<div className="filler" />
2929
<LazyLoad height={720} offsetVertical={300}>
30-
<img src='http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg' />
30+
<img src='http://apod.nasa.gov/apod/image/1502/ToadSky_Lane_1080_annotated.jpg' alt=''/>
3131
</LazyLoad>
3232
<div className="filler" />
3333
</div>
3434
);
3535
}
3636
}
3737

38-
export default Application;
38+
export default Application;

examples/basic/src/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import registerServiceWorker from './registerServiceWorker';
5+
6+
ReactDOM.render(<App />, document.getElementById('root'));
7+
registerServiceWorker();

0 commit comments

Comments
 (0)