react-smartmenus-bootstrap-example

Example of using Webpack, RectJS, Bootstrap and Smartmenus.

It is not tutorial, but it is supplement for other great tutorials like modern frontend development (en, pl), JavaScript ES6 (en, pl), ReactJS (en, pl), Webpack (en, pl), Yeoman (en, pl) and Bootstrap (en, pl).

Motivations

Previously, I hated to code in javascript. There was no IDEs and debuggers. Split so large code to small files was difficult because there was no imports or includes. In addition, every browser interpreted the language in their own way (especially IE6).

Fortunately, times have changed. Now we have:

• ECMAScript 6 with many improvements of language,
• Babel and polyfills to make code with new features compatible with older browsers,
• Webpack to build large JavaScript project with styles, images and various depends (imports) to minified static assets,
• ReactJS with great manage of visual components,
• Bootstrap as most powerful HTML, CSS and JS framework that look perfect both on mobile and desktop,
• Yeoman to init new project from generator.

So, I started exploring modern web frontend ecosystem. I found nice menu module named Smartmenus. It has integration with Bootstrap but I found no example of use it in ReactJS. So let's go.

Getting started

# Download code
git clone https://github.com/dzwiedziu-nkg/react-smartmenus-bootstrap-example.git

# Go to project's directory
cd react-smartmenus-bootstrap-example

# Download depends
npm install

# Run for development
npm start

# Build dist version (static assets
npm run dist

When you start a project via npm start then you may open http://localhost:8000/ in your favourite browser. When you make a dist via npm run dist then you can copy whole dist/ to your web server and open index.html in browser. It is possible to run it locally from file system (without web server). It will be working when you replace src="/assets/app.js" to src="assets/app.js" in dist/index.html.

How it's made

Quasi-tutorial how to create this project from empty directory:

1. Init new project by Yeoman's react-webpack generator.
2. Add depends to package.json.
3. Configure Webpack from bootstrap and smartmenus-bootstrap modules.
4. Adopt HTML from original demo to react's renderer.

It is not complete tutorial. If you want understand follows please read tutorials which was placed at the top of this page.

Init new project

Creating new project via Yeoman is very simple:

# If you have not already done, install yeoman and react-webpack generator globally
npm install -g yo generator-react-webpack

# Create a new directory, and `cd` into it:
mkdir react-smartmenus-bootstrap-example && cd react-smartmenus-bootstrap-example

# Run the generator
yo react-webpack

You can open project in your favourite IDE i.e. Webstorm. If you want to run, type it in command line:

npm start

When you modify code, webpack recompile code in background.

If you use http://localhost:8000/webpack-dev-server/ instead of http://localhost:8000/ you will get additional debug messages in your browser. After code modification, some content will be updated in browser without reload of web.

Add depend modules and configure

When module are published as npm package then adding it to project is trivial:

# Install npm moduels and add there to project demendency list
npm install --save jquery bootstrap smartmenus smartmenus-bootstrap

Unfortunately, some modules need a special configuration in Webpack config.

The bootstrap module require jquery module but can't load it. Moreover, jquery module must be load to jQuery variable. So, you need to add to Webpack configuration:

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery'
  })
]

In order to see how to add, please look up the history of commits.

The smartmenus-bootstrap module have bug in import smartmenus module. This bug was reported. It want's to import jquery.smartmenus module but smartmenus is provided. In order to workaround this bug it's important to make alias of module name. It can be done in Webpack config:

resolve: {
  extensions: ['', '.js', '.jsx'],
  alias: {
    [...]
      'jquery.smartmenus': 'smartmenus'
    }
  },

Now, these modules can be imported by require or import instructions in JavaScript code and @import instructions in CSS. Please see App.css and Main.js. History of commits is interesting too.

Adopt HTML from original demo to react's renderer

ReactJS can use JSX. It is extensions of JavaScript and it is very helpful for using HTML constructions in JavaScript code.

I adopt whole HTML code from this example. So I copied all HTML code from body tag to return of render() methods and made some modifications:

1. Replace all class HTML tag's attributes to className.
2. Remove all HTML comments because JSX not supports <!-- and -->
3. Compilation of JSX cause remove of whitespaces. Usually it is not problem because browsers ignore whitespaces anyways unless you use pre HTML tag. But you can put raw HTML to dangerouslySetInnerHTML={{__html: `...raw HTML...`}}.

Summary

Nowadays, development of JavaScript applications are easy and fun.

TODOs

Further improvements:

• split Main.js to small components,
• adopt others examples (such Static top, Fixed top etc.) and implement switching via rect-router

Welcome to fork and pull request extensions of this example.