index<--

JavaScript Frameworks

Page bookmarks:

• react js
  • create react app
  • react native
  • vulcan framework
• vue
• svelte
• angular
• embers

Introduction to React

• React: Home page
• React: GitHub project

How to learn

React can be learned on-line for free from its homepage. There is available documentation and one tutorial. Before you learn React you need to know HTML+CSS and JavaScript. There is no point of starting if you do not know these things:

• Learn (Mozilla): HTML5
• Learn (Mozilla): JavaScript

Using React

React can be added to a HTML page like any other JavaScript library using <script> tag. Then you can use its features gradually to enhance your page with dynamic components. To create these dynamic components you must create your own JavaScript files and add them to your web page after you load React libraries.

 <!-- ... other HTML ... -->
 <!-- Load React. -->
 <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <!-- Load our React component. -->
 <script src="my_component.js"></script>
</body>

Note: You must load React components at the bottom of your HTML page to improve page load time. You could have load them in the header but that will slow down your web-page so don't do it.

How it works?

To display react components you must include them in your page using an empty <div> tag. This tag must have an "id" attribute. This is how React will be able to find the location where it will display the component. In the next example we include a placeholder for a React component:

<!-- ... HTML content ... -->
<div id="component_name"></div>
<!-- ... rest of HTML ... -->

How a component look like

A component is created using JavaScript. You can use a component template to start. Here is an example that we have copy from React documentation. I have not tested this component so I do not know if is going to work:

File: my_component.js

'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
    constructor(props) {
         super(props);
         this.state = { liked: false };
    }
    render() {
         if (this.state.liked) {
         return 'You liked this.';
    }
    return e(
         'button',
         { onClick: () => this.setState({ liked: true }) },
         'Like'
    );
    }
}
const domContainer = document.querySelector('#component_name');
ReactDOM.render(e(LikeButton), domContainer);

What is JSX

You can build apps using React in two ways:

• using standard React objects and methods
• using a new technology called JSX

Now JSX is something new and intriguing. It stands for JavaScript XML. It is a new language that consist of JavScript mingled with XML or XHTML. JSX makes it easier to write and add HTML in React. JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.

So does your browser understand JSX? No it does not. But to use JSX you need a pre-processor that will translate JSX files into row JavaScript. In other words, if JavaScript files contains JSX, that file will have to be transpiled into regular JavaScript.

React include a transpiler called Babel. It converts JSX files into vanilla JavaScript. React also uses ES6 that is not supported by all browsers. Babel converts ES6 to code that is compatible with older browsers that do not support ES6.

Standard approach:

(function() {
    var element = React.DOM.div({}, "Hello World");
    ReactDOM.render(element, document.getElementById("app"));
})();

Using JSX:

(function() {
    var HelloWorld = React.createClass({
        render : function() {
        return (
            <div> Hello World </div>
        );
        }
    });
    var element = React.createElement(HelloWorld, {});
    ReactDOM.render(element, document.getElementById("app"));
})();

Using Babel

You can use Babel in two ways. At client side or at server side. During development or for making examples you can include Babel client in your web page but you can also use Babel on server side. You can use Babel to pre-compile you application using command line interface  CLI or even better, use a build tool like Webpack to run Babel each time your code changes.

Learn more about: Babel

Can I use react with Bootstrap?

Sorry, React and Bootstrap are not designed to be used together. Bootstrap is using JQuery to manipulate DOM elements directly while React has its own libraries to manipulate DOM. However there is one Bootstrap implementation that is specific for React. This library is called reactstrap and is open source.

Example:

import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
    return (
        <Button color="danger">Danger!</Button>
    );
};

Note: The example above is using JSX. It will create a button that does absolutely nothing. What is interesting is that this button do not exist until JavaScript is making it. In a static web-page we must create de button using HTML.

Create React App

• Create React App: Home Page
• Create React App: GitHub Project

This project uses: WebPack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. You can use this to create your startup project in minutes and develop on top of it your application. After you run and install it you will get a structure of folder with files that look like this:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── serviceWorker.js
 └── setupTests.js

Note: This is not the only technology you can use to start a React application. You can use other technology more advanced

Related References

• Neutrino
• NWB
• Rails Web-packer
• Symphony
• Gatsby
• Next.js

React Native

You can learn more from: React Native Homepage

Vulcan framework

• homepage: vulcanjs.org
• documentation: docs.vulcanjs.org

Introduction to Vue.js

Vue.js implements model-view-view-model architecture: MVVM. This facilitate the separation of development for graphical user interface (view) from the development of business logic (the model). The ViewModel is an intermediary component that convert data elements from model to visual components to be display in view. You can read more about this architecture here: Wikipedia MVVM

Components Vue components are custom HTML element that encapsulate code. The code represents behavior that makes the HTML element dynamic. That is it can change it's display properties and content. The HTML element is identified by Vue using an attribute: id="name". This is similar to React.

Templates Vue uses HTML template syntax. Templates can use JSX syntax. This enable applications to be created using CBD (Component Based Development) methodology. Using reusable components with templates you can improve your productivity to create complex apps.

Reactivity Vue is a reactive system. That means each component keeps track of its dependencies. So the system knows when to re-render a component. This is the secret of a reactive webpage. It refresh itself without the need for you to press the refresh button. This feature is also one of the goals of modern web applications.

Transition Vue enable animation effects to be used for components. That means when a new component is created or removed, it is not displayd immediately but it can have an effect, for example: fading, sliding. These operations can use CSS or custom JavaScript libraries such as velocity.js

Routing Vue provides an interface to change what is displayed on the page based on the current URL path. That means you can make applications that enable creation of bookmarks. This is cool because a SPA (Single Page Application) usually have a single page. And the URL do not change when you do something in that page. Vue doesn't come with front-end routing. But the open source "vue-router" package provides an API to update application's URL.

References

You have not learned Vue just yet. So far you know what Vue is and what it can do. Next you must visit project homepage, follow the Vue free video lectures and red Vue documentation. Then you can join Vue discord group and start your first project. Do not be afraid to ask questions on Discord about Vue. This community is very responsive.

Project:

• Vue HomePage
• Vue GitHub

Tools

• Devtools: Browser devtools extension for debugging Vue.js applications
• Vue CLI: Standard Tooling for rapid Vue.js development
• Vue Loader: Webpack loader that allows Vue Single-File Components (SFCs)

Libraries

• Vue Router: The official router for Vue.js
• Vuex: Centralized State Management for Vue.js
• Vue Server Renderer: Server-Side rendering for Vue.js

Introduction to Svelte

• youtube: Rich Harris
• homepage: svelte.dev

Introduction to Angular

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

• Angular Project
• Angular Framework

Introduction to Ember

• Homepage: emberjs.com
• Video by: Shwan Chen

They say ember is used by many well known companies. This list is impressive. Probably if you want to apply for one of these companies you should study a little bit more about Ember.

• Netflix
• Microsoft
• Linkedin
• Apple
• Heroku
• Square

Examples

For examples, watch my Twitch streaming channel. One of next sessions I will use JavaScript frameworks so you can learn from my videos. Until then, have fun reading other tutorials that I have posted and check-out my examples on codepen.io website.

Read next: Server Side JS