CSS Module styles example in React

There are different ways of adding styles to react components.
1. Inline styles.
2. CSS Stylesheet
3. CSS Modules

In this example we shall see on how to implement styles using a CSS Modules in React components. The example uses styles defined in a seperate .css file and imported into the react component file.

Inline styles example in React

There are different ways of adding styles to react components.
1. Inline styles.
2. CSS Stylesheet
3. CSS Modules

In this example we shall see on how to implement Inline styles in React components. The example uses styles defined in the same file as the react component and the style is applied to the component using className="<style name>"

Basic Component example in React

This example is similar to the previous HelloWorld example, except that we will use a seperate file for the HelloWorld react component.
The example contains 3 files index.html, index.jsx and HelloWorld,jsx

The index.html is the template file into which the react component will be loaded.
The index.jsx file contains the ReactDOM.render() which loads the React component in the HTML template.
The HelloWorld.jsx file is the React component file which contains a HelloWorld component.

Apart from these files we will need to setup the environment to take care of compiling the .jsx files and rendering the component to the browser. For this example am using a "webpack-react-boilerplate" which takes care of setting up the environment so that we can focus on the actual example.

Basic HelloWorld example in React

Let us start the looking into React with some basic examples, as always we will start will a very basic Hello World example.
This example just displays a string "Hello World" in the browser. The example contains 2 files index.html and index.jsx.

The index.html is the template file into which the react component will be loaded.
The index.jsx file is the React component file which contains a HelloWorld component.

Apart from these files we will need to setup the environment to take care of compiling the .jsx files and rendering the component to the browser. Setting up the environment will be an overkill for this basic example hence we will skip that part. For this example am using a "webpack-react-boilerplate" which takes care of setting up the environment so that we can focus on the actual example.

Let us now look into the example files.

What's new in React 16.3

React 16.3 introduces the following new features

1. Context API
2. createRef API
3. ref Forwarding
4. new Component Lifecycle Changes
5. StrictMode

Let us now look into these features in detail.