tocology / react_redux

Simple Example for react with redux

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React with Redux

This repository is for understanding how to use React with Redux

Development

Preparation

We should install packages first.

> npm install

Getting YouTube API key

In this project, we need to get YouTube Video data by Google API.

When you enter into API Manager, you can easily find YouTube Data API. At this place, you have to subscribe API key with Browser key.

And then write down the key at 'config/config.js'

Base Information

This project uses the Bootstrap basically. You can find that CDN of Bootstrap has been wrote on '/index.html'

Directory Information

There are tree different sub-projects.

  • YouTube: it is only composed of React and deals with how to get data by Ajax or communicate with components by events(callbacks)
  • BookList: it is composed of React and Redux. Especially, it deals with Action creators, so we can check the flow of whole process.
  • WeatherForecastChart: it is also based on React and Redux with actions. However, there is something more important. That is Redux-Promise. It works like Promise of javascript, so holding the actions until the job is finished. Additionally, react-sparklines and react-google-maps are used to describe charts.

Weather Data

We get the weather forecast data by OpenAPI from OpenWeatherMap.

Using the API, we should apply for API Key personally at first time.

For further information about OpenWeatherMap API, you should access this link.

Post Data

From the lecture, he introduced a API server that has been created at reduxblog.

So, we can get and put data at this server. For further information, you should visit this site.

Test

Basically, this project uses Webpack and NPM script.

First, we need to install packages that are used in our project.

> npm install

After installation of packages, we can run our project with Webpack.

> npm start

Reference

Basically this project was from ReduxSimpleStarter.

About

Simple Example for react with redux


Languages

Language:JavaScript 94.2%Language:CSS 3.5%Language:HTML 2.3%