├── .gitignore
├── Dockerfile
├── README.md
├── components
├── Comment.js
├── Layout.js
└── StoryItem.js
├── docker-compose.yml
├── package-lock.json
├── package.json
├── pages
├── about.js
├── index.js
└── story.js
└── static
├── screenshot.png
├── styles.css
└── unicorn.jpg
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .next
3 | node_modules
4 |
5 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:10
2 | WORKDIR /usr/src/app
3 |
4 | COPY package.json package-lock.json ./
5 | RUN npm install
6 |
7 | COPY . ./
8 | RUN npm run build
9 |
10 | CMD ["npm", "start"]
11 |
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Workshop de Next.JS
2 |
3 | En este workshop realizamos un lector de Hacker News para cubrir los conceptos básicos de Next.JS y React (Componentes, Páginas, Styled JSX, Routing, Server Side Rendering).
4 |
5 | Si querés aprender más sobre el tema hicimos un artículo más avanzado sobre [Construir una PWA con React y Next.JS](https://aerolab.co/blog/react-nextjs-pwa) en el Blog de Aerolab.
6 |
7 | [Ver la Demo >](https://workshop-nqmtqzruxr.now.sh)
8 |
9 | 
10 |
11 |
12 | ## Hacker News API
13 |
14 | * Lista de Stories: node-hnapi.herokuapp.com/news
15 | * Stories con Comentarios: node-hnapi.herokuapp.com/item/:id
16 |
17 |
18 | ## Recursos
19 |
20 | * Aprender Next.JS: [learnnextjs.com](https://learnnextjs.com/)
21 | * Documentación y Ejemplos: [github.com/zeit/next.js](https://github.com/zeit/next.js/)
22 | * Documentación de React: [reactjs.org](https://reactjs.org/)
23 |
24 |
--------------------------------------------------------------------------------
/components/Comment.js:
--------------------------------------------------------------------------------
1 | export default class Comment extends React.Component {
2 |
3 | render() {
4 | const { comment } = this.props
5 |
6 | return
7 |
{ comment.user }
8 |
9 |
10 | { comment.comments.map( reply => ) }
11 |
12 |
13 |
25 |
7 |
8 |
{ this.props.title || "CHE TE OLVIDASTE EL TITLE" }
9 |
10 |
11 |
12 |
13 |
14 | { this.props.children }
15 |
16 |
34 |
8 |
9 |
13 |
14 |
15 |
37 |
Workshop por Aerolab
8 | 
9 |
10 |
11 |
22 |
23 | }
24 |
25 | }
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import 'isomorphic-fetch'
2 | import Layout from '../components/Layout'
3 | import StoryItem from '../components/StoryItem'
4 |
5 | export default class extends React.Component {
6 |
7 | static async getInitialProps({ query }) {
8 | let req = await fetch('https://node-hnapi.herokuapp.com/news')
9 | let stories = await req.json()
10 | return { stories }
11 | }
12 |
13 | render() {
14 | let { stories } = this.props
15 |
16 | return
17 | { stories.map( (story) => ) }
18 |
19 | }
20 |
21 | }
--------------------------------------------------------------------------------
/pages/story.js:
--------------------------------------------------------------------------------
1 | import 'isomorphic-fetch'
2 | import Layout from '../components/Layout'
3 | import Comment from '../components/Comment'
4 |
5 | export default class extends React.Component {
6 |
7 | static async getInitialProps({ query }) {
8 | let r = await fetch('https://node-hnapi.herokuapp.com/item/'+ query.id)
9 | let story = await r.json()
10 |
11 | return { story }
12 | }
13 |
14 | render() {
15 |
16 | return
17 |
18 | { this.props.story.title }
19 | { this.props.story.points } points - { this.props.story.comments_count } comments
20 |
21 |
22 | { this.props.story.comments.map( (comment) => {
23 | return
24 | } ) }
25 |
26 |
27 |
40 |
41 | }
42 |
43 | }
--------------------------------------------------------------------------------
/static/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/workshop-nextjs/b5a567508566f49eeb5c20ca4da9f057bec98d1d/static/screenshot.png
--------------------------------------------------------------------------------
/static/styles.css:
--------------------------------------------------------------------------------
1 | /* Navegacion y Body */
2 | /*
3 |
4 | */
5 |
6 | :global(body) {
7 | background: #f0f0f0;
8 | margin: 0;
9 | font-family: system-ui;
10 | }
11 | nav {
12 | background: indigo;
13 | color: white;
14 | font-weight: bold;
15 | font-size: 1.1em;
16 | padding: 15px;
17 | }
18 | nav a {
19 | color: white;
20 | text-decoration: none;
21 | }
22 |
23 |
24 | /* Lista de Stories */
25 | /*
26 | div.story
27 | h2 > a
28 | .meta
29 | */
30 |
31 | .story {
32 | border-bottom: 1px solid rgba(0,0,0,0.05);
33 | padding: 15px;
34 | }
35 | .story h2 {
36 | font-size: 1.1em;
37 | margin: 0;
38 | margin-bottom: 5px;
39 | }
40 | .story a {
41 | color: indigo;
42 | text-decoration: none;
43 | }
44 | .story h2 a:hover {
45 | text-decoration: underline;
46 | }
47 | .story .meta {
48 | color: #333;
49 | font-size: 0.9em;
50 | }
51 |
52 |
53 | /* Estilos de Story */
54 | /*
55 | h1: Título
56 | .meta: Puntos & Otros Datos
57 | */
58 |
59 | h1 {
60 | padding: 15px;
61 | margin: 0;
62 | font-size: 1.8em;
63 | font-weight: normal;
64 | }
65 | .meta {
66 | padding: 0 15px 15px 15px;
67 | color: #333;
68 | font-size: 0.9em;
69 | }
70 |
--------------------------------------------------------------------------------
/static/unicorn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aerolab/workshop-nextjs/b5a567508566f49eeb5c20ca4da9f057bec98d1d/static/unicorn.jpg
--------------------------------------------------------------------------------