Getting Started with React

Reading Time: 3 minutes

React (sometimes called React.js or ReactJS) is an open-source JavaScript library for building user interfaces.

It allows developers to create large web-applications that use data that can change over time, without reloading the page.

It aims primarily to provide speed, simplicity and scalability.

React is flexible. You can create a separate project on react, or you can add it to an existing code base of any framework like Angular.


First thing you need to know for React is JSX. JSX is a syntax extension of Javascript and it looks like :

const element = <h1>Welcome to React</h1>;

view raw


hosted with ❤ by GitHub

It may look like a template language, but it comes with the full power of JavaScript, like you can embed expressions in JSX as well. For eg:

const name = 'John Snow';
const element = <h1>Welcome to React, {name}</h1>;

view raw


hosted with ❤ by GitHub

This will show the value of name. We can also call a method that returns a value in JSX.

function getName() {
return 'John Snow';
const element = <h1>Welcome to React, {getName()}</h1>;

view raw


hosted with ❤ by GitHub

Since JSX is closer to JavaScript than HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example,
class becomes className in JSX, and tabindex becomes tabIndex.

How to render your JSX element?

You can render your react element wherever in the DOM you want. Suppose we have div element in our index HTML file, like,

<div id="root"></div>

view raw


hosted with ❤ by GitHub

We’ll call this the root DOM node, because everything inside this will be managed by React DOM. We usually have single root DOM node, but if you’re using an exisiting code base, you may have multiple root DOM nodes.

To render your element, we have a render method or ReactDom that takes two parameters, JSX element and DOM element. JSX element gets rendered into the specified DOM element.

const element = <h1>Hello, world</h1>;

view raw


hosted with ❤ by GitHub

Note : Your JSX element must contain only one parent tag. If you want multiple HTML elements, you can wrap them into a div.


Now, you’re familiar with react’s element, let’s move on to React components.

React’s Component let you split the UI into independent, reusable pieces, and think about each piece in isolation.
They are like javascript functions that accept a parameter props(we’ll discuss this in detail later), and returns a JSX element. So, a component looks like this :

ES5 :
function MyComponent(props) {
return <h1>Hello World}</h1>;
class MyComponent extends Component {
render() {
return <h1>Hello World}</h1>;

view raw


hosted with ❤ by GitHub

We will write our code in ES6. We have a render method that returns the JSX element. This JSX element renders wherever we use this component.

We can add another component into your existing component. For eg :

class ParentComponent extends Component {
render() {
element = (<div>
<MyComponent />
<h2> Something Relevant </h2>
return element;

view raw


hosted with ❤ by GitHub

Here, when we render the ParentComponent, it will also render MyComponent, and MyComponent’s element i’e. “Hello World” will be rendered.

Let’s create a simple app to make things more clear.

To setup a basic react application, install the following dependency :

npm install -g create-react-app

Use this command to create a basic project:

create-react-app my-app // where my-app is your project name

This will create the project as well as install the required dependencies.
Go into the project directory and run your application :

cd my-app
npm start

It will host the application on 3000 port, and it will look something like this:


Let’s take a look at the flow.

In public/ we have index.html where we have a div with id “root”.
In src/index.js we are calling the render method and rendering a component called App in the root DOM node.
Let’s have a look at App component in src/App.js.

Here is all the JSX that is rendered.
You can edit the JSX and see the changes.

Let’s add a new Component called MyComponent. Create a file MyComponent.js and add the following code :

import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return (
<h1>My Component Header</h1>
export default MyComponent;

view raw


hosted with ❤ by GitHub

Import MyComponent in App.js :

import MyComponent from ‘./MyComponent’;

And replace the JSX element with :


Now, it should look like this:


Here’s a link to the repository that contains all the code for this blog.

To Continue learning react, here’s the next blog where we cover How data is handled between Components in React (State vs Props)

Reference :

Written by 

Principal Architect at Knoldus Inc

2 thoughts on “Getting Started with React4 min read

Comments are closed.

%d bloggers like this: