Getting started with React

React is a JS library for building User Interface. That’s it. Let’s try to understand why React is popular, basic building blocks of React development for web.

Why React?

Consider a simple web page where you click on a button and the colour of another element changes. Traditionally, how do you do it? You just get hold of the element in DOM and change the style of it. This approach is called Imperative. It means that you mention what has to be done (change colour) and how it has to be done (access the DOM and update style). However, directly making changes to the DOM is a costly operation and when a simple webpage grows into a bigger web application like an e-commerce application, accessing the DOM frequently proves to be costly.

React solves this problem. React would just need “what has to be changed” and it takes care of “how it has to be changed”. Hence, React is told to be Declarative. Declarative means asking what has to be done. That’s it. Declarative approach takes care of how it can be done.

Setup a react project

While starting a new web project, it would be difficult to setup necessary files and human err is possible. To make our lives easier, React has created a package Create React app which does all these setup for you. Cool, isn’t it?

Before using the create-react-app package, make sure that node and npm are installed in your system.

To create a new react application with necessary files and setup, simply run this command in terminal (if you are on mac) or in command prompt (if you are on windows) :

npx create-react-app my-app

Components in React

React is built with the concept of reusable components. Here, what is a component? They are just plain JS functions and return HTML like code. These reusable pieces of code — the components — form the foundation of React and makes React a go-to library for UI development.

Let’s try to understand better.. Consider the code snippet below:

class App extends Component {
  render() {
    return (
      <div>Hello World</div>
    )
  }  
}

In the above code, App is a simple component. App is a component which just renders a <div>. Note that this code looks like HTML but it’s not. It is called JSX, an extension of JS which could be used as a template language and would be easier to embed into JS functions. Components that we created can also be invoked in a similar way in JSX. For instance, to invoke the above mentioned App component, it would look like this:

class AppInvoke extends Component {
render() {
    return (
      <App /> 
    )
  }
}

The Components might be of two types: Class components and Functional components

Simply put, Class components are components built as classes. The above code snippet is an example of Class component. Functional components are components which are built as just JS functions.

For instance, a functional component would look like this:

const App = () => {
  return (
    <div>Hello world</div>
  )
}

Props in React

Sometimes, we might want to pass some useful information from one Component to another. Hmm.. how to do that? We have Props for that. What’s a prop? Prop is an argument passed in JSX code from one component to another.

Let’s look at an example:

class App extends Component {
  render() {
    return (
      <PropExample world="world"/>
    )
  }  
}

const PropExample = (props) => {
  return (
    <div>Hello {props.world}</div>
  )
}

Here, App component uses the PropExample component and passes a prop into the PropExample component. The PropExample component accepts it and makes use of it in the <div>. Now the result in web page would be Hello world.

These are the basic blocks of building a React application. Once you develop your awesome react app, to test it in your browser, run the following command in your terminal (if you are on mac) / command prompt (if you are on windows).

npm start

And that’s it. Your application would start running on localhost:3000 on your browser.

Hops this article helps in understanding the basic concepts and building blocks on React.

Happy learning!