├── .babelrc
├── .gitignore
├── AWS.Cloud9.Instructions.md
├── LICENSE
├── README.md
├── assets
├── cyberman.jpg
├── dj-logo.png
└── wsj-logo.svg
├── client
├── app.js
├── index.js
├── style
│ └── main.css
└── template.js
├── package-lock.json
├── package.json
├── server
├── articles.js
├── dev-middleware.js
└── index.js
├── src
├── article.js
└── helloworld.js
├── webpack.config.client.js
└── webpack.config.server.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false }
5 | ],
6 | "react",
7 | "stage-0"
8 | ],
9 | "plugins": ["react-hot-loader/babel"]
10 | }
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .git
3 | .DS_Store
4 | dist
5 |
--------------------------------------------------------------------------------
/AWS.Cloud9.Instructions.md:
--------------------------------------------------------------------------------
1 | ## Using the AWS Cloud9 IDE with the Dow Jones Education React Tutorial
2 |
3 | 1) Go to **https://console.aws.amazon.com/cloud9/home**
4 | 1) Log in with your AWS account or register for a new account and log in
5 | 1) Click **Create Environment**
6 | 1) Enter the name react-dj and click **Next Step**
7 | 1) Choose Create a new instance for environment
8 | 1) Choose `t2.micro` and click **Next Step**
9 | 1) Check over the details and click **Create Environment**
10 | 1) When the IDE is finished loading, enter the following commands into the Bash tab at the bottom of the screen:
11 | 1) `git clone https://github.com/dowjones/react-tutorial.git` - Clone the Git repo for this project
12 | 1) `cd react-tutorial` - go into the project folder
13 | 1) `npm install` - This is the node package manager installation and may take around 10 minutes or longer to complete, depending on things like network conditions, CPU power and the weather outside.
14 | 1) In a separate window, go to **http://console.aws.amazon.com/ec2/v2/home#Instances:tag:Name=react-dj;sort=instanceId** where `react-dj` is the name of the original c9 project you made.
15 | 1) Click on the instance name and look for the **Public DNS**. Make note of it, as you will need it later. It will be something like `ec2-xx-xxx-xxx-xxx.us-east-2.compute.amazonaws.com`
16 | 1) In the **Description** tab for the instance at the bottom of the page, in the section labeled **Security Group**, click on the security group.
17 | 1) Click on the **Inbound** tab, then click **Edit**.
18 | 1) When the modal pops up, click **Add Rule**. Choose the **Type** `Custom TCP Rule`, enter a **Port Range** of `3000` and choose the **Source** `My IP`.
19 | 1) Click **Save**.
20 | 1) Back in the Cloud9 IDE, in the Bash tab at the bottom of the screen, run the command
21 | `npm start`. This will boot up the stack and may take a few moments.
22 | 1) In a separate browser window, go to the **Public DNS** address that you saved earlier, but add the **port** `3000` to the end of the URL. You should have something to the effect of: `http://ec2-xx-xxx-xxx-xxx.us-east-2.compute.amazonaws.com:3000`
23 |
24 | #### Note: Some firewalls block connections to AWS instances for security purposes. If this doesn't work, first try a different network.
25 | #### Note: Shut down your EC2 instance as soon as you are done to avoid any further charges for a running EC2 instance.
26 |
27 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Dow Jones, Inc.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dow Jones React Tutorial
2 |
3 | ## Description
4 | Basic Express app with React and Hot Module Reloading, for use with the Dow Jones Tech React tutorial sessions. It is based off [this boilerplate](https://github.com/Timmehs/express-hmr-react), but has been stripped down to only support clientside rendering, and development mode.
5 |
6 | ## Usage
7 | We’ll assume you have a basic understanding of the JavaScript language. We also use some ES6 syntax in this tutorial. We try to also include ES5 syntax in the comments, but we encourage you to [get familiar](https://github.com/lukehoban/es6features) with arrow functions, let, and const statements.
8 |
9 | ## Instructions
10 | - [Install](https://nodejs.org/en/download/) Node.js
11 | - `npm install`
12 | - `npm start`
13 | - Open [http://localhost:3000](http://localhost:3000) and [http://localhost:3000/api/articles](http://localhost:3000/api/articles) in browser
14 |
15 | ## Where is everything?
16 | - Components in `/src`
17 | - Page layout in `/client/app.js`
18 | - CSS in `/client/style.main.css`
19 | - Page template in `/client/template.js`
20 | - Routes in `/server/index.js`
21 | - Images in `/assets`
22 |
23 | ## Additional Resources
24 | - [About Node.js](https://nodejs.org/en/about/)
25 | - [Webpack Documentation](https://webpack.js.org/concepts/)
26 | - [React Documentation](https://reactjs.org/docs/hello-world.html)
27 | - [Facebook's React Tutorial](https://reactjs.org/tutorial/tutorial.html)
28 | - [Express Guide](https://expressjs.com/en/guide/routing.html)
29 | - [Babel](http://babeljs.io/)
30 | - [ES6 Overview](https://github.com/lukehoban/es6features)
31 | - [Hot Module Replacement Documentation](https://webpack.js.org/concepts/hot-module-replacement/)
32 | - [AWS Cloud9 IDE Setup Instructions](https://github.com/dowjones/react-tutorial/blob/master/AWS.Cloud9.Instructions.md)
33 |
34 | ## License
35 | Licensed under the [MIT License](https://github.com/dowjones/react-tutorial/blob/master/LICENSE)
36 |
--------------------------------------------------------------------------------
/assets/cyberman.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dowjones/react-tutorial/7b68198a6bc571961e2fd3d231c25d646d99ef74/assets/cyberman.jpg
--------------------------------------------------------------------------------
/assets/dj-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dowjones/react-tutorial/7b68198a6bc571961e2fd3d231c25d646d99ef74/assets/dj-logo.png
--------------------------------------------------------------------------------
/assets/wsj-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/client/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | //import any other components here
4 | import HelloWorld from '../src/helloworld';
5 |
6 | //import CSS here, so webpack knows to include in bundle
7 | import style from '../client/style/main.css';
8 |
9 | //this is the component that generates the body of the page
10 | class App extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
23 | /* STEP 2, MORE COMPLICATED CODE FOLLOWS:
24 |
25 | import React, { Component } from 'react';
26 |
27 | //import any other components here
28 | import HelloWorld from '../src/helloworld';
29 | import Article from '../src/article';
30 |
31 | //import CSS here, so webpack knows to include in bundle
32 | import style from '../client/style/main.css';
33 |
34 | //this is the component that generates the body of the page
35 | class App extends Component {
36 | constructor(props) {
37 | super(props);
38 |
39 | this.toggle = this.toggle.bind(this);
40 |
41 | //default state
42 | //this keeps track of "live" data on the browser
43 | this.state = {
44 | articles: null,
45 | error: null,
46 | loaded: false
47 | };
48 | }
49 |
50 | componentDidMount() {
51 | //fetching data clientside
52 | fetch('/api/articles').then((data) => {
53 | return data.json();
54 | }).then((data) => {
55 | console.log(data);
56 |
57 | //send data to our state
58 | //which will trigger render()
59 | this.setState({
60 | articles: data.items,
61 | loaded: true
62 | });
63 | }).catch((error) => {
64 | console.log(error);
65 |
66 | this.setState({
67 | error: error,
68 | loaded: true
69 | });
70 | });
71 | }
72 |
73 | //click handler for button
74 | toggle() {
75 | console.log('toggle button clicked');
76 | }
77 |
78 | render() {
79 | const {loaded, error, articles} = this.state;
80 | // code above is equal to this:
81 | // const loaded = this.state.loaded;
82 | // const error = this.state.error;
83 | // const articles = this.state.articles;
84 |
85 | if (error) {
86 | //render this when there's error getting data
87 | return
Sorry! Something went wrong
88 | } else if (!loaded) {
89 | //render while content is loading
90 | return
117 | );
118 |
119 | }
120 | }
121 | }
122 |
123 | export default App;
124 | */
125 |
--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | This is the JS that runs on the browser
3 | It imports our APP and places it on the page
4 |
5 | render() in this context is equivalent to ReactDOM.render()
6 |
7 | render(
8 |
Hello World
,
9 | document.getElementById('root')
10 | );
11 | */
12 |
13 | import React from 'react';
14 | import { render } from 'react-dom';
15 | import { AppContainer } from 'react-hot-loader';
16 | import App from './app';
17 |
18 | function renderApp() {
19 | render(
20 |
21 |
22 | ,
23 | document.getElementById('root')
24 | );
25 | };
26 |
27 | renderApp();
28 |
29 | if (module.hot) module.hot.accept('./app', () => renderApp());
30 |
--------------------------------------------------------------------------------
/client/style/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #eee;
3 | }
4 |
5 | .clicked {
6 | text-decoration: none;
7 | }
8 |
9 | .unclicked {
10 | text-decoration: underline;
11 | }
12 |
13 | .imagetest {
14 | background: url('../../assets/cyberman.jpg');
15 | }
16 |
--------------------------------------------------------------------------------
/client/template.js:
--------------------------------------------------------------------------------
1 | //This is the page template
2 | export default function() {
3 | return `
4 |
5 |
6 |
7 |
8 | Dow Jones React Tutorial
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | `
17 | };
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dj-react-tutorial",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "license": "MIT",
7 | "scripts": {
8 | "start": "webpack --config webpack.config.server.js"
9 | },
10 | "dependencies": {
11 | "copy-webpack-plugin": "^4.5.1",
12 | "express": "^4.16.2",
13 | "morgan": "^1.9.0",
14 | "react": "^16.4.0",
15 | "react-dom": "^16.4.0"
16 | },
17 | "devDependencies": {
18 | "babel-core": "^6.26.0",
19 | "babel-loader": "^7.1.2",
20 | "babel-preset-env": "^1.6.1",
21 | "babel-preset-react": "^6.24.1",
22 | "babel-preset-stage-0": "^6.24.1",
23 | "css-loader": "^0.28.7",
24 | "extract-text-webpack-plugin": "^3.0.2",
25 | "file-loader": "^1.1.11",
26 | "html-webpack-plugin": "^2.30.1",
27 | "react-hot-loader": "^3.1.3",
28 | "start-server-webpack-plugin": "^2.2.0",
29 | "style-loader": "^0.19.0",
30 | "webpack": "^3.9.1",
31 | "webpack-dev-server": "^2.9.5",
32 | "webpack-hot-middleware": "^2.21.0",
33 | "webpack-node-externals": "^1.6.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/server/articles.js:
--------------------------------------------------------------------------------
1 | export default {
2 | "items":[
3 | {
4 | "date_published":"2018-04-03T17:55-00:00",
5 | "headline":"Spotify on Track for Third-Largest Tech IPO",
6 | "subheadline":"Music-streaming giant opens at $165.90, valuing the company at about $29.55 billion",
7 | "byline":"By Anne Steele and Maureen Farrell",
8 | "summary":"Spotify roared onto the public market, pulling off an unusual method of going public. The stock’s opening trade valued the music-streaming giant at $29.55 billion.",
9 | "share_link":"https://www.wsj.com/articles/spotify-shares-jump-in-market-debut-1522773951",
10 | "category":"Markets",
11 | "authors":[
12 | "Anne Steele",
13 | "Maureen Farrell"
14 | ],
15 | "images":{
16 | "M":"https://images.wsj.net/im-5869/?width=1280&height=853&pixel_ratio=2",
17 | "phone":"https://images.wsj.net/im-5869/?width=1280&height=852&pixel_ratio=2",
18 | "IM":"https://images.wsj.net/im-5869/?width=2000&height=1026&pixel_ratio=2"
19 | },
20 | "image":"https://images.wsj.net/im-5869/?width=1280&height=853&pixel_ratio=2"
21 | },
22 | {
23 | "date_published":"2018-04-03T15:42-00:00",
24 | "headline":"Live Analysis: Spotify’s First Trading Day",
25 | "subheadline":"",
26 | "byline":"",
27 | "summary":"Spotify makes its debut on the NYSE on Tuesday after an unusual IPO. Follow along for live coverage of the music-streaming company’s first day of trading and analysis of the music industry and IPO market.",
28 | "share_link":"https://www.wsj.com/livecoverage/spotify-debut-analysis",
29 | "category":"Mobile",
30 | "authors":[
31 |
32 | ],
33 | "images":{
34 | "M":"http://s.wsj.net/public/resources/images/BN-YA589_EKPROF_M_20180328114112.jpg",
35 | "phone":"http://s.wsj.net/public/resources/images/BN-YA589_EKPROF_ER_20180328114112.jpg"
36 | },
37 | "image":"http://s.wsj.net/public/resources/images/BN-YA589_EKPROF_M_20180328114112.jpg"
38 | },
39 | {
40 | "date_published":"2018-02-04T05:01-00:00",
41 | "headline":"The Spotify IPO Playlist",
42 | "subheadline":"",
43 | "byline":"",
44 | "summary":"As Spotify makes its public debut, check out our playlist to learn about the company and its unusual IPO.",
45 | "share_link":"https://bit.ly/2GyedhK",
46 | "category":"Mobile",
47 | "authors":[
48 |
49 | ],
50 | "images":{
51 | "M":"http://s.wsj.net/public/resources/images/OG-BG455_201804_M_20180402172112.jpg",
52 | "phone":"http://s.wsj.net/public/resources/images/OG-BG455_201804_M_20180402172112.jpg"
53 | },
54 | "image":"http://s.wsj.net/public/resources/images/OG-BG455_201804_M_20180402172112.jpg"
55 | },
56 | {
57 | "date_published":"2018-04-02T17:29-00:00",
58 | "headline":"Spotify’s Daniel Ek: From the Music Industry’s Slayer to Its Savior",
59 | "subheadline":"The Swedish entrepreneur built his business by proving its value to artists and record-label executives",
60 | "byline":"By Maureen Farrell and Anne Steele",
61 | "summary":"As Spotify is about to go public, CEO Daniel Ek faces the daunting task of making his company profitable while fending off streaming competition from tech giants such as Apple, Alphabet’s Google and Amazon.com.",
62 | "share_link":"https://www.wsj.com/articles/spotify-ceo-daniel-ek-once-the-music-industrys-slayer-now-its-savior-1522661400",
63 | "category":"Markets",
64 | "authors":[
65 | "Maureen Farrell",
66 | "Anne Steele"
67 | ],
68 | "layout":{
69 | "module":"slim-headline",
70 | "package":{
71 | "key":"spotify",
72 | "label":"spotify"
73 | }
74 | },
75 | "images":{
76 | "M":"http://s.wsj.net/public/resources/images/BN-YA589_EKPROF_M_20180328114112.jpg",
77 | "phone":"http://s.wsj.net/public/resources/images/BN-YA589_EKPROF_ER_20180328114112.jpg"
78 | },
79 | "image":"http://s.wsj.net/public/resources/images/BN-YA589_EKPROF_M_20180328114112.jpg"
80 | },
81 | {
82 | "date_published":"2018-04-03T17:43-00:00",
83 | "headline":"U.S. Stocks Rebound After Selloff in Tech Shares",
84 | "subheadline":"The FAANG stocks edge higher, and prospect of a trade standoff between U.S. and China added a cautious tone",
85 | "byline":"By Riva Gold and Allison Prang",
86 | "summary":"U.S. stocks climbed Tuesday, although escalating trade tensions and a selloff in technology companies continued to send shares lower in Europe and Asia. ",
87 | "share_link":"https://www.wsj.com/articles/tech-shares-drag-stock-markets-lower-1522719605",
88 | "category":"Markets",
89 | "authors":[
90 | "Riva Gold",
91 | "Allison Prang"
92 | ],
93 | "images":{
94 | "M":"https://images.wsj.net/im-5874/?width=1280&height=853&pixel_ratio=2",
95 | "phone":"https://images.wsj.net/im-5874/?width=1280&height=852&pixel_ratio=2",
96 | "IM":"https://images.wsj.net/im-5874/?width=2000&height=1026&pixel_ratio=2"
97 | },
98 | "image":"https://images.wsj.net/im-5874/?width=1280&height=853&pixel_ratio=2"
99 | },
100 | {
101 | "date_published":"2018-04-03T12:56-00:00",
102 | "headline":"Earnings May Offer Reprieve From Selloff",
103 | "subheadline":"",
104 | "byline":"By Ben Eisen",
105 | "summary":"Stock investors have at least one reason for optimism: earnings season.",
106 | "share_link":"https://www.wsj.com/articles/earnings-season-may-offer-a-reprieve-from-stock-rout-1522760212",
107 | "category":"MoneyBeat",
108 | "authors":[
109 | "Ben Eisen"
110 | ],
111 | "images":{
112 | "phone":"http://s.wsj.net/public/resources/images/BN-XZ591_FBANDR_ER_20180326095202.jpg"
113 | }
114 | },
115 | {
116 | "date_published":"2018-04-03T17:05-00:00",
117 | "headline":"Lawyer Gets 30 Days in Prison for Lying to Mueller Investigators",
118 | "subheadline":"Alex van der Zwaan is the first person sentenced in the special counsel’s wide-ranging probe",
119 | "byline":"By Aruna Viswanatha",
120 | "summary":"Alex Van der Zwaan, who pleaded guilty to lying to investigators probing Russian meddling in the 2016 election, was sentenced to 30 days in prison and a $20,000 fine.",
121 | "share_link":"https://www.wsj.com/articles/lawyer-gets-30-days-in-prison-for-lying-to-mueller-investigators-1522772048",
122 | "category":"Politics",
123 | "authors":[
124 | "Aruna Viswanatha"
125 | ],
126 | "images":{
127 | "M":"https://images.wsj.net/im-5856/?width=1280&height=853&pixel_ratio=2",
128 | "phone":"https://images.wsj.net/im-5856/?width=1280&height=852&pixel_ratio=2",
129 | "IM":"https://images.wsj.net/im-5856/?width=2000&height=1026&pixel_ratio=2"
130 | },
131 | "image":"https://images.wsj.net/im-5856/?width=1280&height=853&pixel_ratio=2"
132 | },
133 | {
134 | "date_published":"2018-04-03T18:10-00:00",
135 | "headline":"Trump Calls for Military to Guard Southern Border",
136 | "subheadline":"The president again voices criticism of Nafta as protest march moves through Mexico",
137 | "byline":"By Rebecca Ballhaus and William Mauldin",
138 | "summary":"The president said he planned to enlist the military to help guard the U.S. border, and at the same time he tried to step up pressure on Mexico to stop a protest march of asylum seekers traveling through America’s neighbor.",
139 | "share_link":"https://www.wsj.com/articles/trump-threatens-nafta-honduras-aid-over-migrant-caravan-1522763515",
140 | "category":"Politics",
141 | "authors":[
142 | "Rebecca Ballhaus",
143 | "William Mauldin"
144 | ],
145 | "images":{
146 | "M":"https://images.wsj.net/im-5854/?width=1280&height=853&pixel_ratio=2",
147 | "phone":"https://images.wsj.net/im-5854/?width=1280&height=852&pixel_ratio=2",
148 | "IM":"https://images.wsj.net/im-5854/?width=2000&height=1026&pixel_ratio=2"
149 | },
150 | "image":"https://images.wsj.net/im-5854/?width=1280&height=853&pixel_ratio=2"
151 | },
152 | {
153 | "date_published":"2018-04-03T17:05-00:00",
154 | "headline":"Trump Delivers New Attack Against Amazon",
155 | "subheadline":"President complains again that the company uses the Postal Service as ‘delivery boy’",
156 | "byline":"By Peter Nicholas and Laura Stevens",
157 | "summary":"The president stepped up his attacks on Amazon, sending out a tweet saying that the company is a drain on the U.S. Postal Service, using the mail system as a “delivery boy.”",
158 | "share_link":"https://www.wsj.com/articles/trump-delivers-new-attack-against-amazon-1522775157",
159 | "category":"Politics",
160 | "authors":[
161 | "Peter Nicholas",
162 | "Laura Stevens"
163 | ],
164 | "images":{
165 | "M":"https://images.wsj.net/im-5846/?width=1280&height=853&pixel_ratio=2",
166 | "phone":"https://images.wsj.net/im-5846/?width=364&height=244&pixel_ratio=2"
167 | },
168 | "image":"https://images.wsj.net/im-5846/?width=1280&height=853&pixel_ratio=2"
169 | },
170 | {
171 | "date_published":"2018-04-03T14:43-00:00",
172 | "headline":"Tesla Misses Model 3 Production Goal but Shows Progress",
173 | "subheadline":"Auto maker says current production of 2,020 Model 3s lays ‘the groundwork’ for ramping up effort",
174 | "byline":"By Tim Higgins",
175 | "summary":"Tesla missed its goal of making 2,500 Model 3 sedans a week last quarter, though the auto maker showed progress toward building an all-electric car for the masses and said it doesn’t require raising additional money this year outside of its standard credit lines.",
176 | "share_link":"https://www.wsj.com/articles/tesla-misses-model-3-production-goal-but-shows-progress-1522762891",
177 | "category":"Tech",
178 | "authors":[
179 | "Tim Higgins"
180 | ],
181 | "images":{
182 | "M":"https://images.wsj.net/im-5840/?width=1280&height=853&pixel_ratio=2",
183 | "phone":"https://images.wsj.net/im-5840/?width=1280&height=852&pixel_ratio=2",
184 | "IM":"https://images.wsj.net/im-5840/?width=2000&height=1026&pixel_ratio=2"
185 | },
186 | "image":"https://images.wsj.net/im-5840/?width=1280&height=853&pixel_ratio=2"
187 | },
188 | {
189 | "date_published":"2018-04-03T15:45-00:00",
190 | "headline":"Analysis: Tesla’s Model 3 Is no Model T",
191 | "subheadline":"First-quarter production is not as rosy as the electric-car marker believes",
192 | "byline":"By Charley Grant",
193 | "summary":"Tesla made 2,020 Model 3 sedans in the final week of the first quarter. Yet even that final, frantic week’s production fell short of the electric-car marker’s own guidance—a familiar pattern.",
194 | "share_link":"https://www.wsj.com/articles/teslas-model-3-is-no-model-t-1522770321",
195 | "category":"Markets",
196 | "authors":[
197 | "Charley Grant"
198 | ],
199 | "images":{
200 | "M":"https://images.wsj.net/im-5857/?width=1280&height=853&pixel_ratio=2",
201 | "phone":"https://images.wsj.net/im-5857/?width=364&height=244&pixel_ratio=2"
202 | },
203 | "image":"https://images.wsj.net/im-5857/?width=1280&height=853&pixel_ratio=2"
204 | },
205 | {
206 | "date_published":"2018-04-03T09:30-00:00",
207 | "headline":"Car Firms Get Their Wish on Fuel Standards",
208 | "subheadline":"Appetite for bigger vehicles has made it hard for companies to justify shrinking their fleets",
209 | "byline":"By Chester Dawson",
210 | "summary":"Car executives for years have said they couldn’t justify making smaller, less-profitable vehicles in an era of cheap gas.",
211 | "share_link":"https://www.wsj.com/articles/car-makers-get-their-wish-on-fuel-efficiency-standards-1522747800",
212 | "category":"Business",
213 | "authors":[
214 | "Chester Dawson"
215 | ],
216 | "images":{
217 | "M":"http://s.wsj.net/public/resources/images/BN-YC003_0402em_M_20180402173358.jpg",
218 | "phone":"http://s.wsj.net/public/resources/images/BN-YC003_0402em_ER_20180402173358.jpg"
219 | },
220 | "image":"http://s.wsj.net/public/resources/images/BN-YC003_0402em_M_20180402173358.jpg"
221 | },
222 | {
223 | "date_published":"2018-04-03T13:49-00:00",
224 | "headline":"U.S. Auto Sales Rose in March",
225 | "subheadline":"GM, Chrysler record double-digit sales increases at start of spring selling season",
226 | "byline":"By Adrienne Roberts",
227 | "summary":"Detroit auto makers reported significant gains in U.S. auto sales in March, a good sign for the start of the spring selling season and traditionally the first month of the year that delivers high volumes.",
228 | "share_link":"https://www.wsj.com/articles/u-s-auto-sales-rose-in-march-1522763381",
229 | "category":"Business",
230 | "authors":[
231 | "Adrienne Roberts"
232 | ],
233 | "images":{
234 | "M":"https://images.wsj.net/im-5841/?width=1280&height=853&pixel_ratio=2",
235 | "phone":"https://images.wsj.net/im-5841/?width=364&height=244&pixel_ratio=2"
236 | },
237 | "image":"https://images.wsj.net/im-5841/?width=1280&height=853&pixel_ratio=2"
238 | },
239 | {
240 | "date_published":"2018-04-03T15:11-00:00",
241 | "headline":"Crack and Pack: How Companies Are Mastering the New Tax Code",
242 | "subheadline":"Businesses seeking to lower their 2018 bills are splitting in two, changing their legal status and reclassifying workers",
243 | "byline":"By Ruth Simon and Richard Rubin",
244 | "summary":"Long before specific regulations are issued, the new law has led to a burst of activity in tax circles as lawyers, accountants and businesses look for ways around proposals meant to pinch them—and for ways to extend the reach of new tax breaks, especially for “pass through” businesses.",
245 | "share_link":"https://www.wsj.com/articles/crack-and-pack-how-companies-are-mastering-the-new-tax-code-1522768287",
246 | "category":"US",
247 | "authors":[
248 | "Ruth Simon",
249 | "Richard Rubin"
250 | ],
251 | "images":{
252 | "M":"https://images.wsj.net/im-5746/?width=1280&height=853&pixel_ratio=2",
253 | "phone":"https://images.wsj.net/im-5746/?width=364&height=244&pixel_ratio=2",
254 | "FR":"https://images.wsj.net/im-5746/?width=632&height=810&pixel_ratio=2",
255 | "LV":"https://images.wsj.net/im-5746/?width=1242&height=1590&pixel_ratio=2"
256 | },
257 | "image":"https://images.wsj.net/im-5746/?width=1242&height=1590&pixel_ratio=2"
258 | },
259 | {
260 | "date_published":"2018-04-03T16:30-00:00",
261 | "headline":"New York Fed Picks John Williams as President",
262 | "subheadline":"The San Francisco Fed president will succeed William Dudley in June",
263 | "byline":"By Michael S. Derby",
264 | "summary":"Williams, the San Francisco Fed president who has helped shape top Fed officials’ thinking on monetary policy, will become its next leader, assuming one of the top leadership positions at the U.S. central bank.",
265 | "share_link":"https://www.wsj.com/articles/new-york-fed-picks-john-williams-as-president-1522773002",
266 | "category":"Economy",
267 | "authors":[
268 | "Michael S. Derby"
269 | ],
270 | "images":{
271 | "M":"https://images.wsj.net/im-5844/?width=1280&height=853&pixel_ratio=2",
272 | "phone":"https://images.wsj.net/im-5844/?width=1280&height=852&pixel_ratio=2",
273 | "IM":"https://images.wsj.net/im-5844/?width=2000&height=1026&pixel_ratio=2"
274 | },
275 | "image":"https://images.wsj.net/im-5844/?width=1280&height=853&pixel_ratio=2"
276 | },
277 | {
278 | "date_published":"2018-04-03T18:09-00:00",
279 | "headline":"How the New York Fed, Prizing Diversity, Elevated an Insider as Its Next President",
280 | "subheadline":"John Williams, an economist and central-bank insider, was picked to complement Fed chief Jerome Powell, whose background is in finance",
281 | "byline":"By Nick Timiraos",
282 | "summary":"The New York Fed’s search for a new president began with an emphasis on attracting a diverse candidate pool. It ended focused on building out the leadership team for a new Federal Reserve chairman who isn’t an economist.",
283 | "share_link":"https://www.wsj.com/articles/how-the-new-york-fed-prizing-diversity-elevated-an-insider-as-its-next-president-1522778996",
284 | "category":"Economy",
285 | "authors":[
286 | "Nick Timiraos"
287 | ],
288 | "images":{
289 | "M":"https://images.wsj.net/im-5847/?width=1280&height=853&pixel_ratio=2",
290 | "phone":"https://images.wsj.net/im-5847/?width=364&height=244&pixel_ratio=2"
291 | },
292 | "image":"https://images.wsj.net/im-5847/?width=1280&height=853&pixel_ratio=2"
293 | },
294 | {
295 | "date_published":"2018-04-03T18:00-00:00",
296 | "headline":"What to Know About John Williams’s Views",
297 | "subheadline":"Some of the economist’s most influential research has focused on the so-called natural rate of interest",
298 | "byline":"By David Harrison",
299 | "summary":"Incoming New York Fed President John Williams has backed Fed plans to gradually raise interest rates and has called for the central bank to reconsider its 2% inflation target. Here’s what else you need to know about his views.",
300 | "share_link":"https://www.wsj.com/articles/what-to-know-about-new-york-fed-pick-john-williamss-views-1522778453",
301 | "category":"Economy",
302 | "authors":[
303 | "David Harrison"
304 | ],
305 | "images":{
306 | "M":"https://images.wsj.net/im-5858/?width=1280&height=853&pixel_ratio=2",
307 | "phone":"https://images.wsj.net/im-5858/?width=364&height=244&pixel_ratio=2"
308 | },
309 | "image":"https://images.wsj.net/im-5858/?width=1280&height=853&pixel_ratio=2"
310 | },
311 | {
312 | "date_published":"2018-04-03T11:24-00:00",
313 | "headline":"iPhone Users Pestered to Enroll in Apple Pay",
314 | "subheadline":"The tactic is one of the first times the tech giant has used notifications to push one of its own products",
315 | "byline":"By Tripp Mickle",
316 | "summary":"Apple is nagging iPhone users to enroll in its mobile-payment service with a persistent red circle badge. The strategy has worked with some, but is irritating others.",
317 | "share_link":"https://www.wsj.com/articles/apple-insists-iphone-users-enroll-in-apple-pay-with-a-red-badge-that-wont-go-away-1522753200",
318 | "category":"Tech",
319 | "authors":[
320 | "Tripp Mickle"
321 | ],
322 | "images":{
323 | "M":"https://images.wsj.net/im-5785/?width=1280&height=853&pixel_ratio=2",
324 | "phone":"https://images.wsj.net/im-5785/?width=364&height=244&pixel_ratio=2",
325 | "TOP":"https://images.wsj.net/im-5785/?width=700&height=350&pixel_ratio=2",
326 | "IM":"https://images.wsj.net/im-5785/?width=2000&height=1026&pixel_ratio=2"
327 | },
328 | "image":"https://images.wsj.net/im-5785/?width=2000&height=1026&pixel_ratio=2"
329 | },
330 | {
331 | "date_published":"2018-04-03T16:19-00:00",
332 | "headline":"Apple Needs to Fix ‘Do Not Disturb’ Mode—Here’s How",
333 | "subheadline":"‘Do Not Disturb’ could help us cure our phone addiction, but it’s up to Apple (and Google)",
334 | "byline":"By David Pierce",
335 | "summary":"‘Do Not Disturb’ should be every smartphone user’s best friend and saving grace. Instead, it’s a relic of a long-gone era.",
336 | "share_link":"https://www.wsj.com/articles/apple-needs-to-fix-do-not-disturb-modeheres-how-1522772396",
337 | "category":"Tech",
338 | "authors":[
339 | "David Pierce"
340 | ],
341 | "images":{
342 | "M":"http://s.wsj.net/public/resources/images/BN-YC242_PTECH0_M_20180403104333.jpg",
343 | "phone":"http://s.wsj.net/public/resources/images/BN-YC242_PTECH0_M_20180403104333.jpg"
344 | },
345 | "image":"http://s.wsj.net/public/resources/images/BN-YC242_PTECH0_M_20180403104333.jpg"
346 | },
347 | {
348 | "date_published":"2018-04-03T15:04-00:00",
349 | "headline":"Why Women Should Keep Working After Their Husbands Retire",
350 | "subheadline":"Study: U.S. women have more to gain from continuing to work and boosting future Social Security benefits",
351 | "byline":"By Ben Leubsdorf",
352 | "summary":"Many American women would benefit from accumulating more years of earnings to boost future Social Security payments, according to research.",
353 | "share_link":"https://www.wsj.com/articles/why-women-should-keep-working-after-their-husbands-retire-1522767868",
354 | "category":"Real Time Economics",
355 | "authors":[
356 | "Ben Leubsdorf"
357 | ],
358 | "images":{
359 | "phone":"http://s.wsj.net/public/resources/images/BN-WT654_retire_ER_20171227115231.jpg"
360 | }
361 | },
362 | {
363 | "date_published":"2018-04-03T14:06-00:00",
364 | "headline":"Virtual Reality, Now With the Sense of Touch",
365 | "subheadline":"The future depicted in the new film ‘Ready Player One’ is closer than you think: Startups are developing haptic gloves and suits that let users feel virtual worlds.",
366 | "byline":"By Sarah E. Needleman",
367 | "summary":"The future depicted in the new film “Ready Player One” is closer than you think: Startups are developing haptic gloves and suits that let users feel virtual worlds.",
368 | "share_link":"https://www.wsj.com/articles/virtual-reality-now-with-the-sense-of-touch-1522764377",
369 | "category":"Life",
370 | "authors":[
371 | "Sarah E. Needleman"
372 | ],
373 | "images":{
374 | "M":"http://s.wsj.net/public/resources/images/BN-YB853_haptic_M_20180402112830.jpg",
375 | "phone":"http://s.wsj.net/public/resources/images/BN-YB853_haptic_M_20180402112830.jpg"
376 | },
377 | "image":"http://s.wsj.net/public/resources/images/BN-YB853_haptic_M_20180402112830.jpg"
378 | },
379 | {
380 | "date_published":"2018-03-31T15:54-00:00",
381 | "headline":"See More: The Future of Everything »",
382 | "subheadline":"",
383 | "byline":"",
384 | "summary":"The latest issue of this special Wall Street Journal magazine reveals what lies ahead.",
385 | "share_link":"https://www.wsj.com/news/life-arts/future-of-everything?mod=wsjapp",
386 | "category":"Mobile",
387 | "authors":[
388 |
389 | ],
390 | "images":{
391 | "M":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_M_20180403105240.jpg",
392 | "phone":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_ER_20180403105240.jpg"
393 | },
394 | "image":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_M_20180403105240.jpg"
395 | },
396 | {
397 | "date_published":"2018-04-02T22:35-00:00",
398 | "headline":"Trump, Amazon and the Post Office",
399 | "subheadline":"The President is firing at the wrong target if he wants to save money.",
400 | "byline":"By The Editorial Board",
401 | "summary":"The President is firing at the wrong target if he wants to save money.",
402 | "share_link":"https://www.wsj.com/articles/trump-amazon-and-the-post-office-1522708506",
403 | "category":"Opinion",
404 | "authors":[
405 | "The Editorial Board"
406 | ],
407 | "images":{
408 | "M":"http://s.wsj.net/public/resources/images/BN-YB997_3post0_M_20180402172146.jpg",
409 | "phone":"http://s.wsj.net/public/resources/images/BN-YB997_3post0_ER_20180402172146.jpg"
410 | },
411 | "image":"http://s.wsj.net/public/resources/images/BN-YB997_3post0_M_20180402172146.jpg"
412 | },
413 | {
414 | "date_published":"2018-04-02T22:35-00:00",
415 | "headline":"A Second Kick of the Ninth Circuit",
416 | "subheadline":"The Supreme Court orders the plain reading of labor law.",
417 | "byline":"By The Editorial Board",
418 | "summary":"The Supreme Court orders the plain reading of labor law.",
419 | "share_link":"https://www.wsj.com/articles/a-second-kick-of-the-ninth-circuit-1522708522",
420 | "category":"Opinion",
421 | "authors":[
422 | "The Editorial Board"
423 | ],
424 | "images":{
425 | "M":"http://s.wsj.net/public/resources/images/BN-YC029_2motor_M_20180402181030.jpg",
426 | "phone":"http://s.wsj.net/public/resources/images/BN-YC029_2motor_ER_20180402181030.jpg",
427 | "AM":"http://s.wsj.net/public/resources/images/BN-YC029_2motor_AM_20180402181030.jpg"
428 | },
429 | "image":"http://s.wsj.net/public/resources/images/BN-YC029_2motor_AM_20180402181030.jpg"
430 | },
431 | {
432 | "date_published":"2018-04-02T22:29-00:00",
433 | "headline":"Arab Leaders Abandon the Palestinians",
434 | "subheadline":"Facing threats from Iran and Turkey, they want peace—and to strangle Hamas.",
435 | "byline":"By Walter Russell Mead",
436 | "summary":"Facing threats from Iran and Turkey, they want peace—and to strangle Hamas.",
437 | "share_link":"https://www.wsj.com/articles/arab-leaders-abandon-the-palestinians-1522708189",
438 | "category":"Opinion",
439 | "authors":[
440 | "Walter Russell Mead"
441 | ],
442 | "images":{
443 | "M":"https://images.wsj.net/im-5744/?width=1280&height=853&pixel_ratio=2",
444 | "phone":"https://images.wsj.net/im-5744/?width=364&height=244&pixel_ratio=2",
445 | "AM":"https://images.wsj.net/im-5744/?width=220&height=220&pixel_ratio=2",
446 | "4SR":"http://s.wsj.net/public/resources/images/BN-VZ737_Mead_4SR_20171106162936.jpg"
447 | },
448 | "image":"http://s.wsj.net/public/resources/images/BN-VZ737_Mead_4SR_20171106162936.jpg"
449 | },
450 | {
451 | "date_published":"2018-04-03T13:54-00:00",
452 | "headline":"Mueller Was Authorized to Investigate Manafort’s Work for Ukraine",
453 | "subheadline":"Court filings show that Deputy Attorney General Rod Rosenstein gave the special counsel authority to probe Ukraine-government dealings",
454 | "byline":"By Del Quentin Wilber and Aruna Viswanatha",
455 | "summary":"The special counsel was authorized in a secret memo to investigate former Trump campaign chairman Paul Manafort’s work for the Ukrainian government, in addition to alleged collusion with Russian officials to interfere in the 2016 elections.",
456 | "share_link":"https://www.wsj.com/articles/mueller-was-authorized-to-investigate-paul-manaforts-work-for-ukraine-1522754850",
457 | "category":"Politics",
458 | "authors":[
459 | "Del Quentin Wilber",
460 | "Aruna Viswanatha"
461 | ],
462 | "images":{
463 | "M":"https://images.wsj.net/im-5861/?width=1280&height=853&pixel_ratio=2",
464 | "phone":"https://images.wsj.net/im-5861/?width=1280&height=852&pixel_ratio=2",
465 | "IM":"https://images.wsj.net/im-5861/?width=2000&height=1026&pixel_ratio=2"
466 | },
467 | "image":"https://images.wsj.net/im-5861/?width=1280&height=853&pixel_ratio=2"
468 | },
469 | {
470 | "date_published":"2018-04-03T17:51-00:00",
471 | "headline":"AI Could Soon Enhance Real-Time Police Surveillance",
472 | "subheadline":"Companies are working with departments to develop body cameras that could identify faces in real time; privacy groups fear loss of anonymity",
473 | "byline":"By Shibani Mahtani and Zusha Elinson",
474 | "summary":"Several companies are working with police departments in the U.S. in hopes of adding artificial intelligence to video surveillance and body cameras.",
475 | "share_link":"https://www.wsj.com/articles/artificial-intelligence-could-soon-enhance-real-time-police-surveillance-1522761813",
476 | "category":"US",
477 | "authors":[
478 | "Shibani Mahtani",
479 | "Zusha Elinson"
480 | ],
481 | "images":{
482 | "M":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_M_20180403105240.jpg",
483 | "phone":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_ER_20180403105240.jpg",
484 | "TOP":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_TOP_20180403105240.jpg"
485 | },
486 | "image":"http://s.wsj.net/public/resources/images/BN-YC247_AICOPS_TOP_20180403105240.jpg"
487 | },
488 | {
489 | "date_published":"2018-04-03T14:32-00:00",
490 | "headline":"Women Running for Office in 2018 Wear Gender as Badge of Honor",
491 | "subheadline":"A record number of females, most of them challengers taking on incumbents, have stepped up as candidates",
492 | "byline":"By Janet Hook",
493 | "summary":"Unlike some predecessors who say being a female candidate is a potential liability, these women are touting their gender.",
494 | "share_link":"https://www.wsj.com/articles/record-numbers-of-female-candidates-competing-in-2018-elections-1522756801",
495 | "category":"Politics",
496 | "authors":[
497 | "Janet Hook"
498 | ],
499 | "images":{
500 | "M":"http://s.wsj.net/public/resources/images/BN-YB912_women0_M_20180402150220.jpg",
501 | "phone":"http://s.wsj.net/public/resources/images/BN-YB912_women0_ER_20180402150220.jpg",
502 | "TOP":"http://s.wsj.net/public/resources/images/BN-YB912_women0_TOP_20180402150220.jpg"
503 | },
504 | "image":"http://s.wsj.net/public/resources/images/BN-YB912_women0_TOP_20180402150220.jpg"
505 | },
506 | {
507 | "date_published":"2018-04-03T16:12-00:00",
508 | "headline":"Fox Says Disney Prepared to Buy Sky News in Bid to Allay Regulators",
509 | "subheadline":"Proposal is Fox’s latest attempt to overcome concerns over plan to take full control of Sky",
510 | "byline":"By Ben Dummett and Stu Woo",
511 | "summary":"Fox said Disney was prepared to buy the news channel of British pay-TV operator Sky, a proposal that could bolster its position in a trans-Atlantic takeover battle that includes U.S. cable giant Comcast.",
512 | "share_link":"https://www.wsj.com/articles/fox-says-disney-could-buy-u-k-s-sky-news-1522739736",
513 | "category":"Business",
514 | "authors":[
515 | "Ben Dummett",
516 | "Stu Woo"
517 | ],
518 | "images":{
519 | "phone":"http://s.wsj.net/public/resources/images/BN-XM074_39Qfq_M_20180214063905.jpg"
520 | },
521 | "image":"http://s.wsj.net/public/resources/images/BN-XM074_39Qfq_M_20180214063905.jpg"
522 | },
523 | {
524 | "date_published":"2018-04-03T12:00-00:00",
525 | "headline":"Trucking Companies Are Struggling to Attract Drivers to the Big-Rig Life",
526 | "subheadline":"The U.S. freight market is speeding ahead, but recruiting new truck drivers to meet demand is proving harder to rev up",
527 | "byline":"By Jennifer Smith",
528 | "summary":"U.S. freight volumes are surging on the back of strong economic growth, as retailers and manufacturers hire more trucks to haul imports from seaports to distribution centers and raw materials to factories. But the flow of new truck drivers is lagging far behind.",
529 | "share_link":"https://www.wsj.com/articles/trucking-companies-are-struggling-to-attract-drivers-to-the-big-rig-life-1522756801",
530 | "category":"Business",
531 | "authors":[
532 | "Jennifer Smith"
533 | ],
534 | "images":{
535 | "M":"http://s.wsj.net/public/resources/images/BN-YA553_truckd_M_20180328111533.jpg",
536 | "phone":"http://s.wsj.net/public/resources/images/BN-YA553_truckd_ER_20180328111533.jpg",
537 | "TOP":"http://s.wsj.net/public/resources/images/BN-YA553_truckd_TOP_20180328111533.jpg"
538 | },
539 | "image":"http://s.wsj.net/public/resources/images/BN-YA553_truckd_TOP_20180328111533.jpg"
540 | },
541 | {
542 | "date_published":"2018-04-03T13:08-00:00",
543 | "headline":"Mind the Gender Pay Gap",
544 | "subheadline":"",
545 | "byline":"",
546 | "summary":"The U.K. is asking companies to disclose their gender-pay gap. The first-of-its-kind requirement opens a rare window into pay discrepancies at large firms.",
547 | "share_link":"https://www.wsj.com/graphics/uk-pay-gap/",
548 | "category":"Mobile",
549 | "authors":[
550 |
551 | ],
552 | "images":{
553 | "M":"http://s.wsj.net/public/resources/images/OG-BG140_ukgap__M_20180328063623.jpg",
554 | "phone":"http://s.wsj.net/public/resources/images/OG-BG140_ukgap__M_20180328063623.jpg"
555 | },
556 | "image":"http://s.wsj.net/public/resources/images/OG-BG140_ukgap__M_20180328063623.jpg"
557 | },
558 | {
559 | "date_published":"2018-04-03T13:37-00:00",
560 | "headline":"Rohingya Camps in Bangladesh Start to Look Permanent",
561 | "subheadline":"Some 700,000 have crossed the border from Myanmar since August; aid groups are preparing for more",
562 | "byline":"By Ben Otto",
563 | "summary":"Camps housing hundreds of thousands of Rohingya refugees in Bangladesh are beginning to look like more enduring settlements—with roads, bridges, wells, schools and medical centers.",
564 | "share_link":"https://www.wsj.com/articles/rohingya-camps-in-bangladesh-start-to-look-permanent-1522762656",
565 | "category":"World",
566 | "authors":[
567 | "Ben Otto"
568 | ],
569 | "images":{
570 | "M":"http://s.wsj.net/public/resources/images/BN-YB903_ROHING_M_20180402143430.jpg",
571 | "phone":"http://s.wsj.net/public/resources/images/BN-YB903_ROHING_M_20180402143430.jpg"
572 | },
573 | "image":"http://s.wsj.net/public/resources/images/BN-YB903_ROHING_M_20180402143430.jpg"
574 | },
575 | {
576 | "date_published":"2018-04-03T11:11-00:00",
577 | "headline":"Prosecutors Call For Extradition of Former Catalonian Separatist Leader",
578 | "subheadline":"Decision brings Carles Puigdemont closer to trial in Spain over last year’s banned independence referendum",
579 | "byline":"By Bojan Pancevski",
580 | "summary":"German prosecutors called for Catalonia’s former separatist leader to be extradited to Spain on a rebellion charge, a blow to his movement that takes him closer to trial over last year’s banned independence referendum.",
581 | "share_link":"https://www.wsj.com/articles/prosecutors-in-germany-call-for-extradition-of-former-catalonian-separatist-leader-1522753871",
582 | "category":"World",
583 | "authors":[
584 | "Bojan Pancevski"
585 | ],
586 | "images":{
587 | "M":"http://s.wsj.net/public/resources/images/BN-YC204_gercat_M_20180403064741.jpg",
588 | "phone":"http://s.wsj.net/public/resources/images/BN-YC204_gercat_ER_20180403064741.jpg",
589 | "TOP":"http://s.wsj.net/public/resources/images/BN-YC204_gercat_TOP_20180403064741.jpg"
590 | },
591 | "image":"http://s.wsj.net/public/resources/images/BN-YC204_gercat_TOP_20180403064741.jpg"
592 | },
593 | {
594 | "date_published":"2018-04-03T10:12-00:00",
595 | "headline":"Vatican Deal Would Keep China in Charge of Church, Beijing Says",
596 | "subheadline":"‘China’s constitution is clear,’ senior official says: no interference by ‘foreign forces’ in religious affairs",
597 | "byline":"By Eva Dou",
598 | "summary":"A senior Chinese religious-affairs official signaled that the pope’s authority in China will be limited even if the Vatican and Beijing reach a landmark compromise on the appointment of bishops.",
599 | "share_link":"https://www.wsj.com/articles/vatican-deal-would-leave-state-in-charge-of-church-beijing-says-1522750377",
600 | "category":"World",
601 | "authors":[
602 | "Eva Dou"
603 | ],
604 | "images":{
605 | "M":"https://images.wsj.net/im-5820/?width=1280&height=853&pixel_ratio=2",
606 | "phone":"https://images.wsj.net/im-5820/?width=364&height=244&pixel_ratio=2",
607 | "TOP":"https://images.wsj.net/im-5820/?width=700&height=350&pixel_ratio=2",
608 | "IM":"https://images.wsj.net/im-5820/?width=2000&height=1026&pixel_ratio=2"
609 | },
610 | "image":"https://images.wsj.net/im-5820/?width=2000&height=1026&pixel_ratio=2"
611 | },
612 | {
613 | "date_published":"2018-04-03T11:22-00:00",
614 | "headline":"Coincheck, Roiled by Hack, Might Have Found Its White Knight",
615 | "subheadline":"Japanese online brokerage Monex Group says it is looking at acquiring Coincheck",
616 | "byline":"By Suryatapa Bhattacharya in Tokyo and Steven Russolillo in Hong Kong",
617 | "summary":"Japanese internet brokerage Monex Group said it is looking at acquiring Coincheck, the cryptocurrency exchange that suffered one of the industry’s worst hacks in January.",
618 | "share_link":"https://www.wsj.com/articles/coincheck-roiled-by-hack-might-have-found-its-white-knight-1522754557",
619 | "category":"Markets",
620 | "authors":[
621 | "Suryatapa Bhattacharya",
622 | "Steven Russolillo"
623 | ],
624 | "images":{
625 | "M":"https://images.wsj.net/im-5829/?width=1280&height=853&pixel_ratio=2",
626 | "phone":"https://images.wsj.net/im-5829/?width=1280&height=852&pixel_ratio=2",
627 | "IM":"https://images.wsj.net/im-5829/?width=2000&height=1026&pixel_ratio=2"
628 | },
629 | "image":"https://images.wsj.net/im-5829/?width=1280&height=853&pixel_ratio=2"
630 | },
631 | {
632 | "date_published":"2018-04-03T09:30-00:00",
633 | "headline":"Why Consumer Spending Growth Is Slowing",
634 | "subheadline":"Banks are becoming more cautious lending to Americans despite a strong job market and rising incomes",
635 | "byline":"By Aaron Back",
636 | "summary":"Banks are becoming more cautious lending to Americans despite a strong labor market and rising incomes.",
637 | "share_link":"https://www.wsj.com/articles/why-consumer-spending-growth-is-slowing-1522747800",
638 | "category":"Markets",
639 | "authors":[
640 | "Aaron Back"
641 | ],
642 | "images":{
643 | "M":"https://images.wsj.net/im-5803/?width=1280&height=853&pixel_ratio=2",
644 | "phone":"https://images.wsj.net/im-5803/?width=364&height=244&pixel_ratio=2",
645 | "TOP":"https://images.wsj.net/im-5803/?width=700&height=350&pixel_ratio=2",
646 | "IM":"https://images.wsj.net/im-5803/?width=2000&height=1026&pixel_ratio=2"
647 | },
648 | "image":"https://images.wsj.net/im-5803/?width=2000&height=1026&pixel_ratio=2"
649 | },
650 | {
651 | "date_published":"2018-04-03T14:00-00:00",
652 | "headline":"Abu Dhabi Investor Takes Stake in Venture Capital Firm 500 Startups",
653 | "subheadline":"Silicon Valley startup accelerator’s CEO says of stake: ‘Our ambition is to be more than a VC’",
654 | "byline":"By Nicolas Parasie in Dubai and Cat Zakrzewski in San Francisco",
655 | "summary":"A United Arab Emirates-based investment company said it is taking a large minority stake in 500 Startups, the first time the Silicon Valley startup accelerator’s parent has accepted outside funding.",
656 | "share_link":"https://www.wsj.com/articles/abu-dhabi-investor-takes-stake-in-venture-capital-firm-500-startups-1522764000",
657 | "category":"Markets",
658 | "authors":[
659 | "Nicolas Parasie",
660 | "Cat Zakrzewski"
661 | ],
662 | "images":{
663 | "M":"http://s.wsj.net/public/resources/images/BN-YC211_abudha_M_20180403093219.jpg",
664 | "phone":"http://s.wsj.net/public/resources/images/BN-YC211_abudha_ER_20180403093219.jpg",
665 | "TOP":"http://s.wsj.net/public/resources/images/BN-YC211_abudha_TOP_20180403093219.jpg"
666 | },
667 | "image":"http://s.wsj.net/public/resources/images/BN-YC211_abudha_TOP_20180403093219.jpg"
668 | },
669 | {
670 | "date_published":"2018-04-03T11:00-00:00",
671 | "headline":"London’s Crossrail Project Loses Traction as Political Obstacles Mount",
672 | "subheadline":"First phase opens, but Crossrail 2 progress called ‘hugely disappointing’",
673 | "byline":"By Isobel Lee",
674 | "summary":"London residents began to get their payoff last year with the partial opening of the first line of the £14.8 billion Crossrail system. But for many real-estate developers and investors, the payoff will take longer.",
675 | "share_link":"https://www.wsj.com/articles/londons-crossrail-project-loses-traction-as-political-obstacles-mount-1522753200",
676 | "category":"Markets",
677 | "authors":[
678 | "Isobel Lee"
679 | ],
680 | "images":{
681 | "M":"http://s.wsj.net/public/resources/images/BN-YB589_CROSSR_M_20180401125411.jpg",
682 | "phone":"http://s.wsj.net/public/resources/images/BN-YB589_CROSSR_M_20180401125411.jpg"
683 | },
684 | "image":"http://s.wsj.net/public/resources/images/BN-YB589_CROSSR_M_20180401125411.jpg"
685 | },
686 | {
687 | "date_published":"2018-04-03T11:00-00:00",
688 | "headline":"Financial Firms Commit to London Despite Brexit Concerns",
689 | "subheadline":"Values of prime office buildings have mostly rebounded from a decline following Brexit vote",
690 | "byline":"By Olga Cotaga",
691 | "summary":"Two years after the U.K. vote to exit from the EU set off alarms in the London office market that tenants and investors would flee the city, the market is proving to be surprisingly resilient.",
692 | "share_link":"https://www.wsj.com/articles/so-far-so-good-financial-firms-commit-to-london-despite-brexit-concerns-1522753201",
693 | "category":"Markets",
694 | "authors":[
695 | "Olga Cotaga"
696 | ],
697 | "images":{
698 | "M":"http://s.wsj.net/public/resources/images/BN-YB585_LONDON_M_20180401124632.jpg",
699 | "phone":"http://s.wsj.net/public/resources/images/BN-YB585_LONDON_M_20180401124632.jpg"
700 | },
701 | "image":"http://s.wsj.net/public/resources/images/BN-YB585_LONDON_M_20180401124632.jpg"
702 | },
703 | {
704 | "date_published":"2018-04-03T11:00-00:00",
705 | "headline":"Foreign Funds Flock to Fledgling U.K. Rental Apartment Market",
706 | "subheadline":"Major global institutions are jumping into this construction arena as living habits are changing",
707 | "byline":"By Shefali Anand",
708 | "summary":"Major global institutions are jumping into the U.K. rental-apartment construction arena as living habits change and investors search for higher yields in an aging commercial real estate bull market.",
709 | "share_link":"https://www.wsj.com/articles/foreign-funds-flock-to-fledgling-u-k-rental-apartment-market-1522753200",
710 | "category":"Markets",
711 | "authors":[
712 | "Shefali Anand"
713 | ],
714 | "images":{
715 | "M":"http://s.wsj.net/public/resources/images/BN-YB872_UKRENT_M_20180402122155.jpg",
716 | "phone":"http://s.wsj.net/public/resources/images/BN-YB872_UKRENT_ER_20180402122155.jpg"
717 | },
718 | "image":"http://s.wsj.net/public/resources/images/BN-YB872_UKRENT_M_20180402122155.jpg"
719 | },
720 | {
721 | "date_published":"2018-04-03T15:33-00:00",
722 | "headline":"Where’s Your Teen Sleeping? Check Chuck E. Cheese, then Walmart",
723 | "subheadline":"Adventure seekers are hiding overnight in stores for ‘24-hour challenge’—and are really, really bored",
724 | "byline":"By Jennifer Levitz",
725 | "summary":"Adventure-seekers are hiding overnight in stores for the “24-hour challenge,” only to find it’s really, really boring. ",
726 | "share_link":"https://www.wsj.com/articles/wheres-your-teen-sleeping-check-chuck-e-cheese-then-walmart-1522769632",
727 | "category":"Page One",
728 | "authors":[
729 | "Jennifer Levitz"
730 | ],
731 | "images":{
732 | "M":"http://s.wsj.net/public/resources/images/HC-GW007_Manfre_M_20180403113530.jpg",
733 | "phone":"http://s.wsj.net/public/resources/images/HC-GW007_Manfre_M_20180403113530.jpg",
734 | "4SR":"https://images.wsj.net/im-5789/?width=600&height=600&pixel_ratio=2",
735 | "LV":"https://images.wsj.net/im-5789/?width=1242&height=1590&pixel_ratio=2",
736 | "IM":"https://images.wsj.net/im-5789/?width=2000&height=1000&pixel_ratio=2"
737 | },
738 | "image":"http://s.wsj.net/public/resources/images/HC-GW007_Manfre_M_20180403113530.jpg"
739 | },
740 | {
741 | "date_published":"2018-04-03T14:15-00:00",
742 | "headline":"High-End Dining for the High-Chair Set",
743 | "subheadline":"Forget chicken fingers. Top restaurants are catering to young foodies and their parents with sophisticated, multi-course kids’ menus",
744 | "byline":"By Alina Dizik",
745 | "summary":"Forget chicken fingers. Top restaurants are catering to young foodies and their parents with sophisticated, multi-course kids’ menus.",
746 | "share_link":"https://www.wsj.com/articles/high-end-dining-for-the-high-chair-set-1522764900",
747 | "category":"Life",
748 | "authors":[
749 | "Alina Dizik"
750 | ],
751 | "images":{
752 | "M":"http://s.wsj.net/public/resources/images/BN-YC031_CHILDM_M_20180402181106.jpg",
753 | "phone":"http://s.wsj.net/public/resources/images/BN-YC031_CHILDM_M_20180402181106.jpg"
754 | },
755 | "image":"http://s.wsj.net/public/resources/images/BN-YC031_CHILDM_M_20180402181106.jpg"
756 | },
757 | {
758 | "date_published":"2018-04-03T11:53-00:00",
759 | "headline":"Villanova’s Steak Dynasty Built With PBJ Players",
760 | "subheadline":"The Wildcats have become the college basketball’s most surprising juggernaut by recruiting players skilled enough to excel against major-college competition but unpolished and eager enough to stick around",
761 | "byline":"By Rachel Bachman",
762 | "summary":"Villanova has become college basketball’s most surprising juggernaut by recruiting players skilled enough to excel against major-college competition but unpolished and eager enough to stick around.",
763 | "share_link":"https://www.wsj.com/articles/villanovas-steak-dynasty-built-with-pbj-players-1522756433",
764 | "category":"Life",
765 | "authors":[
766 | "Rachel Bachman"
767 | ],
768 | "images":{
769 | "M":"https://images.wsj.net/im-5810/?width=1280&height=853&pixel_ratio=2",
770 | "phone":"https://images.wsj.net/im-5810/?width=1280&height=853&pixel_ratio=2"
771 | },
772 | "image":"https://images.wsj.net/im-5810/?width=1280&height=853&pixel_ratio=2"
773 | },
774 | {
775 | "date_published":"2018-04-03T07:04-00:00",
776 | "headline":"Villanova Wins NCAA Men’s Basketball Championship",
777 | "subheadline":"The Wildcats claim their second national title in three seasons with a victory over Michigan",
778 | "byline":"By Jared Diamond",
779 | "summary":"Villanova beat Michigan 79-62 to win the NCAA men’s college basketball national championship. The Wildcats claimed their second title in the past three seasons.",
780 | "share_link":"https://www.wsj.com/articles/villanova-wins-ncaa-mens-basketball-championship-1522726277",
781 | "category":"Life",
782 | "authors":[
783 | "Jared Diamond"
784 | ],
785 | "images":{
786 | "M":"https://images.wsj.net/im-5813/?width=1280&height=853&pixel_ratio=2",
787 | "phone":"https://images.wsj.net/im-5813/?width=364&height=244&pixel_ratio=2"
788 | },
789 | "image":"https://images.wsj.net/im-5813/?width=1280&height=853&pixel_ratio=2"
790 | },
791 | {
792 | "date_published":"2018-04-03T13:26-00:00",
793 | "headline":"A Bug’s Life: Shared Passion for Vintage VW Beetles",
794 | "subheadline":"An obsession with the tiny Volkswagens leads to his and her versions in one couple’s garage",
795 | "byline":"By A.J. Baime",
796 | "summary":"An obsession with the tiny Volkswagens leads to his and her versions in one couple’s garage.",
797 | "share_link":"https://www.wsj.com/articles/a-bugs-life-shared-passion-for-vw-beetles-1522761979",
798 | "category":"Life",
799 | "authors":[
800 | "A.J. Baime"
801 | ],
802 | "images":{
803 | "M":"http://s.wsj.net/public/resources/images/BN-YB960_MYRIDE_M_20180402161438.jpg",
804 | "phone":"http://s.wsj.net/public/resources/images/BN-YB960_MYRIDE_M_20180402161438.jpg"
805 | },
806 | "image":"http://s.wsj.net/public/resources/images/BN-YB960_MYRIDE_M_20180402161438.jpg"
807 | },
808 | {
809 | "date_published":"2018-04-02T19:43-00:00",
810 | "headline":"There’s No Such Thing as Free Baseball. Or is There?",
811 | "subheadline":"A smart promotion in Baltimore aims to develop a next generation of fans",
812 | "byline":"By Jason Gay",
813 | "summary":"Baseball remains a bargain compared to a lot of other sports. But it’s also an aging sport, with plenty of competition. Could it really afford to price out children?",
814 | "share_link":"https://www.wsj.com/articles/theres-no-such-thing-as-free-baseball-or-is-there-1522698202",
815 | "category":"Life",
816 | "authors":[
817 | "Jason Gay"
818 | ],
819 | "images":{
820 | "M":"https://images.wsj.net/im-5769/?width=1280&height=853&pixel_ratio=2",
821 | "phone":"https://images.wsj.net/im-5769/?width=1280&height=853&pixel_ratio=2"
822 | },
823 | "image":"https://images.wsj.net/im-5769/?width=1280&height=853&pixel_ratio=2"
824 | }
825 | ]
826 | };
827 |
--------------------------------------------------------------------------------
/server/dev-middleware.js:
--------------------------------------------------------------------------------
1 | import webpackDevMiddleware from 'webpack-dev-middleware';
2 | import webpackHotMiddleware from 'webpack-hot-middleware';
3 | import webpack from 'webpack';
4 | import webpackConfig from '../webpack.config.client.js';
5 |
6 | const compiler = webpack(webpackConfig);
7 |
8 | export default function (app) {
9 | app.use(webpackDevMiddleware(compiler, {
10 | hot: true,
11 | filename: 'bundle.js',
12 | publicPath: '/assets/',
13 | stats: {
14 | colors: true,
15 | },
16 | historyApiFallback: true,
17 | headers: { "Access-Control-Allow-Origin": "*" }
18 | }));
19 |
20 | app.use(webpackHotMiddleware(compiler, {
21 | log: console.log,
22 | path: '/__webpack_hmr',
23 | heartbeat: 10 * 1000,
24 | }));
25 | };
26 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import morgan from 'morgan';
3 | import React from 'react';
4 | import devMiddleware from './dev-middleware';
5 | import { renderToString } from 'react-dom/server';
6 | import htmlPage from '../client/template.js';
7 | import articles from './articles.js';
8 |
9 | let css = '';
10 | const app = express();
11 | const PORT = 3000;
12 |
13 | devMiddleware(app);
14 | app.use('/assets', express.static('dist'));
15 |
16 | //logger
17 | app.use(morgan('dev'));
18 |
19 | //Routes
20 | app.get('/', function(req, res) {
21 | const initialPage = htmlPage();
22 | res.send(initialPage);
23 | });
24 |
25 | //articles API route
26 | app.get('/api/articles', function(req, res) {
27 | res.json(articles);
28 | });
29 |
30 | //another API route
31 | //example of getting request parameters
32 | app.get('/api/:something', function(req, res) {
33 | res.json({
34 | foo: req.params.something
35 | });
36 | });
37 |
38 | //start the server!
39 | app.listen(PORT, () => console.log(`Express Server listening on ${PORT}`));
40 |
--------------------------------------------------------------------------------
/src/article.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | //Basic Article Component
4 | class Article extends Component {
5 | constructor(props) {
6 | super(props);
7 |
8 | //initial state
9 | this.state = {};
10 | }
11 |
12 | //Component Lifecycle
13 | //https://reactjs.org/docs/react-component.html#the-component-lifecycle
14 | /* DEPRECATED LIFECYCLE METHODS BELOW
15 | UNSAFE_componentWillMount() {
16 | console.log('component will mount');
17 | }
18 | UNSAFE_componentWillReceiveProps(nextProps) {
19 | console.log('component will receive props');
20 | }
21 | UNSAFE_componentWillUpdate() {
22 | console.log('component will update');
23 | }
24 | */
25 |
26 |
27 | static getDerivedStateFromProps(props, state) {
28 | console.log('get derived state from props');
29 | return null;
30 | }
31 |
32 | componentDidMount() {
33 | console.log('component did mount');
34 | }
35 | shouldComponentUpdate() {
36 | return true;
37 | }
38 | getSnapshotBeforeUpdate(prevProps, prevState){
39 | console.log('get snapshot before update');
40 | return { foo: 'bar' };
41 | }
42 | componentDidUpdate(prevProps, prevState, snapshot) {
43 | console.log('component did update');
44 | }
45 | componentWillUnmount() {
46 | console.log('component will unmount');
47 | }
48 |
49 | //this fires every time a prop or state changes
50 | //to use any prop, use this.props.NAME_OF_PROP
51 | //use {} to add JS expressions
52 | //use className to add CSS classes
53 | //remember that this is not HTML!!
54 | //https://reactjs.org/docs/introducing-jsx.html
55 | render() {
56 | return
Hello World
;
57 | }
58 | };
59 |
60 | //set default props here, if any
61 | Article.defaultProps = {};
62 |
63 | //export so others can use
64 | export default Article;
65 |
--------------------------------------------------------------------------------
/src/helloworld.js:
--------------------------------------------------------------------------------
1 | //import react, because we want to build off a React component
2 | import React, { Component } from 'react';
3 |
4 | //Example HelloWorld Component
5 | class HelloWorld extends Component {
6 | //this is where you put the JSX to render on the page
7 | render() {
8 | return
{this.props.message}