React.js and It’s Component

April 19, 2018

WHAT IS REACT.JS:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

Here the term declarative means allows you to control flow and state in your application.
It is component based. That means it build encapsulated components that manage their own state, then compose them to make UIs.

Since component logic is written in Javascript One can easily pass data through their app and keep the state out of the DOM.

REACT COMPONENT:

Before starting React Component We should consider a variable declaration

Const element = <h1>Hello, World</h1>

We can see that it is neither a string nor HTML.
Actually, It is called JSX, a syntax extension to javascript. JSX may remind you of a template language, but it comes with the full power of JavaScript. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

Components and Props:

Components split the UI into independent, reusable pieces and think about each piece in isolation. Conceptually, Components are like Javascript functions. They accept arbitrary inputs and return React element what should appear on the screen.

The simplest way to define a component is to write a javascript function:

function Welcome (props) {
   Return <h1> Hello, {props.name}</h1> ;
}

One can also use a class to define a component:

Class Welcome extends React.Component {
   render () {
         Return <h1> Hello, {props.name}</h1> ;
   }
}

The above two component are equal from React’s point of view.

Composing Components

Components can refer to other components in their output. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

We can create an App component that renders Welcome component of before:

function App() {
   return (
     <div>
         < Welcome name=” Sara”/>
         < Welcome name=” Saba”/>
   </div>
  ) ;
}

ReactDOM.render (
<App/>,
Document.getElementById(‘root’)
);

Stateless and Stateful components:

Stateless functions are a very good way to define highly reusable components. They don’t hold state, they are the functions that take the input props and return what to display.

We can define a Button stateless React.js component as follow:

const Button = (props) =>
         <button onclick={props.onclick}> {props.buttonText} </button>

We can also build a stateful React.js component.

Class ButtonIncrement extends React.Component {
      State = { counter: 0 }

      handleOnClilck = () => {
            this.setState ((prevState) => ({
            Counter : prevState. Counter +1 }));
}

render () {
       Return (
             <Button
                   onclick={this.handleOnClilck}
                   buttonText = {Current counter : $ {this.state.counter}} />
       )}
}

Handling Events :

Handling events with React elements is very similar to handling events on DOM elements, but there are some differences
React events are named using camelCase, rather than lowercase.
With JSX you pass a function as an event handler, rather than a string.
One can’t return false to prevent the default behavior in React. One should call preventDefault.
For example with plain html we can write:

<a href=”#” onclick=”console.log(‘The link was clicked.’); return false”>click me</a>

In React this should look like this

Function ActionLink() {
      Function handleClick(e){
            e.preventDefault();
            Console.log (‘The link was clicked’);
      }
      Return (
      <a href=”#” onClick = {handleClick}> Click me</a>
      );
}

Conditional Rendering :

In React We can create distinct components that encapsulate behavior we need. Then, we can render only some of them, depending on the state of our application.

Conditional rendering in React works the same way conditions work in javascript.

Let us consider two components :

Function UserGreeting( props ) {
Return <h1>Welcome back !</h1>
}
Function GuestGreeting( props ) {
Return <h1>Please sign up.</h1>
}

We will create a Greeting component that displays either of these components depending on whether a user logged in:

Function Greeting ( props ) {
       Const isLoggedIn = props.isLoggedIn;

       If ( isLoggedIn ) {
                Return <UserGreting />;
       }
        Return <GuestGreeting />;
}

ReactDOM.render (
< Greeting isLoggedIn = {false} />,
document.getElementById (‘root’)
);

Composition vs Inheritance :

React recommend using composition instead of inheritance to reuse code between components.

Some components don’t know their children ahead of time. React recommend that such components use the special children prop to pass children element directly into their output.

Function FancyBorder (props) {
      Return (
             <div className = {‘FancyBorder FancyBorder-’ + props.color}>
                    { props.children }
             </div>
      );
 }

This lets other components pass arbitrary children to them by nesting the JSX :

Function WelcomeDialog () {
       Return (
              <FancyBorder color = “blue”>
                    <h1 className = “Dialog - title> Welcome</h1>
                    <p className =”Dialog - message”>
                           Thank you for visiting us !
                    </p>
              </FancyBorder >
                    );
}

Controlled Components :

We can describe controlled component by the example below:

Class NameForm extends React.component {
     Constructor (props) {
          Super (props) ;
          This.state = {value: ‘ ‘};
    this.handleChange = this .handleChange.bind (this);
    }
    HandleChange (event) {
          this,setState ({value: event.target.value});
    }

    Render (
           <input type = “text” value = { this.state.value} onChange = {this.handleChange}/ >
           <input type =”submit” value = “submit”/>
    );
    }
}

Components can be used any other way, here I try to describe some common using component types.

If you want to learn more about React.js can follow the link below:

Contributor: Anwesha PaulNascenia

To read my other blogs please click on the links below:

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *