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.

Component Lifecycle Changes in React 16.3

React 16.3 brings some changes to the component lifecycle methods, 3 of the existing component lifecycle methods will depreciate and 2 new methods are introduced.

The following life cycle methods will eventually depreciate. These methods will continue to work till React 17.0

ref Forwarding in React 16.3

When we create nested components in react, react does not allow accessing the DOM of the inner element through refs, The ref on the wrapper component points to the wrapper component and not the inner component. In some cases we might need to access the inner component through refs, react 16.3 provides a way to achieve this using ref Forwarding.