1.0.0 • Published 6 years ago
default-container v1.0.0
react-split-container
Folder Structure
- build
- config
- node_modules
- src
- [reducers]
- [constants]
- [actions]
- [actionCreators]
.babelrc
.eslintrc
.gitignore
.npmignore
package.json
README.md
Folders
- build: Module build.
- config: Module webpack config.
- src: Container sources.
Files
- .babelrc: here is defined the babel configuration about how transpile our code
- .eslintrc / .eslintignore: here are defined the eslint configuration and ignored files
- .npmignore / .gitignore: here are defined the files and foldes that we want to ignore for and npm
Development
- Component must be created in src directory (entry must be index.js).
- Keep watch for building changes.
npm start
Working with containers
- Containers will be rendered in routes and should have not any style configuration. Instead, containers use Layouts and Components. They can be installed via npm.
import React from "react";
import Layout from "some-project-layout";
import Button from "some-project-component";
export default class MyContainer extends React.Component {
render() {
const MyTitle = <h1>Title</h1>;
const BoxButton1 = <Button>Button 1</Button>;
const BoxButton2 = <Button>Button 2</Button>;
const BoxButton3 = <Button>Button 3</Button>;
return Layout ? (
<Layout
title={MyTitle}
box1={BoxButton1}
box2={BoxButton2}
box3={BoxButton3}
/>
) : null;
}
}
Test your component
- For testing your component you will need to link it to the project (Inside container folder)
npm link
(Inside project folder)
npm link container-name
- Remember unlink component (Inside container folder)
npm unlink
(Inside project folder)
npm unlink container-name
Publish your component
(Inside container folder)
npm publish
Working with redux
To make reducers and actions accesible they must be exported
import * as reducers from 'reducers'
import * as actions from 'actions'
import * as actionCreators from 'actionCreators'
import * as constants from 'constants'
// ...
export {
reducers,
actions,
actionCreators,
constants,
}
1.0.0
6 years ago