JavaScript, React

Style React component with styled-components : Part-2

In My Previous post Style React component with styled-components : Part-1 , I wrote how we can start using styled-components and we created one Spinner component with it.

Now we can see, how we can pass props to the styled component named StyledSpinner and change the color/behavior of it.

For this example, I will change the border color by passing prop. So, the styled component will show the color what we pass to it. Continue reading

JavaScript, React

Style React component with styled-components : Part-1

Styling your React component is an important part for any real world application.
We can style react components in a couple of ways. such as –
1. inline styling
2. CSS modules
3. emotion
4. styled-components

We will talk about styled-components in this article.

We are gonna create one simple animated loading spinner component.
Continue reading


Single Page Application (SPA) with React

Let’s talk about ReactJS today and how we can easily create a Single Page Application (SPA) with React. For routing , I will use a library called react-router . For this post, I will use v3.x . I will write another article based on v4.x.

ReactJS is really popular now a days , and developers are using ReactJS and react-router for creating SPAs .

react spa

I will use 4 Routes for my sample SPA with React. For this , I created 4 Components which represent 4 different routes.
Then we can import 4 Components on index.js file like below-

Continue reading

JavaScript, React

Play with React for beginners with react-basic-starter

I have been working with React for long time now . But as I was not regular in writing , that’s why I have never written a single post on React.

This would be officially my first ReactJS post , and I know I am late.


Its 2017 . There are lot of articles published on Web . Facebook has created a tool for React developers called create-react-app which is awesome for starting any new react based project. But What I feel , if anyone is a fresher in React , then its a bit more than the skill level.Also I feel React Developers should learn a bit of Webpack , thats why I added a simple Webpack Config for building react code.

Continue reading