How About Networking?Interestingly, there is a common misconception that ReactJS kind of "solves" the UI. But a serious browser based single page app (SPA), for instance, inevitably needs networking functionality (AJAX). Yet ReactJS' "networking" functionality is a very primitive fetch wrapper function. That does not compare well with jQuery's advanced AJAX options. It is okay to use ReactJS for rendering views but really, you'll be better off using jQuery for networking. And once you include jQuery into your project, why not to use also jQuery's superior DOM manipulation methods? But of course, that would be in conflict with ReactJS's sweet "virtual DOM" idea, right? When you are looking for someone to create a web app, requiring ReactJS skills without even mentioning jQuery is a bit like ordering a car without an engine. But of course, things don't need to be that black and white. There is nothing that can prevent you from loading the data with jQuery and then initializing ReactJS elements with that data. I'll show later how!
InstallationIt's always useful to get started with new frameworks by checking out some complete examples that already have a readily made project structure. For ReactJS, there are many tutorial repos available for instance Koans ReactJS github repo. But of course, you can also install a very basic example project directly from Facebook's repository. In my last blog post I introduced some (who knows?) controversial OOP hacks using car-related examples to demonstrate inheritance. Therefore, we'll remain in the car manufacturing business in this blog post as well, creating a web frontend for our car models. It's time to put some Car concepts into production and create a Car App with ReactJS! For this reason, the sample project will have name my-car-app. As a prequisite, first install ReactJS toolkit: npm install -g create-react-app But please note that if you use Ubuntu Linux and want to install NodeJS via apt-get you will encounter a problem when trying to use ReactJS-related npm tools that depend on NodeJS. When you execute: create-react-app my-car-app There are changes that you'll get an error: /usr/bin/env: node: No such file or directory No need to panic! The problem occurs only because in Ubuntu, NodeJS is named as "nodejs" while npm expects "node". There are two two ways to solve this problem. You can stick to your OS package manager's default Node installation or you can download a brand new version directly from provider's web site.
Method 1: Install Node And NPM via Package ManagerI warn: this is the hard way. But if you still prefer using the package manager you just need to create a symbolic link that fixes the problem: sudo ln -s /usr/bin/nodejs /usr/bin/node
Beware that your default NodeJS version might be deprecated. If that is the case you'll get a warning when using npm to install ReactJS related tools - and even worse: they won't work!Just download the newest NodeJS version from NodeJS web site and extract it to wherever you like. Remember to update the symlink accordingly. I have: sudo ln -s /home/heikki/tools/node-v6.9.1-linux-x64/bin/node /usr/bin/node If this doesn't fix it it's probably because you are using operating system's default npm installation which might be deprecated. Uninstall npm and create a symlink to npm installation as well: sudo ln -s /home/heikki/tools/node-v6.9.1-linux-x64/bin/npm /usr/bin/npm
Method 2: Install Node And NPM Directly From WebsiteI strongly recommend installing Node and NPM directly from the provider's website. If you use the package manager it is granted that you'll get an outdated version. Moreover, you must struggle with the above mentioned issues. Just downloaded the package and extract it to your favorite location. And remember add the binaries to your path by editing .bashrc file. I added a line as follows: export PATH="$PATH:$HOME/tools/node-v6.9.4-linux-x64/bin" If your OS does not support Bash then I recommend installing a better one!
Creating Your First ReactJS AppThen create the project directory (if you didn't do so yet) and start the development server: create-react-app my-car-app
npm start If everything went right you should have a skeleton for your first ReactJS app by now. The main application file has been generated as ./src/App.js. You can just start tweaking it to create an app you always wanted to have. When you want to publish the production version of your App make sure that you have a pushstate server installed: npm install -g pushstate-server It's particularly nice to have pushstate-server working because it helps you try out your build before publishing it. So, finally build your app: npm run build That's how it works. The result is also available here. I also created a GitHub repository for the code samples I wrote for this demo. Feel free to check it out.
Now, let's take a look at ReactJS's ideology. ReactJS is a framework really focused in manipulating DOM, introducing a concept of "Virtual DOM". You can declare your own elements and use them just as if they were any normal DOM elements.And syntax for using CustomAppHeader would look like this:
Creating Complex ComponentsNext, I'll show how to create more complex components. When you render any virtual DOM component you can embed your custom components into the output html of each component. That will, by definition, lead to more complex composite components. But before that, let's create a hard-coded dummy component to render a html list element containing some cars: Now, we are ready to add the CarList component to the main view and have our cars listed on the web page:
Needless to say, a ul/li list in html without any formatting will look so ugly that I don't even dare to add a link to the outcome of the code I described above before I add some responsive formatting. And what is the best solution to format html? Bootstrap of course! With Bootstrap you can add reasonable and responsive layouts to your App no matter whether you created it with ReactJS or anything else. Our car list formatted with Bootstrap will look like this:The example is also available here.