REACT - STYLING YOUR REACT COMPONENT

By: Saurav

2019-08-03 18:10:00 UTC

There are multiple ways of styling your react component. You can use inline-styling, HOC patterns like withStyles provided by '@material-ui/core', styled-jsx promoted by Zeit, styled-components or the old school way of having a dedicated SCSS file.

In this blog, I will be discussing the two ways promoted by Next.js in detail since that will be the react framework we will be using. Let's get started.

First, let's install and set up a next.js application:

Step 1: Create a folder named hello-world and install next react and react-dom

cd projects
mkdir hello-world
cd hello-world
yarn add next react react-dom

Step 2: Add this script to the hash in package.json file

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }

Now, your package.json would look something like this:

{
  "dependencies": {
    "next": "^9.0.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Step 3: Now in the hello-world, create a folder named pages and create a file index.js in it as shown below

Screen shot 2019 08 03 at 11.33.32 am

The file you put in the pages folder would be the main endpoints now. In other words, whatever js file you put inside the pages folder becomes a route and is automatically processed as well as rendered.

The index file would be the root file which is accessible when going to localhost:3000

Note: One of the reasons I like next.js more is because it takes care of routing for us as mentioned before. All you have to do to create a new route is to add a file. For example, as you can see below, I have added a file named hello.js and it is accessible at http://localhost:3000/hello

Step 4: Let's fire up the development server. Type the command below in your terminal.

yarn run dev

Note If you want to run your app on a different port, simply add the port #. The command below is running the app on port 3001 . 3000 is the default port.

yarn run dev -p 3001

Owned & Maintained by Saurav Prakash

If you like what you see, you can help me cover server costs or buy me a cup of coffee though donation :)