Getting Started with React

Table of contents

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.

JSX

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

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

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

view raw

JSX1

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:

Show hidden characters

	const name = 'John Snow';

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

view raw

JSX2

hosted with ❤ by GitHub

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

Show hidden characters

	function getName() {
	return 'John Snow';
	}

	const element = <h1>Welcome to React, {getName()}</h1>;

view raw

JSX3

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,

Show hidden characters

view raw

JSX4

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.

Show hidden characters

	const element = <h1>Hello, world</h1>;
	ReactDOM.render(
	element,
	document.getElementById('root')
	);

view raw

gistfile1.txt

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.

Components

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 :

Show hidden characters


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

	ES6
	class MyComponent extends Component {
	render() {
	return <h1>Hello World}</h1>;
	}
	}

view raw

react2

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 :

Show hidden characters

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

view raw

react3

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 :

Show hidden characters

	import React, { Component } from 'react';

	class MyComponent extends Component {

	render() {
	return (
	<h1>My Component Header</h1>
	);
	}
	}

	export default MyComponent;