4. Four ways to style react components – codeburst

  • All depend on your personal preferences and the specific complexity of your application.If you want to add just a few style properties, then inline styling is the best option.When you want to reuse your style properties in the same file then style-component are perfect.When your application is more complex I…
  • Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style’s value, usually a string.We can create a variable that stores style properties and then pass it to the element like style={nameOfvariable}We can also pass the styling directly…
  • CSS ModulesA CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
  • Great article about css modules here.Similar to css we import css file import styles ‘.
  • Styled-components 💅Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSSFirst we need to install styled-components librarynpm install styled-components –saveNow we can create a variable by selecting a particular html element…

There are four different options to style React components. All depend on your personal preferences and the specific complexity of your application. In React, inline styles are not specified as a…
Continue reading “4. Four ways to style react components – codeburst”

Dynamic Vendor Bundling in Webpack – On Frontend Engineering – Medium

  • In the above code we’re chunking into a “vendor” bundle only when the path of the bundle is in node_modules .
  • The way, we only include 3rd party libraries that we actually reference in our app into the vendor bundle.
  • It turns out, the CommonsChunkPlugin minChunks property accepts a callback that allows you to return a boolean for whether or not to include each module it comes across in the bundle.
  • One common optimization people do with code-splitting is to define a Vendor bundle to include all the 3rd party libraries in a separate bundle that can be cached much longer than your main App bundle (because, presumably, you wouldn’t update your 3rd party dependencies nearly as much as you would update your app code).
  • The key is to externalize this mapping into a “manifest” bundle.

If you aren’t already, there’s very little reason not to take advantage of code-splitting (bundle chunking) in Webpack. Especially for…
Continue reading “Dynamic Vendor Bundling in Webpack – On Frontend Engineering – Medium”

How to avoid refactoring in your first React.js application

How to avoid refactoring in your first #ReactJS app:

  • In the short blog post I will try to point out some pitfalls, which you should take care of if you want to avoid refactoring in your first React.js application.
  • A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props.
  • I don’t see any reasons why not using ES6.
  • If we want to change the data of our big grid component, we have to re-initialize our grid as a jQuery object in React using the componentDidUpdate method.
  • Let’s imagine we need a big grid component, which does some complex things with cells.

Popularity of React.js is growing pretty fast and it seems like React became a compact and beautiful way of how to develop your applications. I have worked on a side project and felt like it is right time to try React. During development of my first project in React I had to do several refactorings. In this short blog post I will try to point out some pitfalls, which you should take care of if you want to avoid refactoring in your first React.js application.
Continue reading “How to avoid refactoring in your first React.js application”