Learning React - Hello World

Care to learn some React, build your own application and become from zero to hero in just some few steps? Well, you are in the right place, this blog post is all about learning how to setup your environment and get you up and running with React. In just 7 easy steps you will be able to run your hello world app, no sweat.

Why I decided to blog about React

Reactjs... A trend in front-end development lately, and surely one, if not the most, popular framework among other competitors like Angular, Ember, Vue, etc. Personally, I think it deserves the love that it gets from the community, this library is the synonym of elegance. Code with Reactjs is super simple, easy to learn and work with.

I was working with AngularJS, then Angular, for long time and I really liked that framework, but recently I thought about giving React a chance, just for laughs. I was amazed by the library! It is so easy to get a new application up and running with React, just configure your Webpack, render your component and you are set in simplified terms (of course for more complex applications you might need various other things, like redux state container). Also, the JSX syntax is awesome, I really loved the way that React forces you to think in components as small units of code, containing all your business as well as your UI syntax. I find it clean and very straightforward.

Few words on React for absolute beginners

React is a user interface library used to develop single-page applications but also mobile applications with a native look 'n feel. This library is developed by Facebook and become open source in 2013.

This library promotes component-based architecture for your application, with components separating concerns, containing business logic and markup (JSX). Be advised that JSX is optional, but it is preferred by most developers as it makes life easier as a visual. Also, each component can maintain its own state. This state can be rendered with the component's view. When the state is updated, related state that is rendered in the view is updated as well.

Being itself a UI library, it is limited only in UI operations, making it extremely lightweight compared to other competitors, like Angular (though Angular is a fully-fledged framework compared to React which is just a library that solves a subset of the problems that Angular solves). For various other work, like routing or state management, you might need to include some other libraries, but again, React nature is simplicity and elegance, so having to work with other libraries, like Redux, is a breeze.

Hello world application

Code outlined in this article can be found on GitHub.

Let's get moving, shall we? Setup a new empty working directory and open Visual Studio Code. With Code open, use the Terminal to setup the project.

Step 1

Setup package.json, by running the following npm command.

npm init -y

Step 2

Now it is time to install the libraries required to build the application.
When building React applications, you need the react and react-dom libraries. I'm installing Bootstrap just for making UI prettier.

npm i react react-dom bootstrap --save

Next up, I want my devDependencies installed. I am installing mostly webpack and related plugins/loaders to load CSS and ES6 code. I also need the babel-preset-react package to add support for JSX features. Lastly, I am including the react-hot-loader loader to enable the hot module replacement feature of webpack.

npm i webpack-cli webpack webpack-dev-server html-webpack-plugin css-loader style-loader babel-loader babel-preset-react react-hot-loader --save-dev

Last thing is to update the package.json to include webpack-dev-server in start script, so just update the "scripts" section with the following.

Step 3

Create.babelrc now, to define the ES6 react preset.

Step 4

Create a new index.html file. This is standard HTML5. The <div id="app"> element is going to be the root element for the application, I am going to fetch it later and use it in the render method.
All application code is bundled in the bundle.js file with the kind help of webpack. More on this coming next.

Step 5

Now it is time to write your first React code! Create a new folder in root, named src and add a main.js file there. I am going to dissect the following, but first take a look on the code.

In line 1, I import the bootstrap CSS file, nothing important, webpack takes care of loading CSS.
In line 2-3, I import the core React libraries, which are the react and react-dom.
Lines 7-14 are important! ReactDom exposes a render method. This method takes a JSX template and a container in which it will render the view defined in first parameter. As you might noticed, JSX is not HTML, it is rather a syntax extension to JavaScript, for example class attribute is not permitted in JSX, the equivalent in this syntax is className. I render the message string in the h2 element and notice the interpolated variable goes in between single brackets ({}). Second parameter is a single HTML Node, the div element with the app Id, which was defined in index.html. That's going to contain all contents defined in first parameter of render. Be also advised that JSX should contain only one root element, else compiler throws an error.
Finally, line 16 sets up the hot module replacement plugin.

Step 6

That's the last step that involves coding. In this step, I am going to setup my webpack configuration to bundle the code and be able to make it serve in the browser.

Let's quickly dissect this.
The entry section defines the hot module replacement patch, so this is pretty standard to include. Make sure it is included first. Then, I include the main.js file that is found under src directory. This is the entry point of my application.
The output section defines the steps to create a bundle, with path defining the path where to copy the bundle(s). In this case the path is a directory named dist in root folder. It does not exist yet, but it is going to be created by webpack. Filename is bundle.js, the same as the one defined in index.html.
Module section contains the rules subsection, which defines which loaders should be used and where. I use the style-loader and css-loader for .css files and for js or jsx files, I use the babel-loader to support ES6 features.
In plugins, I have listed two, one is the html-webpack-plugin, which loads the index.html file with the bundle. The hot module replacement plugin is then defined in order to enable the same.
Mode should be defined in Webpack 4, by default it is set to "production", I've just set this to development.
Finally, I define the options for webpack-dev-server, to enable HMR, plus other stuff like port.

Step 7

Everything seems to be set, what is left is to run the application. On terminal type the following

npm start

Application should be served by port 8082 now, open your browser to verify.

Summary

In this post you've learned some pretty basic things about React.
You've learned how to setup your working environment, setup webpack & HMR and develop a hello world application in React in just 7 simple steps.

If you liked this blog post and found it useful, please like, share & subscribe for more! Also, if not yet a follower, follow me on Twitter!

This post is part of the Learning React series