Bharat Kalluri     ·  About

Learning React: Basics & Understanding Components

Why React?

React is a “Library for building user interfaces”. That’s what it says on the website. So, what does it mean? React is a Javascript library for developing single page applications. It is developed and open sourced by Facebook. Using react, you make reusable components and use them to make websites. The beauty of react is that it works on the web, you can combine react with electron and make cross-platform web applications, and make the user regret why he got a system with low RAM ;-) And using react native, make Android and IOS applications. So, React practically runs everywhere!

How to start developing react applications?

Setting up react on your own requires a lot of effort. It involves setting up Babel, webpack etc. Which takes forever. So people use boilerplate code to start react projects. To solve this, Facebook made its own boilerplate solution. It released create-react-app. With this, starting development in react became very easy.

To create a react app. let us use npx (which is installed by default)

npx create-react-app routing

Now, it created an application called routing in the current folder. Let us run the app!

cd routing
npm run start

Now, a browser will open up and you’ll see a banner with a logo which says “Welcome to react!”, Now go ahead and remove anything from the paragraph element in App.js, and save the file. Now, the browser also reloads automatically. This is called hot reloading. Awesome stuff!

So what are Components?

Are components these simple reusable …. components? They contain templates and logic together in a single class/function. Multiple components can be grouped together and made into complex user interfaces. This idea of making small components and reusing them for larger purposes works really well for web application interfaces.

The App.js is a component. For simplicity, delete App.css, App.test.js and logo.svg. And edit the file so that it looks as follows.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello world!</h1>
      </div>
    );
  }
}
export default App;

If you switch to the browser, you’ll see Hello world! Let us try to read and understand the code. We created a class which inherits from React’s component class. Inside that, It is mandatory for all react components to have a render function which returns Jsx. Jsx looks like HTML, but every HTML element get’s converted into javascript objects. Therefore, it much easier to read and understand. We will export this component and use it in the index.js. You can observe that this is the only component being called in the index.js. Another important detail to remember is that, everything under the render’s return must always be under a single div/Component.

Now let us have some fun, Let us create a simple add function, just above the render function. And fill it as follows

date(a,b){
    return (a+b)
}

We can call this function inside the template by using curly braces, as such.And do much more!

...
<h1>Hello world!</h1>
<p>{this.add(1,2)}</p>
<p>{new Date().toUTCString()}</p>
...

Now, save and switch to the browser, and you’ll see number 3 and time below that!

Another very powerful feature of components is that it takes arguments! These are called props in React language. Stand for properties. Let us edit the App component such that it takes a name as a prop and let us make it display - Hello {name}.

Edit the component as follows

class App extends Component {
  constructor(props) {
    super(props)
  }
  add(a,b){
    return (a+b)
  }
  render() {
    return (
      <div className="App">
        <h1>Hello {this.props.name}!</h1>
        <p>{this.add(1,2)}</p>
        <p>{new Date().toUTCString()}</p>
      </div>
    );
  }
}

We just defined a constructor, and called super so that it takes properties from the parent. Now in the header tag, we called the name property of props. the “this” keyword is needed because we are using class components. Functional components also can be made! Now let us give the App component a parameter in index.js!

Edit index.js as follows

...
ReactDOM.render(<App name="Batman"/>, document.getElementById('root'));
...

Now, Save all files and switch to the browser. You’ll see, Hello Batman! Now we can pass props to components and reuse them. Suppose we are making a profile component. Passing a prop like a user name or id, we can use that to call the API and make a profile page. There are many possibilities with props.You can also call props inside loops and build complicated web pages. One detail to remember is props are read-only.

This article is long enough. Next time, we will talk about more fun topics like state and state management etc.. Till then, Be Curious!

Written April 27, 2018.

← Docker for developement  Linux setup →