Add Medium Post

This commit is contained in:
Rachel Ruderman 2020-07-03 00:13:31 -07:00
parent 0250d56bba
commit 54e899a155
5 changed files with 2826 additions and 0 deletions

2707
package-lock.json generated vendored

File diff suppressed because it is too large Load Diff

2
package.json vendored
View File

@ -10,6 +10,8 @@
"author": "",
"license": "See License",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-react-app": "^3.1.2",
"dotenv": "^8.1.0",
"express": "^4.17.1",
"heroku-ssl-redirect": "0.0.4",

21
public/MediumPost.html vendored Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id="medium_blog_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="MediumPost/index.js"></script>
</body>
</html>

View File

@ -0,0 +1,56 @@
var MediumPost = function MediumPost() {
var state = {
error: null,
isLoaded: false,
items: []
};
var error = state.error,
isLoaded = state.isLoaded,
items = state.items;
var recentItems = [];
for (var i = 0; i < 5; i++) {
recentItems.push(items[i]);
}
if (error) {
return React.createElement(
"div",
null,
"Error: ",
error.message
);
}
if (!isLoaded) {
return React.createElement(
"div",
null,
"Loading..."
);
}
return React.createElement(
"ul",
{ style: { listStyleType: "none",
width: "100%",
padding: "0"
} },
recentItems.map(function (item) {
return React.createElement(
"a",
{ style: { textDecoration: "none" }, href: item.link, key: item.title },
React.createElement(
"li",
{ style: { marginTop: "5px" } },
item.title
)
);
})
);
};
var domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(React.createElement(MediumPost, null), domContainer);

40
src/MediumPost/index.js Normal file
View File

@ -0,0 +1,40 @@
const MediumPost = () => {
const state = {
error: null,
isLoaded: false,
items: []
};
const { error, isLoaded, items } = state;
const recentItems = [];
for(var i=0;i<5;i++){
recentItems.push(items[i]);
}
if (error) {
return <div>Error: {error.message}</div>;
}
if (!isLoaded) {
return <div>Loading...</div>;
}
return (
<ul style={{ listStyleType: "none",
width: "100%",
padding:"0",
}}>
{recentItems.map(item => (
<a style={{textDecoration: "none"}} href={item.link} key={item.title}>
<li style={{ marginTop: "5px",}}>
{item.title}
</li>
</a>
))}
</ul>
);
}
const domContainer = document.querySelector('#medium_blog_container');ReactDOM.render(<MediumPost/>, domContainer);