Setting Up Development Environment And Creating Basic Component In ReactJS Project

This article is about how to setup a development environment for ReactJS projects and create a very basic ReactJS component.

What is ReactJS?

React.js is an open source JavaScript library which helps in building dynamic User Interfaces. It's not a framework but basically the “V” in MVC (Model-View-Controller). So, you can create Views (components) using ReactJS.

React is maintained by Facebook’s product infrastructure and Instagram’s UI Engineering teams.

Advantages of React

Here are a few advantages of using React to build dynamic User Interfaces in your application.

• Design simple declarative Views for each state.
• Encapsulated Views in the form of components.
• Virtual DOM.
• Automatic re-rendering of View on data update in state and props.
• Completely independent from rest of the applications.

Installation

There are many ways to start a ReactJS application. It could be through Grunt, Gulp, or directly by embedding script tags in the index.html page.

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

But now, the React team has prepared the NPM tool called ‘create-react-app’ to create Single Page React applications. It sets up your development environment with latest JavaSript features, like writing code in ES6 which provides a very good experience. It also provides commands to optimize your app code and make it production ready. So, here are the steps to create a new Single Page React app.

npm install - g create - react - app
create - react - app my - react - app
cd my - react - app
npm start

Mac users might need to use [sudo] before "npm install " command.

When running the above commands in Terminal or Command Prompt, it will create a folder named “my-react-app” with all the ingredients for a React app, inside this folder. The folder structure for the newly created React app should look like the following.

“npm start” command will launch the app in default browser with a URL http://localhost:3000. If port 3000 is occupied, then it will prompt the user to launch with some other port. Any changes made in any file inside “src” folder would reflect automatically by reloading the browser just after saving the changes. No need to refresh/reload the browser.

The following command would create a deployable optimized build with the folder name “build” inside the root folder and this “build” folder can be hosted directly on any Server.

npm run build

Create a Simple React Component

Now, we are ready to start some coding. If we look at the folder structure, root folder contains three folders - node_modules, public, and src, where src is the development folder. Inside src folder, the tool generates a JS file named index.js.

src/ndex.js is the JavaScript entry point.

The whole package comes with a sample component with the name “App”, and its associated files. So, let’s remove all other files from src folder and start adding our own code.

Add the below code in index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import MyMessageComponent from './MyMessageComponent';
ReactDOM.render( < MyMessageComponent message = {
        'Hello, Friend!'
    }
    />,
    document.getElementById('root'));

In the above code, ReactDOM.render method is used to render a component “MyMessageComponent” in a div with ID “root” and passing a property “message” with a value “Hello, Friend!”.

Now, create a file with name “MyMessageComponent.js” inside src folder, add the below code in that file, and save.

import React, {
    Component
} from 'react';
export default class MyMessageComponent extends Component {
    render() {
        return ( < h1 > {
            this.props.message
        } < /h1>)
    }
}

Here, I created a ES6 class with the name “MyMessageComponent” which extends React Component. “render” method is required to render a component. There could be other custom methods but “render” is required to mount the component in HTML page.

Inside render method, it returns an HTML element “h1” with text “this.props.message” wrapped in curly braces. “this.props.message” accepts the value which was passed as an attribute in the index.js file.

Now, we are ready with a very simple React component. After saving, all the changes should reflect in your browser.

That's it. Thanks!