Minimal ReactJS

The Least Painful Way to Start Coding With ReactJS

Posted by Heikki Kupiainen/Oppikone on 06.01.2017 07:18:26

I wrote earlier a brief introduction to ReactJS explaining in some detail how to install some useful development tools on workstation. I also demonstrated some code examples about writing ReactJS components with ES6.

I think, however, that it's more useful for many developers to enter ReactJS using a bit different approach. It should be possible for them to get something up and running with minimal effort. If you can't make it really easy, they'll skip it all together and move on. Luckily, there is still a way to get ReactJS up and running without installing all that shady foreign software they require you to use (joke). For starters, there is a grave trade-off writing ES6 code - many browsers don't support it yet and many developers aren't yet too comfortable with it. That means that an ES5 approach is more lightweight for early adopters. Secondly, given that you are already some sort of a web developer, you can actually jump into ReactJS development right away without installing any additional ReactJS related tools.

Minimal ReactJS Configuration

Next, I'll show a minimal ReactJS configuration which is very easy to start with. It will be then quite intuitive to expand that example and start building some more serious features on top of it.

Let's write the index html wrapper:

The very basic ReactJS libraries needed for development are react.js and react-dom.js that I included in the head section. Then I include my actual ReactJS app that I have named "hello-oppikone". Note that the include tag for my app is at the very bottom of the page. It is necessary because my app can't find the root node if it's initialized before the root node is rendered.

The code for a minimal ReactJS app comes here:

The app defines first a ReactJS class for rendering a header tag with text. Then it instantiates an element for that class and attaches it to the root node. It's hard to figure out a ReactJS app simpler than that!

Adding JSX Support

Needless to say, generating DOM structure directly from JavaScript code by using React's createElement method is just too difficult for serious design. Therefore using JSX templates is a must. JSX templates can be embedded directly into JavaScript code. JSX transformation is done with Babel JavaScript library. Add this tag inside your html page's head section:

Now you can modify your actual ReactJS application file and simplify its syntax by converting cumbersome createElement-invocations into true HTML (or at least very similar XML):

That's it, pretty much! Now you have configured ReactJS in the most straightforward way, without installing anything alien on your PC! This is a good point to start diving deeper into ReactJS. Now let's take next necessary steps.

Migrating To Bootstrap And ES6

Now that we have verified that it is indeed possible to write ReactJS code using standard JavaScript it is time to start using ES6. ES6 is the recommended programming language for ReactJS. I showed already in my earlier post that it is quite straightforward to apply Bootstrap styles to a ReactJS app. Now the good news is that despite ES6 we can still use ReactJS on a web page just like any other JavaScript library. It works fine at least for development purpose. It is particularly encouraging if you don't want to install lots of software on your PC just to add one little JavaScript library to your web page. And one more benefit is that you can use whatever web server to test your code. Most experienced web developers have already some favorite web server for their local tests and they should have an option to keep their preferences.

Here is the code snippet for a Bootstrap-enhanced ES6-based ReactJS code example that I wrote:

And let's add Bootstrap styles to the head element:

The result is going to look like this:

The example is also available here.

Understanding Events and Views

Next I am going to explain a simple data flow/component interaction technique for ReactJS. Please note that I am not taking the officially recommended Redux/Flux approach yet. The official way including dispatchers and stores and containers and actions et cetera may not be as intuitive to understand and straightforward to implement as the callback-based technique that I will introduce next. For now, our demo app is yet quite simple and therefore a callback-based data interaction is the fastest way to go. Yet when the application grows in complexity its downsides become more evident. I will cover this issue later on in detail. But we must implement first the easy way to understand its strengths and caveats!

For starters, let's add more functionality to the app. I'll demonstrate next how to add a Bootstrap-enhanced login view to a React app. Then I'll show how to make components communicate with each other. It is important because we want to enable the login view to inform the main app when the login process was complete so the main app can let the user enter the main application. Let's create first the login view:

Login component's render function returns a very classical html login form flavored with Bootstrap styles. However, note that unlike in HTML, input tags must be closed. Additionally, instead of class you must add className attributes and instead of for you must have htmlFor. I have also bound submit button's click event to handleSubmit function that I define in Login class. handleSubmit calls further a callback function onClick. Looking at Login class's code it's not clear where this onClick comes from but I can reveal already at this point that it is the callback function that we are going to implement in the parent class and then inject it into Login class upon instantiation. handleSubmit must prevent the event bubbling naturally through or it will cause unpredictable implications, therefore event.preventDefault() and return false at the end of the function.

For simplicity, I am cheating a little here: Login class is not validating username and password yet. But most importantly, this demo demonstrates how to switch between views and transport messages through component hierarchy!

Now, let's modify the main class App a little:

Inside App class's constructor, I added "loggedIn" state that's initially false - because the user isn't logged in initially. I also bound handleLoginComplete method to this class so the method will have this class as context thus being able to access its properties. The actual implementation of handleLoginComplete is super simple at this time. It changes the "loggedIn" state to true.

The render method contains a state check. Depending on whether the user is logged in or not, the app is rendered either with CarFilterList or Login view. Note that I instantiate these components programmatically. I must do so because I don't want to implement two return statements differing from each other only in one component. If the user is logged in then the component is instantiated as a CarFilterList and if not, then we'll implement it as a Login component. I want the Login form to invoke App's handleLoginComplete on submit button click, therefore I pass handleLoginComplete as onClick to Login component.

The result of this exercise is now online! Please click the submit button on Login form to see that our code also works:

The example is also available here.

What's Next?

Next time, I am going to show how to incorporate the all powerful jQuery library with ReactJS to benefit from its superb networking features and DOM manipulation methods that help you embed some awesome reporting and even more in your ReactJS app. Read more here!