DEV Community: Pranay Jain

Fresh Web Framework - A first Look

Pranay Jain — Thu, 07 Jul 2022 20:49:36 +0000

In this post, we'll look at the brand-new web framework fresh, a Deno-based Typescript web framework with some swanky features like utilising the islands architecture, no build step, and sending 0 Kb of JavaScript to the client by default (that's right, no JS).

Let's get started!

What is Deno?

Before we start talking about Fresh, I think it's important to first understand what Deno is because many people aren't familiar with it.

Deno was designed by the same developer who created NodeJS, with the objective of fixing things that he wished Node could accomplish. This, however, is no longer feasible due to the widespread use of Node, so he went ahead and created a new runtime based on JavaScript, TypeScript, and WebAssembly.

Deno has built-in TypeScript support, which means you don't have to manually configure your environment and can start using TypeScript right away.

Everything about Deno is fascinating, from the way it handles browser compatibility to the built-in security features. To keep this post short, we'll stop here because you now have some foundational knowledge about how the runtime works and go on to what the Fresh web framework is.

What is Fresh?

Fresh is a one-of-a-kind framework that is laser-focused on performance. As was already noted, by default, it sends 0 Kb of JavaScript to the client. That is, the server does the majority of the rendering, and the client only generates small parts of the UI for interactivity known as islands.

Essentially, Fresh is a routing framework and templating engine that renders pages as they are requested on a server.

Fresh renders and templates using preact with typescript (TSX) or JSX. Therefore, learning Fresh won't be as difficult if you are already familiar with react-based frameworks.

The majority of rendering is completed just in time on the server, while client rendering is opt in for each component. As a result, only the areas that call for interaction will ship with JavaScript. That's fantastic since the less JavaScript there is on the page, the faster it will load.

One of the most notable features of the fresh framework is that there is no build step whatsoever. All typescript to JavaScript translations are done just in time, so there will be an immediate deployment on your end. While many other frameworks claim to have ever-shorter build times, Fresh simply doesn't have one.

Fresh Architecture

Let's start with the fundamental ideas. A fresh project includes eight different components, but I'll only cover the routes and islands folders in this blog. You can read more about all of the other components here.

routes This folder contains all of your project's routes. Each file's name in this folder corresponds to the path used to view that page. This folder's code is never sent directly to the client.

islands This folder contains all of your project's interactive islands. Each file's name corresponds to the name of the island that file defines. This folder's code can be executed from both the client and the server.

Simply put, islands and routes are needed to bring interaction and reactivity to your project and to build pages and routes, respectively.

Since the bulk of processing is done on the server-side, Fresh can load pages considerably faster than most frameworks that use client-side rendering and even many server-side-rendering(Since Fresh doesn’t ship the whole rendering infrastructure to the client).

Conclusion

Fresh is light and straightforward.

The routing/island system is really simple to use and eliminates many of the bloating concerns that make web frameworks unpleasant. I'm definitely going to use Fresh for some projects in the future.

Obviously, the biggest challenge when working with Fresh is the size of the Deno ecosystem, but in all honesty, Fresh looks like a significant enough step in the right direction to justify putting up with Deno's growing pains.

Until next time 👋.

References

PyScript - Run Python in your Browser!

Pranay Jain — Sat, 04 Jun 2022 18:49:13 +0000

Python has grown in popularity dramatically in recent years. It has a wide range of applications, including AI, data science, robotics, and scripting, to mention a few.

Python is mostly used in the backend in web development, with frameworks such as Django and Flask.

Python formerly lacked front-end capabilities in comparison to other languages such as JavaScript. However, Python programmers have created libraries (such as Brython) to let their favourite language run on the web.

This year, during the PyCon 2022 conference, Anaconda launched PyScript, a framework that allows you to utilise Python on the web using regular HTML.

Here's a tweet regarding the launch:

Anaconda

@anacondainc

📢 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to bit.ly/3LwOmrT for more information. 🧠 💥

16:57 PM - 30 Apr 2022

Prerequisites

To code along with this article, you'll need the following tools and knowledge:

Your preferred text editor or IDE.
Python knowledge.
HTML knowledge
A web browser (Google Chrome is the recommended browser for PyScript).

What is PyScript?

PyScript is a Python front-end framework that lets users write Python applications in the web using an HTML interface.

It was created with the help of Emscripten, Pyodide, WASM, and other modern web technologies to provide the following capabilities:

To provide a simple and easy-to-use API.
To create a system of extendable and pluggable components.
To achieve the aim "Programming for the 99 percent," support and expand standard HTML to read opinionated and dependable bespoke components.

In the last few decades, Python and complicated UI languages like contemporary HTML, CSS, and JavaScript have not functioned together. While traditional HTML, CSS, and JavaScript have a steep learning curve, Python lacks a simple mechanism for quickly packaging and delivering projects with beautiful UIs.

Allowing Python to use HTML, CSS, and JavaScript conventions solves not only those two issues, but also web application development, packaging, distribution, and deployment.

PyScript isn't intended to replace JavaScript in the browser; rather, it's intended to provide additional flexibility and capability to Python developers, particularly data scientists.

Why PyScript?

PyScript provides a programming language with consistent styling conventions, increased expressiveness, and simplicity of learning by including the following features:

Browser-based support: PyScript makes Python and hosting possible without the use of servers or settings.
Bi-directional communication between Python and JavaScript objects and namespaces is possible using PyScript.
PyScript supports a wide range of Python packages, including Pandas, NumPy, and many others.
Flexibility of the framework: PyScript is a flexible framework that allows developers to easily write extensible components in Python.
PyScript's environment management feature allows authors to specify which files and packages should be included in their page code for it to run.
UI Development: PyScript allows developers to quickly create UI components such as buttons and containers, among others.

How to Get Started with PyScript

To get started with PyScript, add the relevant pyscript files to your HTML page. Let's use PyScript to create a simple "Hello World" page.

Let's create an index.html file and import the necessary PyScript files. These should go just before the closing </head> tag.

<head>
   <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
   <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   <title>PyScript</title>
</head>

Now that we've linked PyScript to the HTML file, we can print our "Hello World."

We can do this with the <py-script> tag. We can use the <py-script> tag to run multi-line Python scripts in the browser. The tag should be in the middle of the <body> tags.

<body>
   <py-script> print("Hello, World!") </py-script>
</body>

You should see the following in your browser:

The PyScript framework allows you to perform a variety of actions. Let's take a look at a few of them right now.

Python output in HTML tags

When using PyScript, you may want to pass variables from your Python code to HTML. To accomplish this, use the write method from the pyscript module within the <py-script> element. The id attribute can be used to pass strings that are displayed as ordinary text.

The write method takes two parameters: the id value and the variable to be supplied.

Here's a simple pyScript code that uses Python's datetime module to output today's date.

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <b>
        <p>Today is <u><label id='today'></label></u></p>
    </b>
    <py-script>
        import datetime as dt
        pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
</body>
</html>

And the output:

REPL in browser

PyScript provides a web-based interface for running Python code.

PyScript uses the <py-repl> tag to do this. The <py-repl> tag includes a REPL component, which works as a code editor and allows you to write executable code inline.

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <py-repl id="my-repl" auto-generate=true> </py-repl>
</html>

Import Files, Modules, and Libraries

One of PyScript's advantages is its adaptability. Local files, built-in modules, and third-party libraries can all be imported into PyScript. The <py-env> tag is used to do this. This tag is used to declare the required dependencies.

You can put the code in a .py file for local Python files on your system, and the paths to local modules are specified in the paths: key in the <py-env> tag.

Let's create a Python file random_number.py that returns a number between 1 and 10.

from random import randint

def generate_random_number():
    x = randint(0,10)
    return x

The element will then be used to import the Python file into the HTML. This tag should be placed in the <head> tag.

<html>
    <head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
        - paths:
          - ./random_number.py
      </py-env>
    </head>

  <body>
    <h1>Let's print random numbers</h1>
    <b>Your random number is  <label id="lucky"></label></b>
    <py-script>
      from random_number import generate_random_number
      pyscript.write('lucky', generate_random_number())
    </py-script>
  </body>
</html>

Here's the output:

PyScript also supports third-party libraries that are not included in the standard library.

Here's a simple scatter plot using PyScript:

<html>
<head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env>
        - numpy
        - matplotlib
    </py-env>
</head>
<body>
    <py-script>
        import matplotlib.pyplot as plt
        import numpy as np

        x = np.random.randn(500)
        y = np.random.randn(500)

        fig, ax = plt.subplots()
        ax.scatter(x, y)
        fig
    </py-script>
</body>
</html>

And the Output:

Configure metadata

Using the tag, you can set and customize general metadata about your PyScript application. This tag can be used in the following format:

<py-config>
  - autoclose_loader: false
  - runtimes:
    -
      src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
      name: pyodide-0.20
      lang: python
</py-config>

These are the optional values provided by the py-config tag. They are as follows:

autoclose_loader (boolean): PyScript will not close the loading splash screen if autoclose loader (boolean) is set to false.
name (string): The application's name.
version (string): The application's version.
runtimes (List of Runtimes): This is a list of runtime settings with the fields src, name, and lang.

Conclusion

You learnt what PyScript is and how to use it in HTML pages to run Python code in the browser. You also learned about the many operations and functionalities that PyScript can perform.

PyScript makes it easier to run and perform Python operations on the web, which was previously difficult. This is an incredible tool for anyone interested in using Python on the web.

PyScript is still in its infancy and is undergoing extensive development. It is still in the alpha stage and has known faults such as slow loading times, which can make it unusable. As a result, you shouldn't use it in production just yet because there will very certainly be many breaking changes.

References

JavaScript array methods explained

Pranay Jain — Fri, 11 Feb 2022 15:37:55 +0000

An array is a collection of values in JavaScript. It comes with several built-in properties and methods that we can use to add, remove, iterate, and manipulate data as needed. Knowing JavaScript array methods can also help you improve your programming skills.

In this article, we'll look at all the array methods in JavaScript that will assist you in effectively manipulating your data.

Let's get started.

push()

The push() appends one or more elements to the end of an array.Here’s the syntax of the push() method:

Array.push(element)

Some examples:

// add single element
let nums = [10,20,30,40]
nums.push(50) // nums = [10,20,30,40,50]

// add multiple elements
let nums = [10,20,30]
nums.push(40, 50) // nums = [10,20,30,40,50]

// add elements of an array to another array
let peoples = ["john","jane","steve"]
let nums = [1,2,3.4]
peoples.push(...nums) // peoples = ['john', 'jane', 'steve', 1, 2, 3.4]

unshift()

The unshift() method adds one or more elements to the beginning of an array.Here’s the syntax of the push() method:

Array.unshift(element)

Some examples:

// add single element
let nums = [10,20,30,40]
nums.unshift(50) // nums = [50,10,20,30,40]

// add multiple elements
let nums = [10,20,30]
nums.unshift(40, 50) // nums = [40,50,10,20,30]

pop()

The pop() method deletes the last element from an array. The pop() method has the following syntax:

The pop() method changes the length property of the array. If the array is empty, the pop() returns undefined.

Array.pop()

Some examples:

const nums = [10,20,30]
nums.pop() // nums = [10,20]

// using pop() with an empty array
const names = []
names.pop() // names = undefined

shift()

The shift() method deletes the first element from an array. The shift() method has the following syntax:

Array.shift()

Some examples:

const nums = [10,20,30]
nums.shift() // nums = [10,20]

splice()

The splice() method is used to delete existing elements, insert new elements, and replace elements in an array.

Deleting elements using splice() method.

To delete elements, you pass two arguments in splice() as follows:

Array.splice(position,num)

The position argument provides the first item to delete, while the num argument specifies the number of elements to delete.

let scores = [10,20,30,40]
scores.splice(0,2) // scores = [10,20]

Inserting elements using splice() method.

You can insert one or more elements into an array by passing three or more arguments to the splice() method, with the second argument set to 0 as follows:

Array.splice(position,0,new_element1,new_element2)

The position argument specifies the starting position in the array that the new elements will be inserted.

The second argument (0) instructs the splice() method to not delete any array elements.

The third argument, fourth argument, and so on are the new elements that are inserted into the array.

example:

let colors = ['red', 'green', 'blue']
colors.splice(2, 0, 'purple') // colors = ["red", "green", "purple", "blue"]

Replacing elements using splice() method.

To replace elements in an array, you must pass at least three arguments. The first argument specifies the starting position to insert, second one specifies numbers of elements to insert and the third argument specifies the element to insert.

example:

let languages = ['C', 'C++', 'Java', 'JavaScript']
languages.splice(1, 1, 'Python') // replaces C++ with python

slice()

The slice() method allows you to clone an array or copy a section of an array into a new array. The slice() method accepts two optional arguments as follows:

Array.slice(start,stop)

The start argument specifies the index from which to begin extraction. slice() starts at 0 if the start parameter is undefined.

The stop argument specifies a index at which extraction should be terminated. The slice() method extracts up to stop-1. If you don't specify a stop parameter, the slice() method will take the array's length as the stop parameter.

examples:

// clone an array
const nums = [1,2,3,4,5]
const newNums = nums.slice() // newNums = [1,2,3,4,5]

// copy a portion of an array
const colors = ['red','green','blue','purple','yellow']
const rgb = colors.slice(0,3) // rgb= ['red','green','blue']

some()

some() is used to see if at least one element in an array passes a test.The test condition is implemented by passing a callback function to the some() method.

const marks = [4,5,6,7,9,10,3]
const lessThanFiveExists = marks.some(function(m) {
    return m < 5
} // true

// shorter syntax
const lessThanFiveExists = marks.some(m => m < 5)

If you call the some() method on an empty array, the result is always false regardless of any condition. For example:

let names = []
names.some(n => n > 0) // false

every()

The every() method is used to test all of the elements in an array. Like the some() method, every() uses the callback method to test elements.

const nums = [1,2,4,5]
const isEven = nums.every(function (e) {
    return e % 2 === 0;
}) // false

// shorter syntax
const isEven = nums.every(n => n % 2 === 0)

If you call the every() method on an empty array, the result is always true for any condition. For example:

const nums = []
const ltZero = nums.every(n => n < 0) // true

sort()

The sort() method is used to sort arrays of numbers, strings, and objects.

The sort() method, by default, sorts the array elements in ascending order, with the smallest value first and the greatest value last.

The sort() method converts elements to strings and compares them to determine the order.

Consider the following example:

const nums = [0,1,2,3,10,20,30]
nums.sort() // [0,1,10,2,30,3,30]

In this example, the sort() method puts 10 before 2 because the string "10" occurs before "2" when doing a string comparison.

To fix this, you need to pass a compare function as an argument to sort() method. The compare function will be used by the sort() method to determine the order of elements.

const nums = [0, 1 , 2, 3, 10, 20, 30 ]
nums.sort( function( a , b){
    if(a > b) return 1
    if(a < b) return -1
    return 0
}) // [ 0,  1,  2, 3, 10, 20, 30 ]

// using arrow function
nums.sort((a,b) => {
    if(a > b) return 1
    if(a < b) return -1
    return 0;
})

// simplest version
numbers.sort((a, b) => a - b)

map()

The map() method is used to transform elements in an array. The map() method calls a callback function on every element of an array and returns a new array that contains the results.

const nums = [16,25,36]
nums.map(num => num * num) // [4,5,6]

filter()

The filter() method is used to filter out elements in an array. The filter() method iterates over every element in array and passes each element to a callback function. If the callback function returns true, it returns the element in the array.

const cities = [
    {name: 'Delhi', population: 3792621},
    {name: 'Jaipur', population: 8175133},
    {name: 'Nashik', population: 2695598},
    {name: 'Srinagar', population: 2099451},
    {name: 'Mysore', population: 1526006}
]

const bigCities = cities.filter(city => city.population > 3000000) // [{name: 'Delhi', population: 3792621}, {name: 'Jaipur', population: 8175133}]

forEach()

The forEach() method is used to exeucte a function on every element in an array. The forEach() method iterates over elements in an array and executes a callback function on every element.

const nums = [1,2,3]
let sum = 0
nums.forEach(num => sum += num)
// sum = 6

reduce()

The reduce() method receives a callback function which has an accumulator and a value as an argument. It uses the callback function on the accumulator as well as each value in the array to return a single value in the end. For example:

const nums = [1,2,3,4,5]
nums.reduce((products,value) => products * value)
// OUTPUT: 1*2*3*4*5 = 120

join()

The join() method concatenates elements in an array and returns a string. The syntax for join() method is as follows:

Array.join(separator)

The join() method accepts separator as an optional argument, which is a string that separates neighboring array elements.
If you don't give a separator to the join() method, it defaults to a comma.
When the array's elements aren't strings, the join() method turns them into string before joining them.
Note that the join() method turns undefined, null, and [] to an empty string.

const cssClasses = ['btn','btn-primary','btn-active']
const btnClass = cssClasses.join(' ') // btn btn-primary btn-active

flat()

The flat() method recursively concatenates all the items of the subarrays to a new array up to a specified depth. The syntax for the flat() method is as follows:

let newArray = Array.flat(depth)

The depth parameter defines how deep the array is flattened by the method. It is set to 1 by default.

const nums = [1, 2, [3, 4, 5, [6, 7]]]
const flatNums = nums.flat(2) // [1, 2, 3, 4, 5, 6, 7]

flatMap()

The flatMap() method uses a mapping function to map each element in an array and flattens the result into a new array. The flatMap() method is the combination of the map() method followed by the flat() method of depth 1.

const nums = [[1], [2], [3], [4], [5]]
const doubled = nums.flatMap(num => num * 2) // [2,4,6,8,10]

// using flat() and map() method
const doubled = nums.flat().map(num => num * 2)

indexOf()

The indexOf() and lastIndexOf() methods are used to find the position of an element in an array.This method returns the index of the first occurrence the element that you want to find, or -1 if the element is not found.

The syntax for the method is as follows:

Array.indexOf(searchElement) 
Array.lastIndexOf(searchElement)

The indexOf() and lastIndexOf() methods searchElement as an argument.
indexOf() and lastindexOf() methods use triple-equals operator (===) when comparing the searchElement with elements in the Array.

examples of indexOf() method:

const nums = [10,20,30,40,30]
nums.indexOf(30) // 2
nums.indexOf(60) // -1

examples of lastIndexOf() method:

const nums = [10,20,30,40,30]
nums.lastIndexOf(40) // 1
nums.lastIndexOf(30) // 0

nums.lastIndexOf(30) method returns 0 while nums.indexOf(30) method returns 2.
that is because, indexOf() method searches for element forward and lastIndexOf() method searches element backward.

at()

The at() method accepts an index and returns an element at that index.

For a positive index, the method returns the element at that index.

For a negative index, the method returns an element from the end of the array. For example, the arr.at(-1) returns the last element, arr.at(-2) returns the second last element, and so on.

const nums = [30,40,50,60]
nums.at(1) // 40
nums.at(-3) // 40

of()

This method assists us in improving array formation.

const myArray = Array.of(1,2,'A','C',true,false) // myArray = [1, 2, 'A', 'C', true, false]

find()

The find() method is used to search for the first element in an array, which satisfies a test. The test condition is supplied as a callback function.

const nums = [1,2,3,4,5]
const evenNums = nums.find(num => num % 2 === 0) // 2

findIndex()

The findIndex() method is used to find the first element that satisfies a given test.

const nums = [1,2,3,4,5]
nums.findIndex(num => num % 2 === 0) // 1

includes()

The includes() method checks if an element is in an array.

const nums = [1,2,3]
nums.includes(2) // true

concat()

The concat() method is used to merge two or more arrays into a single array.

const odds = [1,3,5]
const evens = [2,4,6]

const nums = odds.concat(evens) // nums = [1,3,5,2,4,6]

Thank you for taking the time to read!!

Styling React App

Pranay Jain — Wed, 09 Feb 2022 19:36:47 +0000

When it comes to styling your React app, you have a lot of options. Which do you think you'll choose?

I've broken out the five main approaches you can take when writing CSS in your React project.

For any project, there is no one-size-fits-all option for writing styles in React. Each project is unique, with its own set of requirements.

As a result, at the end of each segment, I'll go over the pros and cons of each approach to help you decide which is ideal for your tasks.

Let's get going.

What We Will Be Coding?

We'll use the same example to see how the code for each of these styling approaches compares to one another: a simple but tidy testimonial card.

Inline Styles

The simplest approach to style any React application is to use inline styles.

You don't need to create a separate stylesheet if you style items inline.

In comparison to styles in a stylesheet, styles applied directly to elements have a greater priority. This implies that they "override" any other style rules that an element may have.

Here's how we designed our testimonial card with inline styles:

// App.js
export default function App() {
  return (
    <section
      style={{
        fontFamily: "sans-serif",
        fontSize: "1rem",
        fontWeight: 1.5,
        lineHeight: 1.5,
        color: "#4a4d4e",
        backgroundColor: "#fff",
        padding: "0 2em",
        minHeight: "100vh",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          textAlign: "center",
          maxWidth: "950px",
          margin: "0 auto",
          border: "1px solid #e6e6e6",
          padding: "40px 25px",
          marginTop: "50px",
        }}
      >
        <img
          src="https://randomuser.me/api/portraits/women/90.jpg"
          alt="Jane Doe"
          style={{
            margin: "-90px auto 30px",
            width: "100px",
            borderRadius: "50%",
            objectFit: "cover",
            marginBottom: "0",
          }}
        />
        <div>
          <p
            style={{
              lineHeight: 1.5,
              fontWeight: 300,
              marginBottom: "25px",
              fontSize: "1.375rem",
            }}
          >
            The simple and intuitive design makes it easy for me use. I highly
            recommend Fetch to my peers.
          </p>
        </div>
        <p
          style={{
            marginBottom: "0",
            fontWeight: 600,
            fontSize: "1rem",
          }}
        >
          Jane Doe
          <span style={{ fontWeight: 400 }}> · Front End Developer</span>
        </p>
      </div>
    </section>
  )
}

Despite a few short-term advantages, inline styles are only appropriate for relatively tiny applications. As your code base increases, the challenges of inline styles become obvious.

Even a simple component like this gets rather hefty if all the styles are inline, as the code sample above illustrates.

However, you may save time by converting inline styles into reusable variables that can be saved in an object:

// App.js
const styles = {
  section: {
    fontFamily: "sans-serif",
    fontSize: "1rem",
    fontWeight: 1.5,
    lineHeight: 1.5,
    color: "#4a4d4e",
    backgroundColor: "#fff",
    padding: "0 2em"
  },
  wrapper: {
    textAlign: "center",
    maxWidth: "950px",
    margin: "0 auto",
    border: "1px solid #e6e6e6",
    padding: "40px 25px",
    marginTop: "50px"
  },
  avatar: {
    margin: "-90px auto 30px",
    width: "100px",
    borderRadius: "50%",
    objectFit: "cover",
    marginBottom: "0"
  },
  quote: {
    lineHeight: 1.5,
    fontWeight: 300,
    marginBottom: "25px",
    fontSize: "1.375rem"
  },
  name: {
    marginBottom: "0",
    fontWeight: 600,
    fontSize: "1rem"
  },
  position: { fontWeight: 400 }
};

export default function App() {
  return (
    <section style={styles.section}>
      <div style={styles.wrapper}>
        <img
          src="https://randomuser.me/api/portraits/women/90.jpg"
          alt="Jane Doe"
          style={styles.avatar}
        />
        <div>
          <p style={styles.quote}>
            The simple and intuitive design makes it easy for me use. I highly
            recommend Fetch to my peers.

          </p>
        </div>
        <p style={styles.name}>
          Jane Doe
          <span style={styles.position}> · Front End Developer</span>
        </p>
      </div>
    </section>
  );
}

Despite this improvement, inline styles still miss a number of critical features that a standard CSS stylesheet may provide.

You can't write animations, styles for nested elements (i.e. all child elements, first-child, last-child), pseudo-classes (i.e.:hover), or pseudo-elements, to mention a few things (::first-line).

Inline styles are great for prototyping. However, as the project progresses, you'll need to switch to a different CSS styling option in order to obtain basic CSS capabilities.

Pros:

The quickest way to compose styles
Prototyping friendly (write inline styles then move to stylesheet)
Have a higher priority (can override styles from a stylesheet)

Cons:

JSX is unreadable due to a large number of inline styles.
Basic CSS capabilities such as animations, selectors, and so on are not available.
Doesn't scale very well

Plain CSS

Instead of using inline styles to style the elements of a component, it's more common to utilize a CSS stylesheet.

Writing CSS in a stylesheet is the most common and straightforward method for styling a React application, but it shouldn't be disregarded.

Writing styles in "basic" CSS stylesheets is improving all the time, thanks to the expanding amount of possibilities offered in the CSS standard.

This includes new pseudo-classes like:is and:where, as well as CSS variables for storing dynamic data and complex selectors for precisely picking child items.

Here's how we designed our testimonial card with plain css:

/* styles.css */
body {
  font-family: sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #4a4d4e;
  background-color: #fff;
}
.testimonial {
  margin: 0 auto;
  padding: 0 2em;
}
.testimonial-wrapper {
  text-align: center;
  max-width: 950px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 40px 25px;
  margin-top: 50px;
}
.testimonial-quote p {
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 25px;
  font-size: 1.375rem;
}
.testimonial-avatar {
  margin: -90px auto 30px;
  width: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0;
}
.testimonial-name {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1rem;
}
.testimonial-name span {
  font-weight: 400;
}

// App.js
import "./styles.css";

export default function App() {
  return (
    <section className="testimonial">
      <div className="testimonial-wrapper">
        <img
          className="testimonial-avatar"
          src="https://randomuser.me/api/portraits/women/90.jpg"
          alt="Jane Doe"
        />
        <div className="testimonial-quote">
          <p>
            The simple and intuitive design makes it easy for me use. I highly
            recommend Fetch to my peers.
          </p>
        </div>
        <p className="testimonial-name">
          Jane Doe<span> · Front End Developer</span>
        </p>
      </div>
    </section>
  );
}

For our testimonial card, note that we are creating classes to be applied to each individual element. These classes all start with the same name testimonial-.

CSS written in a stylesheet is a great first choice for your application. Unlike inline styles, it can style your application in virtually any way you need.

One minor problem might be your naming convention. Once you have a very well-developed application, it becomes harder to think of unique classnames for your elements, especially when you have 5 divs wrapped inside each other.

If you don't have a naming convention you are confident with (i.e. BEM), it can be easy to make mistakes, plus create multiple classes with the same name, which leads to conflicts.

Traditional CSS is also longer and more repetitive than SASS/SCSS and other newer CSS approaches. As a result, writing CSS styles takes longer than utilizing a library like CSS-in-JS or a tool like SCSS.

Because CSS applies to all children components, a CSS stylesheet applied to a component isn't limited to that component. All of the established rules will be passed down to any elements that are children of your styled component.

If you're comfortable with CSS, it's a feasible alternative for styling any React application.

With that said, there are a variety of CSS libraries available that provide all of the power of CSS with less code and many more features that CSS will never provide on its own (such as scoped styles and automatic vendor prefixing).

Pros:

Provides us with all of the current CSS tools (variables, advanced selectors, new pseudoclasses, etc.)
It assists us in cleaning up our component files by removing inline styles.

Cons:

Vendor prefixing must be set up to ensure that all users have access to the most recent features.
It is not scoped, therefore any stylesheet will be applied to the component and its children.
You'll need to use a consistent naming convention to avoid clashes in styles.

SASS / SCSS

What is SASS, exactly? SASS is an acronym for "Syntactically Awesome Style Sheets."

SASS offers a variety of useful capabilities not found in ordinary CSS stylesheets. Variables, styles that can be extended, and nesting are all present.

Despite having a similar syntax to ordinary CSS, SCSS styles do not require the use of open and closing brackets when creating style rules.

As an example, here's a SCSS stylesheet with some nested styles:

/* styles.scss */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Compare this with the same code written in a SASS stylesheet:

/* styles.sass */
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Because this isn't standard CSS, it must be converted from SASS to normal CSS. You can use a library like node-sass to accomplish this in our React apps.

Install node-sass with npm to get started with.scss and.sass files:

npm install node-sass

Here's how we designed our testimonial card with scss:

/* styles.scss */
$text-color: #4a4d4e;

%font-basic {
  font-size: 1rem;
}

body {
  @extend %font-basic;
  font-family: $font-stack;
  color: $text-color;
  margin: 0;
  font-weight: 1.5;
  line-height: 1.5;
  background-color: #fff;
}

/* unchanged rules skipped */

.testimonial-name {
  @extend %font-basic;
  margin-bottom: 0;
  font-weight: 600;

  span {
    font-weight: 400;
  }
}

These styles give us the following features: variables, extending styles and nested styles.

Variables: You can use dynamic values by declaring variables with a $ at the beginning, much like in JavaScript.

$text-color can be used in multiple rules.

Extending / Inheritance: Style rules can be extended . You can extend rules by writing your own selector, which you can reuse as a variable. The names of the rules you want to extend begin with the %.

The rules body and .testimonial-name inherit the %font-basic variable.

Nesting: You can stack numerous rules that start with the same selector instead of writing them all separately.

To target the span element within .testimonial-name, we use a nested selector.

You can find a working version of a React application with SCSS here.

Pros:

Many dynamic CSS features are present, such as extending, nesting, and mixins.
CSS styles can be created with a lot less boilerplate than standard CSS.

Cons:

Much like CSS, styles are global and not specific to any one component.
CSS stylesheets are starting to include functionality that were previously exclusively available in SASS, such as CSS variables (not necessarily a con, but worth noting)
Configuration is frequently required with SASS / SCSS, such as the installation of the Node library node-sass.

CSS Modules

Another minor alternative to CSS or SASS is CSS modules.

CSS modules are useful since they can be used with either regular CSS or SASS. Additionally, if you're using Create React App, you may start using CSS modules right away.

Here's an example of a CSS module-based application:

/* styles.module.css */
body {
  font-family: sans-serif;
  margin: 0;
  font-size: 1rem;
  font-weight: 1.5;
  line-height: 1.5;
  color: #4a4d4e;
  background-color: #fff;
}

/* styles skipped */

.testimonial-name span {
  font-weight: 400;
}

// App.js
import styles from './styles.module.css';

export default function App() {
  return (
    <section className={styles.testimonial}>
      <div className={styles['testimonial-wrapper']}>
        <img
          src="https://randomuser.me/api/portraits/women/90.jpg"
          alt="Jane Doe"
          className={styles['testimonial-avatar']}
        />
        <div>
          <p className={styles['testimonial-quote']}>
            The simple and intuitive design makes it easy for me use. I highly
            recommend Fetch to my peers.
          </p>
        </div>
        <p className={styles['testimonial-name']}>
          Jane Doe
          <span> · Front End Developer</span>
        </p>
      </div>
    </section>
  );
}

Before the extension .css, our CSS file has the name .module. Any CSS module file must begin with the word "module" and conclude with the proper extension (CSS or SASS/SCSS).

When we look at the code above, we can see that CSS modules are written exactly like regular CSS, but they are imported and utilized as if they were generated as objects (inline styles).

The advantage of CSS modules is that they assist us avoid the problem of class clashes that we have with standard CSS. When our project is constructed, the attributes we're referencing become unique classnames that can't conflict with one another.

Our HTML elements will appear as follows:

<p class="_styles__testimonial-name_309571057">
  Jane Doe
</p>

The issue of global scope in CSS is also addressed with CSS modules. Unlike traditional CSS stylesheets, CSS declared using modules to individual components will not cascade to child components.

CSS modules are recommended over CSS and SASS for avoiding class clashes and designing predictable styles that only apply to one or another component.

Pro:

Unlike CSS / SASS, styles are limited to one or more components.
Classnames picked at random ensure that there is no collision of styles.
They are compatible with SASS and CSS.

Cons:

Classnames can be tough to remember.
When employing CSS styles, such as object properties, there may be a learning curve.

CSS-in-JS

CSS-in-JS enables us to create CSS styles directly in the (.js) files of our components.

It not only allows you to write CSS style rules without having to create a .css file, but it also allows you to scope these styles to particular components.

In other words, you can add, update, or remove CSS without fear of being caught off guard. Changing the styles of one component has no effect on the styles of the rest of your application.

CSS-in-JS frequently employs a form of JavaScript function known as a tagged template literal. The best part is that we can still write normal CSS style rules directly in our JS!

Here's a quick example of a popular CSS-in-JS package, Styled Components:

// App.js
import styled from "styled-components";

const Button = styled.button`
  color: #ff6700;
  border: 2px solid #ff6700;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Result:

Take note of the following:

You can create standard CSS styles as well as nested styles and pseudo-classes (like hover).
Styles can be applied to any valid HTML element, such as the button element mentioned above (see styled.button).
You can use these styles to create new components, as shown in component Button.

Can props be sent to this component? Yes! We can export this component and use it everywhere we want in our app, as well as add dynamic functionality to it with props.

Let's imagine you want an inverted version of Button, with the backdrop and text inverted. It's no problem.

Pass the inverted prop to our second Button, and you can use the ${} syntax with an inner function in Button to retrieve all props supplied to the component.

// App.js
import styled from "styled-components";

const Button = styled.button`
  background: ${(props) => (props.inverted ? "#ff6700" : "#fff")};
  color: ${(props) => (props.inverted ? "#fff" : "#ff6700")};
  border: 2px solid #ff6700;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  &:hover {
    opacity: 0.9;
  }
`;

export default function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Button inverted>Click me</Button>
    </div>
  );
}

You can select the inverted prop and use a ternary operator to conditionally determine the color of the background and text of button.

Here's the result:

There are a slew of other advantages to using a CSS-in-JS library to style your React applications (too many to name here), but I'll go through a few of them below.

Check out Emotion and Styled Components, two of the most popular CSS-in-JS libraries for React.

Using CSS-in-JS libraries comes with the drawback of introducing another library to your project. However, I would say that the increased developer experience you get from styling your React apps over basic CSS is well worth it.

Pros:

Styles are scoped to specific components.
We can now export, reuse, and even extend our styles using props because our CSS is now JS.
CSS-in-JS libraries generate unique classnames for your written styles, ensuring that there are no styling conflicts.
You don't need to worry about class naming conventions; simply create styles!

Cons:

Unlike basic CSS, you'll need to install one or more third-party JavaScript libraries, which will make your finished project heavier.

Conclusion

It's worth noting that in this comparison, I didn't include component libraries. I wanted to focus on a few ways for creating your own styles.

Remember that for your project, adopting a library with pre-made components and styles, such as Material UI or Ant Design (to name a few), is a completely valid option.

After reading this article, I hope you have a good understanding of how to style your React apps and which method to apply for your next project.