Building a Wizard / Workflow in React – Entelo Engineering

Building a Wizard / Workflow in React  #react #reactjs #tutorial #reactjs

  • Here are just a few examples:User Registration with multiple formsBreaking large forms into smaller stepsE-commerce checkout flowMulti-page surveysI’ve had previous experiences building out a checkout flow for e-commerce companies, but this was the first time I had to build a workflow using React.Here is the design and the approach I…
  • Finally, we end the workflow with a confirmation page.Each step of the workflow is a separate route we will define in our routes file when using react-router.
  • As we navigate from one step to the next, we will advance the progress bar along with rendering a new container with the next step’s contents.Choosing a Progress BarFor the progress bar, we decided to use the libraryThis is a very simple progress bar and the API is straightforward.
  • Below are some examples of what the progress bar looks like as we move from one step to the next.First StepNext Step to show progression in the workflowFinal StepReact RouterSet up the route to determine what step of the flow we are in.Route path=”jobs/:id/:step” /The id and step will be passed…
  • In the component, we will create a switch case statement to determine what component to render.switch (step) { case (‘description’): return (DescriptionContainer /); case (‘criteria’): return (CriteriaContainer /); …}We also use this stepvalue to calculate the progress bar distance and what progress label should be bold.ContainersWe have a series of…

One of my first tasks at Entelo was to work on a greenfield project that involved a step-by-step wizard. Workflows/wizards are useful when you want the end-user to complete a series of steps. (I’ll…
Continue reading “Building a Wizard / Workflow in React – Entelo Engineering”

JavaScript { Part six: Inheritance and Prototypes }

  • PrototypesAs you know, objects have properties, and one of those default properties for almost all objects is called a prototype, I will show you with examples how to see prototypes, how to add properties to those prototypes and more, but first, you need to know a little of theory_proto_In order…
  • It brings direct access to [[ Prototype ]] to the language :More about _proto_In Python several special variables had double underscore, therefore the _proto_ property is called or better know as “under proto”, borrowing the name of the special variables in PythonThe under proto was not part of the ECMAScript 5 standard,…
  • ( For more information about this please read the MDN page, is very useful )Time to get our hands dirty showing how an under proto looks, but in order to show you this, I’m gonna do it in a direct kinda way, so please, don’t do it in this way,…
  • … what if I insert some properties to _proto_ in order to demonstrated all theory, as I show you previously in the theoryAdding properties to _proto_Let’s see if I could access the properties of the object!When you access a property from an object, JavaScript starts the search for it in that…
  • then the prototype’s prototype and so on.Getting the values!What if we could log the “Me object”, let’s see what we can see!Log the full plain object

What’s up What’s up!!, in order to keep explaining objects in JavaScript, I would like to said, inheritance, for me, is very useful for promoting code reuse Is when you refer to the capacity of an…
Continue reading “JavaScript { Part six: Inheritance and Prototypes }”

React 16, Enzyme 3, Jest 21 — The Triforce – Eduardo Rabelo – Medium

#ReactJS 16, Enzyme 3, Jest 21 — It’s time to update again!

  • React 16, Enzyme 3, Jest 21 — The TriforceWhat a week!
  • We saw the long awaited React 16 release:With great free content around new features:We also had the new version of Enzyme fixing a lot of annoying bugs:On top of that, for the surprise of the whole community, and especially, making the day more joyful for our omnipresent friend Dan Abramov,…
  • 1It is a marvellous work, congratulations everybody involved!It’s time to update your configuration, without much pain!I’ve prepared 2 examples:React 15.6.2, Enzyme 3.0.0 and Jest 21.2.1React 16.0.0, Enzyme 3.0.0 and Jest 21.2.1You don’t need to update to React 16 to use Enzyme 3 and vice-versa.
  • Let’s see a basic overview about the changes:Enzyme 3To better support others “React-like” libraries, Preact/Inferno, we’ve the new concept of Adapters.
  • They’re pluggable libraries, responsible for handle the rendering of the UI Library you’re using.Officially, Enzyme 3 was released with full support for React 13~16.

On top of that, for the surprise of the whole community, and especially, making the day more joyful for our omnipresent friend Dan Abramov, no more patents for React 15/16, Jest, Flow and friends: At…
Continue reading “React 16, Enzyme 3, Jest 21 — The Triforce – Eduardo Rabelo – Medium”

Hacker News readers as Progressive Web Apps

  • A spiritual successor to TodoMVC

    TodoMVC has helped thousands of developers select
    an MV* framework for their JavaScript applications.

  • However, the web ecosystem
    has evolved in the past few years allowing us to build powerful applications using
    modern browser capabilities.
  • To provide developers with examples, we collected a list of unofficial Hacker News clients built with a number of popular JavaScript frameworks and libraries.
  • Each implementation is a complete Progressive Web App that utilizes
    different progressive technologies to provide a fast, reliable and engaging experience.
  • Our implementations aim to follow a loose specification.

Hacker News readers as Progressive Web Apps
Continue reading “Hacker News readers as Progressive Web Apps”

Introducing the new : Hacker News Progressive Web Apps in @reactjs @preactjs @polymer @vuejs…

  • A spiritual successor to TodoMVC

    TodoMVC has helped thousands of developers select
    an MV* framework for their JavaScript applications.

  • However, the web ecosystem
    has evolved in the past few years allowing us to build powerful applications using
    modern browser capabilities.
  • To provide developers with examples, we collected a list of unofficial Hacker News clients built with a number of popular JavaScript frameworks and libraries.
  • Each implementation is a complete Progressive Web App that utilizes
    different progressive technologies to provide a fast, reliable and engaging experience.
  • Our implementations aim to follow a loose specification.

Hacker News readers as Progressive Web Apps
Continue reading “Introducing the new : Hacker News Progressive Web Apps in @reactjs @preactjs @polymer @vuejs…”

Webpack 2: The Complete Developer’s Guide

  • Webpack is the premier build tool for React and Angular 2 applications.
  • In this course you’ll master each major feature of Webpack and learn how to optimize it for your own app.
  • Webpack has a wealth of fancy features, but each requires in depth knowledge of how they work.
  • This course is the most comprehensive Webpack course you’ll find online, and the only full course on the popular version 2 edition of Webpack.
  • Webpack can be confusing to learn, but after taking this course you’ll understand that it is a tool that requires just a bit of concentration to master.

Master Webpack 2 as you deploy web apps supported by Babel, code splitting, and ES2015 Modules.
Continue reading “Webpack 2: The Complete Developer’s Guide”