create-react-container
v0.2.0
Published
Create files for a container like Presentational, reducer, action etc.
Downloads
4
Readme
create-react-container
Utility function designed to create smart containers for your React components. In case you are using concept of containers and components in your project, there's too much basic structure that you need to create over and over. This module tries to reduce that wasted effort.
NOTE: This module is opinionated. It assumes you are using react-css-modules. Plus you are following the concept of containers and components to manage your code base for React.
Setup
npm i create-react-container -g
or
yarn global add create-react-container
How to use
Lets assume this is the directory structure of your project
app
|- components
|- containers
|- Detail
Lets assume, we want to create a component named Home
. Go inside the containers
directory from your terminal and
type this command
react-container Home
New directory structure would be:
app
|- components
|- containers
|- Home
|- home.action.js
|- Home.container.js
|- Home.css
|- Home.js
|- home.reducer.js
|- Home.spec.js
|- index.js
|- Detail
This command created 1 directory and 7 files within that directory. Below is the sample content of these files
home.action.js
const sampleAction = (data) => ({
type: 'SAMPLE_ACTION',
data
});
export default {
sampleAction
};
Home.container.js
import { connect } from 'react-redux';
import HomePresentational from './Home';
const mapStateToProps = () => ({
});
const mapDispatchToProps = () => ({
});
const Home = connect(mapStateToProps, mapDispatchToProps)(HomePresentational);
export default Home;
Home.css
.sample {}
Home.js
import React, { PropTypes } from 'react';
import cssModules from 'react-css-modules';
import styleCss from './Home.css';
const Home = (props) => {
return (
<div styleName="sample">Home</div>
);
};
Home.propTypes = {
};
export default cssModules(Home, styleCss, { allowMultiple: true });
home.reducer.js
const home = (state = {
info: {}
}, action) => {
switch (action.type) {
default:
return state;
}
};
export default home;
Home.spec.js
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Home from './Home';
describe('Home test', () => {
it('should render component', () => {
const wrapper = shallow(<Home />);
expect(wrapper.find('.Home').length).toBe(1);
});
});
index.js
import Home from './Home.container';
export default Home