Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Trying React the First Time

DZone's Guide to

Trying React the First Time

Developers love learning new tools and technologies. Follow along as this veteran web developer attempts to tackle a React.js application for the first time.

· Web Dev Zone ·
Free Resource

Learn how Crafter’s Git-based content management system is reinventing modern digital experiences. Download this white paper now. 

The last two years, I have worked a lot with Angular. I learned a lot and I also wrote some blog posts about it. While I worked with Angular, I always had React in mind and wanted to learn about that. But I never head the time or a real reason to look at it. I still have no reason to try it, but a little bit of time. So why not? 

This post is just a small overview of what I learned during the setup and in the very first attempts at using React.

The Goal

It is not only about developing using React, later I will also look at how React works with ASP.NET and ASP.NET Core and how it behaves in Visual Studio. I also want to try the different benefits (compared to Angular) I've heard and read about React:

  • It is not a huge framework like Angular, but just a library.
  • Because it's a library, it should be easy to extend existing web apps.
  • You should be freer to use different libraries since there is not all the stuff built-in.

Setup

My first idea was to follow the tutorials on https://reactjs.org/. Using this tutorial, some other tools came along and some hidden configuration happened. The worst thing from my perspective is that I need to use a package manager to install another package manager to load the packages. Yarn was installed using npm and was used. Webpack was installed and used in some way, but there was no configuration, no hint about it. This tutorial uses the create-react-app starter kit. This thing hides a lot of stuff.

Project Setup

What I liked about working with Angular is that there's a really transparent way of using it and working with it. Because of this, I searched for a pretty simple tutorial to setup React in a simple, clean, and lightweight way. I found this great tutorial by Robin Wieruch.

This setup uses npm to get the packages. It uses webpack to bundle the necessary JavaScript and Babel is integrated into Webpack to transpile the JavaScript from ES6 to a more browser compatible JavaScript.

I also use the webpack-dev-server to run the React app during development. Also, react-hot-loader is used to speed up the development time a little bit. The main difference from Angular development is the usage of ES6-based JavaScript and Babel instead of using TypeScript. It should also work with TypeScript, but it doesn't really seem to matter, because they are pretty similar. I'll try using ES6 to see how it works. The only thing I will possibly miss is the type checking.

As you can see, there is not really a difference from TypeScript yet, only the JSX thing takes getting used to:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

const app = document.getElementById('app');

ReactDOM.render(<Layout/>, app);

module.hot.accept();

I can also use classes in JavaScript:

// Layout.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';

export default class Layout extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <Footer/>
            </div>
        );
    }
}

With this setup, I believe I can easily continue to play around with React.

Visual Studio Code

To support ES6, React, and JSX in VSCode, I installed some extensions for it:

  • Babel JavaScript by Michael McDermott
    • Syntax-highlighting for modern JavaScript
  • ESLint by Dirk Baeumer
    • To lint modern JavaScript
  • JavaScript (ES6) code snippets by Charalampos Karypidis
  • React.js code snippets by Charalampos Karypidis

Webpack

Webpack is configured to build a bundle.js to the ./dist folder. This folder is also the root folder for the webpack dev server. So it will serve all the files from within this folder.

To start building and running the app, there is a start script added to the packages.config

"start": "Webpack-dev-server --progress --colors --config ./Webpack.config.js", 

With this, I can easily call npm start from a console or from the terminal inside VSCode. The webpack dev server will rebuild the code and reload the app in the browser if a code file changes.

const webpack = require('webpack');

module.exports = {
    entry: [
        'react-hot-loader/patch',
        './src/index.js'
    ],
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
        }]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      hot: true
    }
};

React Developer Tools

For Chrome and Firefox, there are add-ins available to inspect and debug React apps in the browser. For Chrome, I installed the React Developer Tools, which is really useful for seeing the component hierarchy:

Hosting the App

The react app is hosted in a index.html file, which is stored inside the ./dist folder. It references bundle.js. The React process starts in the index.jsfile. React putts the app inside a div with the ID app (as you can see in the first code snippet in this post.)

<!DOCTYPE html>
<html>
  <head>
      <title>The Minimal React Webpack Babel Setup</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="bundle.js"></script>
  </body>
</html>

The index.js file imports the Layout.js file. Here a basic layout is defined, by adding a header and a footer component, which are also imported from other components.

// Header.js
import React from 'react';
import ReactDOM from 'react-dom';

export default class Header extends React.Component {
    constructor(props) {
        super(props);
        this.title = 'Header';
    }
    render() {
        return (
            <header>
                <h1>{this.title}</h1>
            </header>
        );
    }
}
// Footer.js
import React from 'react';
import ReactDOM from 'react-dom';

export default class Footer extends React.Component {
    constructor(props) {
        super(props);
        this.title = 'Footer';
    }
    render() {
        return (
            <footer>
                <h1>{this.title}</h1>
            </footer>
        );
    }
}

The resulting HTML looks like this:

<!DOCTYPE html>
<html>
  <head>
    <title>The Minimal React Webpack Babel Setup</title>
  </head>
  <body>
    <div id="app">
      <div>
        <header>
          <h1>Header</h1>
        </header>
        <footer>
          <h1>Footer</h1>
        </footer>
      </div>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

Conclusion

My current impression is that React is much faster on startup than Angular. This is just a kind of a Hello World app, but even for such an app, Angular needs some time to start a few lines of code. Maybe that changes if the app gets bigger. But I'm sure React continues to be fast, because of less overhead in the framework.

The setup was easy and worked on the first try. The experience in Angular helped a lot here. I already know the tools. Anyway, Robin's tutorial is pretty clear, simple and easy to read.

To get started with React, there's also a nice video series on YouTube, which tells you about the basics and how to get started creating components and adding the dynamic stuff to the components.

Crafter CMS is a modern Git-based platform for building innovative websites and content-rich digital experiences. Download this white paper now.

Topics:
web dev ,react.js ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}