Tags

, , , , ,


Its been a while I blogged about my learnings. Recently, I started learning ReactJS. I like to learn any programming language by writing code, that helps to remember the syntax as well. First step is to set up an environment. Along the process, I used many frameworks for setting up an environment.

  • NodeJS – as a web server
  • Want to write code in ES6, so I used BabelJS to transpile the code to JavaScript (ES2015)
  • Webpack – bundling tool, used for building the client app
  • Webpack-dev-server: local server app that serves the client application
  • npm – package manager

There are lot of documentation on internet that explains about these framework. I am going to leave the explanation about these and will jump onto our goal i.e. how to setup a developer environment for a ReactJS application.

Folder structure: maintaining code is one of favorite topic because its always hard to fix to a single pattern. Code folder structure is one important thing every developer needs to focus. For the purpose of this article I used below code structure.

img-1

'src': source code of the application (client app)
'dist': distribution\build version of the application
'.babelrc': configuring settings for babel transpiler
'package.json': npm scripts and also the dependent frameworks\libraries
'webpack.config.js': configuratoin setting for building the application

Prerequisites:

Step 1: Create a package.json under the root folder. You can create it manually but I suggest to use npm init script. Install the following dependencies.

npm install --save 'react' 'react-dom'

This is react framework, and the virtual dom that will be used for generating the DOM

Step 2: Let’s install Babel transpiler, since we are going to write code in ES6, we need code to be transpiled to ES2015. As of now, we do not require any polyfills, but if you are working on an old browser, please make sure you install the required polyfill.

npm install --save-dev 'babel-core' 'babel-loader' 'babel-preset-es2015' 'babel-preset-react'

Step 3: Installing webpack. As we need a bundling tool, and webpack is delivering many good features for bundling a client application.

npm install --save-dev 'webpack' 'webpack-dev-server'

At this point, we are all set to start configuring our application. These are the basic dependencies.

Step 4: Create a file .babelrc under root. we only installed two presets, so lets configure them. Use below code to configure the two presets.

{ "presets": ["es2015", "react"] }

Step 5: Create a webpack.config.js file. This is the configuration file for the webpack bundler.

var path = require('path');
var webpack = require('webpack');

var config = {
 entry: {
 app: "./src/main.js"
 },
 output: {
 path: path.join(__dirname, '/dist/'),
 filename: 'bundle.js',
 publicPath : '/dist'
 },
 devServer: {
 contentBase: '/dist',
 inline: true,
 port: 8082,
 hot: true,
 historyApiFallback: true
 },
 module: {
 loaders: [{
 test: /\.jsx?$/,
 exclude: /node_modules/,
 loader: 'babel',
 presets: ['es2015', 'react']
 }]
 }
};

module.exports = config;

In this configuration file, we tell the entry point of our application, the destination of the bundled files and the loaders required to transpile a code. Also, as we want to see the application in live, webpack dev server helps us to see the application in action. The local dev server configuration is also setup.

Step 6: create the entry of our application ‘main.js’ under the ‘src’ folder. In here, we prepare the app and will write it to the DOM. Find below the code:

import React from 'react';
import {render} from 'react-dom';
import App from './app/hello.jsx';

render(<App/>, document.getElementById('app'));

Step 7: Now, lets start preparing the application. Create a folder under ‘src’ and name it ‘app’. I like to keep all my application details under a folder. To start with, under ‘app’ folder create a file named ‘hello.jsx’. You can extend the application with many containers and components under the ‘app’ folder.

img-3

Step 8: Prepare an index.html under the dist folder. In my next article, I am going to put some notes around on how to build HTML template using webpack. Until then lets work on a basic way. Here is the initial HTML code. Make sure you add the bundle.js reference in the HTML.

img-2

Step 9: At this point, out basic ReactJS app is all configured. All you need to do is run the following script and you should be able to browse the application on http://localhost:8082

npm start

Here is a snapshot of the browser:

img-6

Please provide me your comments and feedback below. Hope this helps you to kick start your ReactJS learning.

Happy Coding!!!

Advertisements