window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-63172957-1');
Sound
Awwwards
</html>
Created by potrace 1.16, written by Peter Selinger 2001-2019
Back to blog
JavaScript

React JS Questions & Answers (Part 1) 2021

Article contents:

What is JSX?

JSX is a superset of JavaScript that allows HTML to be included in code files without requiring any special quoting. JSX combines the JS from JavaScript and the X from XML. It is a JavaScript extension that allows us to define React elements using a tag-based syntax directly within our JavaScript code.

Thanks to JSX, without any extra templating syntax (except for the curly braces), we are able to use JavaScript in HTML. JSX was initially invented for React, but it became useful for other modern libraries and frameworks after it gained popularity.

The JSX files used in React development make it easy to mix HTML and JavaScript, but there are some important differences from regular HTML files.

In the example below text “Welcome to React world!” inside h4 tag is returned as JavaScript function to the render function.

export default class App extends Component {
   render = () =>
    <h4 className="bg-primary text-white text-center p-2 m-1">
      {'Welcome to React world!'} //JSX
    </h4>
}

How to create components in React?

There are two possible ways to create a component.

Class Components

In previous versions of React, the only way to add state to a component was to use a class component. This required not only a lot of syntax, but also made it more difficult to reuse functionality across components.

Example:

class Contacts extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div></div>
    );
  }
}

It’s still possible to create a React component using class syntax but be forewarned that React.Component is on the path to deprecation. Although it’s still supported, you can expect this to go the way of React.createClass.

const Contacts = React.createClass({
  getInitialState () {
    return {

    };
  },
  render() {
    return (
      <div></div>
    );
  }
});

Function Components

For a while, class components were the popular choice for writing React applications. Eventually,
function components were added but function components couldn’t handle side-effects (useEffect hooks) or state (useState/useReducer hooks).

As a result, these components were known as functional stateless components.

const Stateless = ({books}) => {
 return (
   <ul>
     {books.map(book => {
       return <li>book</li>
     })}
   </ul>
 )
}

Later with the addition of React Hooks, function components worked the same as class components, with state and side-effects. And since there was no longer any practical difference between them, the community chose function components since they are more lightweight.

const Statefull = ({books}) => {

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );

}

What are Pure Components?

React component is considered a Pure Component if it renders the same output for the same state and props value.

React provides the PureComponent base class for these class components.

// Standard Class Component
class MyComponent extends React.Component {
 render () {
   return (
     <div>MyComponent</div>
   )
 }
}
 
// PureComponent
class MyPureComponent extends React.PureComponent {
 render () {
   return (
     <div>MyPureComponent</div>
   )
 }
}

React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. If updated values are the same as previous values, render is not triggered.

What are props in React?

React supports props —short for properties —which allows a parent component to provide data to its children, which they can use to render their content.

Easy saying, props are inputs to components.

Props are defined by adding properties to the custom HTML elements that apply components. The name of the property is the nameof the prop, and the value can be a static value or an expression.

<!-- "greeting" and "name" are props -->
<Message greeting="Hello" name="Bob" /> 
<Message greeting="Hola" name={ "Alice" + "Smith" } />
<Message greeting="Hi there" name="Dora" />

Let see how we can receive greeting and name props in a child function component:

export function Message(props) {
return <h4 className="bg-success text-white text-center p-2">
  {props.greeting}, {props.name}
</h4>
}

The primary purpose of props in React is to provide the following component functionality:

  • Pass custom data to your component.
  • Trigger state changes.
  • Use via this.props.reactProp inside component’s render() method.


Back to blog

</html>
Wordpress Developer Loader, Web Developer Loader , Front End Developer Loader Jack is thinking