A Quick Roundup of Recent React Chatter

Like many, many others, I’m in the pool of leveling up my JavaScript skills and learning how to put React to use. That’s why Brad Frost resonated with me when he posted My Struggle to Learn React.”

As Brad does, he clearly outlines his struggles point-by-point:

I have invested enough time learning it
React and ES6 travel together
Syntax and conventions
Getting lost in this-land
I haven’t found sample projects or tutorials that match how i tend to work


The post A Quick Roundup of Recent React Chatter appeared first on CSS-Tricks.

Link: https://css-tricks.com/a-quick-roundup-of-recent-react-chatter/

React, Angular, and Vue: Which One Is Best and Why

BOUNTY: Angular vs. React vs. Vue: Web Development
In today’s development world, technologies are growing very fast and change rapidly, with many development tools appearing to solve different development problems. In this discussion, we will compare three of the most popular technologies for front-end development – Angular, React, and Vue. We are discussing this comparison on the basis of project architecture or from a developer’s point of view who is going to choose a technology for a new project. So we first need to make a clear decision of whether we want to develop a Single Page Application (SPA) or a standard, multi-page app.

Link: https://dzone.com/articles/angular-framework-advantages-compare-to-react-amp?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Digging Into React Context

You may have wondered lately what all the buzz is about Context and what it might mean for you and your React sites. Before Context, when the management of state gets complicated beyond the functionality of setState, you likely had to make use of a third party library. Thanks to recent updates by the awesome React team, we now have Context which might help with some state management issues.

What Does Context Solve?
How do you move the state …
The post Digging Into React Context appeared first on CSS-Tricks.

Link: https://css-tricks.com/digging-into-react-context/

Build a To-do List with Hyperapp, the 1KB JS Micro-framework

In this tutorial, we’ll be using Hyperapp to build a to-do list app. If you want to learn functional programming principles, but not get bogged down in details, read on.
Hyperapp is hot right now. It recently surpassed 11,000 stars on GitHub and made the 5th place in the Front-end Framework section of the 2017 JavaScript Rising Stars. It was also featured on SitePoint recently, when it hit version 1.0.
The reason for Hyperapp’s popularity can be attributed to its pragmatism and ultralight size (1.4 kB), while at the same time achieving results similar to React and Redux out of the box.
So, What Is HyperApp?
Hyperapp allows you to build dynamic, single-page web apps by taking advantage of a virtual DOM to update the elements on a web page quickly and efficiently in a similar way to React. It also uses a single object that’s responsible for keeping track of the application’s state, just like Redux. This makes it easier to manage the state of the app and make sure that different elements don’t get out of sync with each other. The main influence behind Hyperapp was the Elm architecture.
At its core, Hyperapp has three main parts:

State. This is a single object tree that stores all of the information about the application.
Actions. These are methods that are used to change and update the values in the state object.
View. This is a function that returns virtual node objects that compile to HTML code. It can use JSX or a similar templating language and has access to the state and actions objects.

These three parts interact with each other to produce a dynamic application. Actions are triggered by events on the page. The action then updates the state, which then triggers an update to the view. These changes are made to the Virtual DOM, which Hyperapp uses to update the actual DOM on the web page.
Getting Started
To get started as quickly as possible, we’re going to use CodePen to develop our app. You need to make sure that the JavaScript preprocessor is set to Babel and the Hyperapp package is loaded as an external resource using the following link:
https://unpkg.com/hyperapp

To use Hyperapp, we need to import the app function as well as the h method, which Hyperapp uses to create VDOM nodes. Add the following code to the JavaScript pane in CodePen:
const { h, app } = hyperapp;

We’ll be using JSX for the view code. To make sure Hyperapp knows this, we need to add the following comment to the code:
/** @jsx h */

The app() method is used to initialize the application:
const main = app(state, actions, view, document.body);

This takes the state and actions objects as its first two parameters, the view() function as its third parameter, and the last parameter is the HTML element where the application is to be inserted into your markup. By convention, this is usually the tag, represented by document.body.
To make it easy to get started, I’ve created a boilerplate Hyperapp code template on CodePen that contains all the elements mentioned above. It can be forked by clicking on this link.
Hello Hyperapp!
Let’s have a play around with Hyperapp and see how it all works. The view() function accepts the state and actions objects as arguments and returns a Virtual DOM object. We’re going to use JSX, which means we can write code that looks a lot more like HTML. Here’s an example that will return a heading:
const view = (state, actions) => (
<h1>Hello Hyperapp!</h1>
);

This will actually return the following VDOM object:
{
name: “h1",
props: {},
children: "Hello Hyperapp!"
}

The view() function is called every time the state object changes. Hyperapp will then build a new Virtual DOM tree based on any changes that have occurred. Hyperapp will then take care of updating the actual web page in the most efficient way by comparing the differences in the new Virtual DOM with the old one stored in memory.
Components
Components are pure functions that return virtual nodes. They can be used to create reusable blocks of code that can then be inserted into the view. They can accept parameters in the usual way that any function can, but they don’t have access to the state and actions objects in the same way that the view does.
In the example below, we create a component called Hello() that accepts an object as a parameter. We extract the name value from this object using destructuring, before returning a heading containing this value:
const Hello = ({name}) => <h1>Hello {name}</h1>;

We can now refer to this component in the view as if it were an HTML element entitled <Hello />. We can pass data to this element in the same way that we can pass props to a React component:
const view = (state, actions) => (
<Hello name="Hyperapp" />
);

Note that, as we’re using JSX, component names must start with capital letters or contain a period.
State
The state is a plain old JavaScript object that contains information about the application. It’s the “single source of truth” for the application and can only be changed using actions.
Let’s create the state object for our application and set a property called name:
const state = {
name: "Hyperapp"
};

The view function now has access to this property. Update the code to the following:
const view = (state, actions) => (
<Hello name={state.name} />
);

Since the view can access the state object, we can use its name property as an attribute of the <Hello /> component.
The post Build a To-do List with Hyperapp, the 1KB JS Micro-framework appeared first on SitePoint.

Link: https://www.sitepoint.com/hyperapp-todo-list/

Build a JavaScript Single Page App Without a Framework

Front-end frameworks are great. They abstract away much of the complexity of building a single-page application (SPA) and help you organize your code in an intelligible manner as your project grows.
However, there’s a flip side: these frameworks come with a degree overhead and can introduce complexity of their own.
That’s why, in this tutorial, we’re going to learn how to build an SPA from scratch, without using a client-side JavaScript framework. This will help you evaluate what these frameworks actually do for you and at what point it makes sense to use one. It will also give you an understanding of the pieces that make up a typical SPA and how they’re wired together.
Let’s get started …
Prerequisites
For this tutorial, you’ll need a fundamental knowledge of modern JavaScript and jQuery. Some experience using Handlebars, Express and Axios will come handy, though it’s not strictly necessary. You’ll also need to have the following setup in your environment:

Node.js
Git or Git Bash for Window users.

You can find the completed project on our GitHub repository.
Building the Project
We’re going to build a simple currency application that will provide the following features:

display the latest currency rates
convert from one currency to another
display past currency rates based on a specified date.

We’ll make use of the following free online REST APIs to implement these features:

fixer.io API
Free Currency Converter API.

Fixer is a well-built API that provides a foreign exchange and currency conversion JSON API. Unfortunately, it’s a commercial service and the free plan doesn’t allow currency conversion. So we’ll also need to use the Free Currency Converter API. The conversion API has a few limitations, which luckily won’t affect the functionality of our application. It can be accessed directly without requiring an API key. However, Fixer requires an API key to perform any request. Simply sign up on their website to get an access key for the free plan.
Ideally, we should be able to build the entire single-page application on the client side. However, since we’ll be dealing with sensitive information (our API key) it won’t be possible to store this in our client code. Doing so will leave our app vulnerable and open to any junior hacker to bypass the app and access data directly from our API endpoints. To protect such sensitive information, we need to put it in server code. So, we’ll set up an Express server to act as a proxy between the client code and the cloud services. By using a proxy, we can safely access this key, since server code is never exposed to the browser. Below is a diagram illustrating how our completed project will work.

Take note of the npm packages that will be used by each environment — i.e. browser (client) and server. Now that you know what we’ll be building, head over to the next section to start creating the project.
Project Directories and Dependencies
Head over to your workspace directory and create the folder single-page-application. Open the folder in VSCode or your favorite editor and create the following files and folders using the terminal:
touch .env .gitignore README.md server.js
mkdir public lib
mkdir public/js
touch public/index.html
touch public/js/app.js

Open .gitignore and add these lines:
node_modules
.env

Open README.md and add these lines:
# Single Page Application

This is a project demo that uses Vanilla JS to build a Single Page Application.

Next, create the package.json file by executing the following command inside the terminal:
npm init -y

You should get the following content generated for you:
{
“name": "single-page-application",
"version": "1.0.0",
"description": "This is a project demo that uses Vanilla JS to build a Single Page Application.",
"main": "server.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}

See how convenient the npm command is? The content has been generated based on the project structure. Let’s now install the core dependencies needed by our project. Execute the following command in your terminal:
npm install jquery semantic-ui-css handlebars vanilla-router express dotenv axios

After the packages have finished installing, head over to the next section to start building the base of the application.
Application Base
Before we start writing our front-end code, we need to implement a server–client base to work from. That means a basic HTML view being served from an Express server. For performance and reliability reasons, we’ll inject front-end dependencies straight from the node_modules folder. We’ll have to set up our Express server in a special way to make this work. Open server.js and add the following:
require(‘dotenv’).config(); // read .env files
const express = require(‘express’);

const app = express();
const port = process.env.PORT || 3000;

// Set public folder as root
app.use(express.static(‘public’));

// Allow front-end access to node_modules folder
app.use(‘/scripts’, express.static(`${__dirname}/node_modules/`));

// Listen for HTTP requests on port 3000
app.listen(port, () => {
console.log(‘listening on %d’, port);
});

This gives us a basic Express server. I’ve commented the code, so hopefully this gives you a fairly good idea of what’s going on. Next, open public/index.html and enter:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="scripts/semantic-ui-css/semantic.min.css">
<title>SPA Demo</title>
</head>
<body>
<div class="ui container">
<!– Navigation Menu –>
<div class="ui four item inverted orange menu">
<div class="header item">
<i class="money bill alternate outline icon"></i>
Single Page App
</div>
<a class="item" href="/">
Currency Rates
</a>
<a class="item" href="/exchange">
Exchange Rates
</a>
<a class="item" href="/historical">
Historical Rates
</a>
</div>

<!– Application Root –>
<div id="app"></div>
</div>

<!– JS Library Dependencies –>
<script src="scripts/jquery/dist/jquery.min.js"></script>
<script src="scripts/semantic-ui-css/semantic.min.js"></script>
<script src="scripts/axios/dist/axios.min.js"></script>
<script src="scripts/handlebars/dist/handlebars.min.js"></script>
<script src="scripts/vanilla-router/dist/vanilla-router.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

We’re using Semantic UI for styling. Please refer to the Semantic UI Menu documentation to understand the code used for our navigation bar. Go to your terminal and start the server:
npm start

Open localhost:3000 in your browser. You should have a blank page with only the navigation bar showing:

Let’s now write some view templates for our app.
Front-end Skeleton Templates
We’ll use Handlebars to write our templates. JavaScript will be used to render the templates based on the current URL. The first template we’ll create will be for displaying error messages such as 404 or server errors. Place this code in public/index.html right after the the navigation section:
<!– Error Template –>
<script id="error-template" type="text/x-handlebars-template">
<div class="ui inverted segment" style="height:250px;">
<br>
<h2 class="ui center aligned icon header">
<i class="exclamation triangle icon"></i>
<div class="content">
Build a JavaScript Single Page App Without a Framework
<div class="sub header"></div>
</div>
</h2>
</div>
</script>

Next, add the following templates that will represent a view for each URL path we specified in the navigation bar:
<!– Currency Rates Template –>
<script id="rates-template" type="text/x-handlebars-template">
<h1 class="ui header">Currency Rates</h1>
<hr>
</script>

<!– Exchange Conversion Template –>
<script id="exchange-template" type="text/x-handlebars-template">
<h1 class="ui header">Exchange Conversion</h1>
<hr>
</script>

<!– Historical Rates Template –>
<script id="historical-template" type="text/x-handlebars-template">
<h1 class="ui header">Historical Rates</h1>
<hr>
</script>

Next, let’s compile all theses templates in public/js/app.js. After compilation, we’ll render the rates-template and see what it looks like:
window.addEventListener(‘load’, () => {
const el = $(‘#app’);

// Compile Handlebar Templates
const errorTemplate = Handlebars.compile($(‘#error-template’).html());
const ratesTemplate = Handlebars.compile($(‘#rates-template’).html());
const exchangeTemplate = Handlebars.compile($(‘#exchange-template’).html());
const historicalTemplate = Handlebars.compile($(‘#historical-template’).html());

const html = ratesTemplate();
el.html(html);
});

Take note that we’re wrapping all JavaScript client code inside a load event. This is just to make sure that all dependencies have been loaded and that the DOM has completed loading. Refresh the page and see what we have:

We’re making progress. Now, if you click the other links, except Currency Rates, the browser will try to fetch a new page and end up with a message like this: Cannot GET /exchange.
We’re a building a single page application, which means all the action should happen in one page. We need a way to tell the browser to stop fetching new pages whenever the URL changes.
The post Build a JavaScript Single Page App Without a Framework appeared first on SitePoint.

Link: https://www.sitepoint.com/single-page-app-without-framework/

Handling Forms With React and HTML5 Form Validation API

When we talk about user input within a web app we often think first of HTML forms. Web forms have been available since the very first editions of HTML. Apparently, the feature was introduced already in 1991 and standardized in 1995 as RFC 1866. We use them everywhere, with almost every library and framework. But what about React? Facebook gives a limited input on how to deal with forms. Mainly it’s about subscribing forms and controls for interaction events and passing state with the “value" property. So form validation and submission logic are up to you. Decent UI implies you cover such logic as "on submit"/"on input" field validation, inline error messaging, toggling elements depending on validity, "pristine," "submitting," states, and more. Can we not abstract this logic and simply plug it in our forms? We definitely can. The only question is what approach and solution to pick up.
Forms in a DevKit
If you go with a DevKit like ReactBootstrap or AntDesign you are likely already happy with the forms. Both provide components to build a form that meets diverse requirements. For example, in AntDesign we define a form with the Form element and a form field with FormItem, which is a wrapper for any input control out of the set. You can set validation rules on FormItem like:

Link: https://dzone.com/articles/handling-forms-with-react-and-html5-form-validatio?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Managing State in React With Unstated

As your application becomes more complex, the management of state can become tedious. A component’s state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, you might not need Redux.
Unstated is an alternative that provides you with the functionality to manage state across multiple components with a Container class and Provider and Subscribe components. …
The post Managing State in React With Unstated appeared first on CSS-Tricks.

Link: https://css-tricks.com/managing-state-in-react-with-unstated/

Managing React State With Render Props

Brief Introduction
Over the years, React has evolved with different patterns and techniques to solve two fundamental problems:

How to share and reuse code.
How to manage unidirectional state.

In early versions of React, there was the concept of mixins. These ended up being a fragile solution. Mixins were eventually deprecated and a new pattern emerged called Higher-Order Components (HoC). A HoC helps solve our first issue of sharing and reusing code in a maintainable and composable manner.

Link: https://dzone.com/articles/managing-react-state-with-render-props?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev