React Code Samples

One of the most used JavaScript front end development libraries, React, or React.js, is used to build interfaces.

Here are a few of React.js examples explained, taking the help of React syntax.

An example of React components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

In React js, components are reusable. Hence, the props can be used for injecting the value, as stated above. In the function Welcome(props), the name=”Faisal Arkan” will inject value into {props.name}. The element will then be rendered into .html by React.

You can also use other ways to declare components:-

As there are two kinds of components, stateless and stateful, you can use other ways to declare components such as:-

class Cat extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      humor: 'happy'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

which is an example of stateful components.

For stateless components, you can use the React code in the following order:

const Cat = props => {
  return (  
    <div>
      <h1>{props.name}</h1>
      <p>{props.color}</p>
    </div>;
  );
};

Here the arrow will function from ES6.

Implied return components

When you need to furnish multiple elements without using a wrapper element, fragments are used. But you might see an error message if you try to interpret elements without using an enclosing tag in JSX ( short for JavaScript XML ). The error message might display something like this: ‘Adjacent JSX elements must be wrapped in an enclosing tag.’

To overcome this error message, you need to understand that when JSX occurs, it creates elements with the adjacent tag names. But upon finding multiple tag names, the system does not know what tags to use.

While a wrapper div was used to solve this problem in the past, newer versions ( version 16 ) are using Fragment to eradicate this issue. Hence, the Fragment components act as the wrapper element and save you from all the fuss of adding unnecessary divs to the DOM. The component can be used directly from React import, or you can even deconstruct it.

Here is an example of direct import from React:

import React from 'react';
class MyComponent extends React.Component {
  render(){
    return (
      <React.Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </React.Fragment>
    );
  }
}
export default MyComponent;

OR, here is an example of the deconstructed version of the same:

// Deconstructed
import React, { Component, Fragment } from 'react';
class MyComponent extends Component {
  render(){
    return (
      <Fragment>
        <div>I am an element!</div>
        <button>I am another element</button>
      </Fragment>
    );
  }
}

export default MyComponent;

The process gets even more straightforward with the React version 16.2. Here, empty JSX tags can be rendered as Fragments. A useful example is:

return (
  <>
    <div>I am an element!</div>
    <button>I am another element</button>
  </>
);

JSX examples

JSX is the abbreviated form of JavaScript XML. It is an expression the utilizes JavaScript’s HTML statements. The expression can be used in other places by assigning the expression to other variables.

In fact, within an HTML statement, you can also combine JSX with several other JavaScript Expressions by placing them in braces ( { } ).

Single-line & Multi-line expressions

Single line expressions are relatively easier to use. Here is an example:

const one = <h1>Hello World!</h1>;

Also, as you put the code into a single parenthesis, you can use multiple lines in a single JSX expression. Here is a code to show how:-

const two = (
  <ul>
    <li>Once</li>
    <li>Twice</li>
  </ul>
);

These few coding examples of React JS can be used for coding easily.

Other useful articles: