A Brief Introduction of React Fundamentals

What are React Fundamentals?

React Native runs on React. We all know React is a popular open-source library for developing user interfaces with JavaScript. Hence, to extract the true essence of React Native, it is important to understand React. In this article, we will explore the fundamentals of React to help you get started or refresh your past learnings.

We’re going to cover the following core concepts powering React:

• components
• JSX
• props
• state

 Components=>

React components allows you to split the user interface into separate sections to reuse and handle them independently. We can provide an optional input to a React component to get a React element in return which is then rendered on the screen.

The React component can either be “stateful” or "stateless." The class type belongs to "Stateful" components while the function type belongs to "Stateless".

Also Read: How to create a react native project

Stateless component

import React from 'react';

require('./style.css');

import ReactDOM from 'react-dom';

import App from './app.js';

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

Statefull component

import React from 'react';

require('./style.css');

import ReactDOM from 'react-dom';

import App from './app.js';

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

JSX=>

JSX stands for JavaScript XML.

Using JSX, we can write HTML inside JavaScript and place them in the DOM. Also, we do not have to use functions like appendChild( ) or createElement( ) for that.

JSX provides syntactic sugar for React.createElement( ) function and this is documented in the official React docs.

Without using JSX, there is an additional step to create an element using the following process:

const text = React.createElement('p', {}, 'This is a text');

const container = React.createElement('div','{}',text );

ReactDOM.render(container,rootElement);

Using JSX, the above code can be simplified:

const container = (

 <div>

   <p>This is a text</p>

 </div>

);

ReactDOM.render(container,rootElement);

Also Read: Social Login in React Native App

Props=>

Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

class Car extends React.Component {

 constructor(props) {

   super(props);

   this.state = {

     brand: this.props.brand,

     color: "Black"

   };

 }

}

State=>

A state can be defined as the place where the data comes from. Hence, it is essential to make our state simple and also minimize the stateful component numbers.

You can understand it with a simple example, if you have ten components that seek data from the state, we should create one container component. And that container will keep the state for all of them.

import React from 'react';

class App extends React.Component {

   constructor(props) {

      super(props);

      this.state = {

         header: "Header from state...",

         content: "Content from state..."

      }

   }

   render() {

      return (

         <div>

            <h1>{this.state.header}</h1>

            <h2>{this.state.content}</h2>

         </div>

      );

   }

}

export default App;

Pros and Cons of Hooks:-

Pros:-

1. They can be a substitute for the common design patterns.

2. They enable easy testing and maintenance of functional components.

3. Create re-usable, isolated components to avoid redundant logic.

4.  Easy to use and write and co-locate.

Cons:-

1. Have to respect its rules, without a linter plugin, it is difficult to know which rule has been broken.

2. Need a considerable time practicing to use properly (Exp: State, Props).

3. Be aware of the wrong use (Exp: JSX).

Also Read: A Brief Introduction of Hooks in React

Conclusion

To recap what we learn before, React fundamentals came to solve a very common problems, that everybody use React come across, they encourage the use of React components to benefit from its simplicity and efficiency.

Since everything has its cons, react fundaments also have their own, that we have to be aware of, respect react team recommendation to avoid them.

Choose Oodles For React Native App Development Services

With over a decade of experience in development, we have raised a team of developers that are adept at using React Native to develop cross-platform mobile applications. Our React Native Mobile App Development Services can easily cater to your diverse needs and help you build an app that maximizes user engagement and interactivity.

To contact our development team, visit this link.

Got time? Do check our portfolio here.