Total.js + React (React.js) = Simplicity and Efficiency

How consolidate React (js) with Total.js and preserve their directory structures and minimizing integration work to a minimum. Below we present a simple skeleton on the basis of which you can create powerful applications based on React and Total.js.

“React (sometimes styled React.js or ReactJS) is an open-source JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations. According to JavaScript analytics service Libscore, React is currently being used on the websites of Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, and others. As of March 2016, React and React Native are Facebook’s top two open-source projects by number of stars on GitHub,[6] and React is the 5th most starred project of all time on GitHub.” (source wikipedia )

Assumptions and Benefits our project:

  • Design and build modular applications based on components
  • Use modern JavaScript tools like npm, Babel, Webpack and another not mentioned in this article


Below presented skeleton/project You can find on my GitHub repository:

Structure of directories is following:

  1. Expanded structure directories of total.js:

  1. Expanded structure directories of React.js:

The most important:

In case of catalogs structure:

  1. /client – React.js directory
  2. Remaining directories – Total.js

In case of configuration Total.js:

  1. You have to define React.js directory in config file.
  2. You have to block  total.js process  of compiling script – for this process will be responsible Webpack and React.js
  3. If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/
  4. Please remember about placing @{layout(”)}  in index.html

Last very important file is webpack config called as webpack.config.js responsible for create bundle from all files located in /client directory

The last operation it is installation process all necessary modules:

  1. Install the total.js in project directory or globally with option -g
    npm install -g total.js 
  2. Install the dependencies for React.js  in /client
    npm install
  3. run webpack for React. Bundled files will be copied to /public directory
  4. npm run webpack
  5. Start the server from the root directory of project
    node server
  6. Visit http://localhost:8000
  7. That’s all – Now You can create Amazing and Professional SPA applications

February 6th, 2017

  • My spouse and I absolutely love your blog and find almost all of your post’s to be just what I’m looking for. Would you offer guest writers to write content for you personally? I wouldn’t mind creating an article or elaborating on many of the subjects you write about here. Awesome web site!.

  • Hello there I am really thrilled I came across your site, I really encountered you by accident, while I was browsing on Bing for showbox app download. Anyhow I am here now and would simply love to say cheers for a tremendous post and the all around exciting website (I furthermore enjoy the theme), I don’t have time to read it completely at the minute yet I have saved it and even added your RSS feeds, so whenever I have enough time I’ll be back to read a great deal more. Make sure you do keep up the great work..

  • Good day! I just noticed this amazing site and I truly enjoy it. I also always like to discuss real estate prices from time to time. Great to be around, appreciate it!.

  • I came right here via another web address on free hd movies online and considered I might read this. I love what I see so now I am following you. Looking towards checking out the blog back again..

  • Greetings, I’m really glad I discovered your blog, I basically encountered you by error, when I was researching on Yahoo for canon printer program. Regardless I am here now and would just enjoy to say thanks a lot for a tremendous write-up and the all round exciting site (I too like the theme), I don’t have the time to browse it entirely at the moment though I have saved it and even added your RSS feed, so whenever I have plenty of time I will be back to read a lot more. Please do maintain the fantastic work..