bookmar-landing-page-master

What I learned

1- In this project I used a new directory structure where all files related to a component are grouped togather which is dependent on existence of webpack loaders to process each of these assets. One of advantages fo using this pattern is that the component becomes more and easer to resue since you can do simple component an past if you want to use these component in other projects.

FooComponent:
  index.js 
  FooComponent.scss 
  FooComponent.test.js
  foo.js
  foo-icon.svg
  FooComponent-data.json

2- As the size of a project grows you end up doing import of type import foo from "../../../components/componentName/component" which is a mothful to type, a elegant solution to this problem is to use aliases, in webpack config you can add:

module.exports ={
 resolve:{
  alias:{
    Components: path.resolve(__dirname,"src/components")
  }
 }
}

And instead of that long string you type js import foo from "Components/foo/foo.js". In in a small project this might not be a headache but as the project grows alises can save you alot of redundant typing.

3- Using react's property validation feature you can validate props of each component to make sure it has the right type, one major benefits of doing property validation is that debugging becomes much easier since react flags the presence of wrong prop type.You need to install the "prop-types" npm package and the syntax is:

Component.prototype = {
  propName: PropTypes.tpye
  propName1: PropTypes.type.isRequired
}

Happy coding :=)