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 ConfigurationNext, 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!
Migrating To Bootstrap And ES6
Understanding Events and ViewsNext 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.
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!