├── .babelrc
├── .gitignore
├── README.md
├── dist
└── index.html
├── package.json
├── src
├── Post.js
├── index.js
└── postApi.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "react"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/*.js
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | **react-ajax-demo**
2 |
3 | An example implementation of AJAX calls in React application using axios.
4 |
5 | Please check the coresponding [blog post](https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1#.f813ztpay) for more informations.
6 |
7 | Running the app:
8 |
9 | `npm start`
10 |
11 | **Licence**
12 |
13 | MIT
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-up",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "MIT",
13 | "devDependencies": {
14 | "axios": "^0.15.2",
15 | "babel": "^6.5.2",
16 | "babel-core": "^6.18.2",
17 | "babel-loader": "^6.2.8",
18 | "babel-preset-es2015": "^6.18.0",
19 | "babel-preset-react": "^6.16.0",
20 | "react": "^15.4.1",
21 | "react-dom": "^15.4.1",
22 | "webpack": "^1.13.3",
23 | "webpack-dev-server": "^1.16.2"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/Post.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | class Post extends React.Component {
4 | render() {
5 | if(!(this.props.title && this.props.content && this.props.image)) {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | else {
15 | /**
16 | * we re using dangerouslySetInnerHTML from React to insert content that
17 | * includes HTML tags into our structure; use this wisely and learn more at
18 | * https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml
19 | */
20 | return (
21 |
22 |
23 | {this.props.title}
24 |
25 |
26 | );
27 | }
28 | }
29 | }
30 |
31 | Post.propTypes = {
32 | content: React.PropTypes.string,
33 | id: React.PropTypes.number,
34 | image: React.PropTypes.string,
35 | title: React.PropTypes.string
36 | };
37 |
38 | Post.defaultProps = {
39 | title: null,
40 | content: null,
41 | image: null
42 | };
43 |
44 | export default Post;
45 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { render } from "react-dom";
3 |
4 | import Post from "./Post";
5 | import postApi from "./postApi";
6 |
7 | class App extends React.Component {
8 |
9 | constructor(props) {
10 | super(props);
11 |
12 | this.state = {
13 | postContent: null
14 | };
15 | }
16 |
17 | componentDidMount() {
18 | postApi.requestPost(Math.ceil(Math.random() * 10)).then(data => {
19 | this.setState({postContent: data})
20 | });
21 | }
22 |
23 | render() {
24 | return (
25 |
28 | );
29 | }
30 | }
31 | render(,
32 | document.getElementById("root"));
--------------------------------------------------------------------------------
/src/postApi.js:
--------------------------------------------------------------------------------
1 | /**
2 | * this is a (very) simple example of an Post API
3 | *
4 | */
5 |
6 | import axios from "axios";
7 |
8 | export default {
9 | requestPost: function(id) {
10 | return axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
11 | .then(response => {
12 | /**
13 | * sadly, jsonplaceholder dosen't match our article shape
14 | * so we need to modify it a bit :)
15 | */
16 | return {
17 | title: response.data.title,
18 | image: "http://lorempixel.com/c/880/200/technics/",
19 | content: '' + response.data.body + '
'
20 | };
21 | })
22 | }
23 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | entry: ["./src/index.js"],
3 | output: {
4 | path: "./dist",
5 | filename: "bundle.js"
6 | },
7 | module: {
8 | loaders: [
9 | {
10 | test: /\.js$/,
11 | exclude: /node_modules/,
12 | loaders: ["babel-loader"]
13 | }
14 | ]
15 | },
16 | devServer: {
17 | contentBase: "dist/"
18 | }
19 | };
--------------------------------------------------------------------------------