What, Why and Create First React Code.

3 minutes read

This tutorial we will see how to get started with React to extend existing capabilities of Botpress, by createing custom components. We will also answer what, why andcreate first react code.

What

An open source javascript library for building user interfaces. It can be used with both single page and multiple page webapps where the server can send back the components.

Why

It helps us solve problems which will otherwise happen with using just normal Html and javascript.

• State Management: UI state becomes difficult to handle with vanilla javascript
• Business logic: Helps us in focusing on business logic and not on preventing the app from exploding
• Big community: Huge ecosystem and active community.
• High Performance: Does not offer a built in container for dependencies, but can use EcmaScript 6 module and use via Babel to inject dependencies automatically

Code (No React)

In many websites, we have seen a card layout, where these cards show a summary and are arranged perfectly in the dashboard. Let us see how we achieve this with simple HTML and CSS first.

HTML

<div class="person">
  <h1>Spongebob</h1>
  <h4>My age is 10</h4>
</div>
<div class="person">
  <h1>Morty</h1>
  <h4>My age is 50</h4>
</div>

CSS

.person {
  border: 1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  width: 180px;  
  padding: 10px;
  margin: 10px;
  display: inline-block;
}

Codepen link: https://codepen.io/abhisheksimion/pen/xxKZMZB

In the above solution, we see the div element with person CSS class is one card. In the next section, we will see how to reuse this card by passing dynamic properties like name and age parameters to create a card component in React.

Code (Using React)

React uses next generation javascript modules like EcmaScript 6. We will use a preprocessor named Babel which will compile our next gen javascript code in such a way (transform syntax to a backwards compatible version of JavaScript) that our browsers and environments can understand.

Next it needs the following 2 libraries

• react.min.js (Contains logic from creating components)
• react-dom.min.js (Rendering these components to real DOM)

That’s it, we can now write our react code.

Since this is going to be a single page app our HTML contains only parent div tag.

HTML

<div id="app"></div>

JAVASCRIPT

React component is just a normal function. This function should always return a code which will be used to render the component.

Note: Function name should always start with capital letter.

function Person(props) {
  return (
      <div className="person">
        <h1>{props.name}</h1>
        <h4>My age is {props.age}</h4>
      </div>
  );
}
var app = (
  <div className="app">
    <Person name="Spongebob" age="10"/>
    <Person name="Morty" age="50"/>
  </div>
);
ReactDOM.render(app, document.querySelector("#root"));

Here we see that Person function is our component which takes props as it’s a parameter, assign dynamic values and return the component.

Next, we see that app variable is used to create a root element to club all our components in a single place holder.

Note: JSX has a requirement to have only 1 root component, which is why we added a parent div on line # 11.

Finally, we make use of ReactDom to render our app to the div element with root id.

In the above function Person we see that it returns an HTML code, but it is not. Babel allows us to use this special syntax which looks like HTML and is called JSX, behind the scenes this gets compiled into actual javascript code.

React uses special attributes to differentiate between HTML and React methods. Here className attribute is used to specify a CSS class for an HTML element. Check official docs here for more information.

Final codepen link: https://codepen.io/abhisheksimion/pen/NWKxevx

Let me know your thoughts in the comment section and drop a like if you found this useful.