How to build a React-Redux application with API-first CMS Contentful

How to build a #ReactJS #Redux application with API-first CMS Contentful:  #JavaScript

  • js with the followingreturn ( div{this.props.children}/div );Now go to the browser, refresh the page and see the changes.Fetch blog contentsNext we’ll integrate with Contentful so we can fetch and show blog posts dynamically.Steps to setup your Contentful accountSignup at Contentful (you can choose Free package, that will be sufficient for now) and create an empty space.Create a new Content Type and add few fields to it.
  • js file and use axios to make a GET request to Contentful server.import axios from ‘axios’;export const FETCH_POSTS = ‘FETCH_POSTS’;const API_BASE_URL = API_SPACE_ID = ‘buyxxxxxxx’;const API_TOKEN = function fetchPosts() { const request = return { type: FETCH_POSTS, payload: request };}fetchPosts action creator will return an action , which is nothing but a plain JavaScript object with a type property.
  • /actions/index’;const INITIAL_STATE = { all: [] };export default function(state = INITIAL_STATE, action) { switch(action.type) { case FETCH_POSTS: return { …state, all: action.payload.data.items }; default: return state; }}Next we will update the application state in .
  • /posts_reducer’;const rootReducer = combineReducers({ posts: PostsReducer});export default rootReducer;Displaying postsTo get our app working, now we’ll promote the PostsIndex component to a Redux container in .
  • /actions/index’;class PostsIndex extends Component { componentWillMount() { this.props.fetchPosts(); } renderPosts() { return this.props.posts.map((post, index) = { return ( article key={post.sys.id} h3{post.fields.title}/h3 p{post.fields.description}/p /article ); }); } render() { return ( div h2Blog Posts/h2 {this.renderPosts()} /div ); }}function mapStateToProps(state) { return { posts: state.posts.all };}export default connect(mapStateToProps, { fetchPosts })(PostsIndex);Then go to the browser, refresh the page and check the results.Now the existing UI may look very dull, only few headlines followed by some paragraphs.

When I first started to re-design my company website I was very excited to use ReactJS to build the front-end application in the React way. But soon I realised, in the excitement of using the new JS…
Continue reading “How to build a React-Redux application with API-first CMS Contentful”

React Universal with Next.js: Server-side React

#ReactJS Universal with #NextJS: Server-side React

  • /pages/index.js // Import React import React from ‘react’ // Export an anonymous arrow function // which returns the template export default () => (

    This is just so easy!

  • import React from ‘react’ import Head from ‘next/head’ import axios from ‘axios’; export default class extends React.
  • Our index page does not implement this performance related feature in details page.
  • /pages/details.js import React from ‘react’ // Import Link from next import Link from ‘next/link’ export default () => (

    Coming soon. . .!

The term “universal” is a community-coined term for building web apps that render happily on a server. You might be familiar with “isomorphic” as…
Continue reading “React Universal with Next.js: Server-side React”