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”

Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so

Read our interview with @NorbertdeLangen about his recent work on Storybook:  #ReactJS

  • We strongly believe the problems Storybook solves are not unique to any single platform.Of course, we’re also going to be improving the features and performance of Storybook, and create new ways for you to extend Storybook and customise it for your use-case.
  • Finally: we’re really seeing the community getting involved with Storybook, we get pull requests making Storybook better in all sorts of ways we didn’t expect.
  • So who knows what will be included in the next release?Has rebranding from React Storybook changed its culture or direction?The culture certainly changed — now the community itself is driving Storybook forward.
  • If anything, I’d say our focus on helping the community co-maintain Storybook has had a major impact.Do your company clients adapt React style guides to their workflow?Yes in fact, most of them do.What do you think is the future of web and mobile development?Who knows?
  • I’m super excited about native support for ES modules in the modern browsers and Node.js!What are your favorite components, libraries, or community projects?Babel, Webpack, React, Glamorous, Yarn, Express, ESlint, Prettier, Jest, GraphQL.I’m also a huge fan of community-driven meetups.Pick one and tell us why: Redux or MobX?It depends.

Today, we’re opening our new series of interviews for React Day Berlin. Since Norbert de Langen is going to speak about building Storybook in Berlin in December, we decided to ask him a couple of…
Continue reading “Norbert de Langen: Storybook has reached outside the React ecosystem & will continue to do so”

Microservices with Docker, Flask, and React

  • Part 1

    Part 2

    Part 3

    Part 4

    Introduction

    Topics covered:

    Setting up a new service
    Configuring Redis
    Adding Materialize CSS

    Coming Soon!

  • Introduction

    Topics covered:

    Setting up a new service
    Configuring Redis
    Adding Materialize CSS

    Coming Soon!

Continue reading “Microservices with Docker, Flask, and React”

Maintaining a fork of create-react-app as an alternative to ejecting

Maintaining a fork of create-react-app as an alternative to ejecting:  #ReactJS

  • How everything worksFacebook’s create-react-app is a multi-package repository, powered by Lerna.Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
  • © Docs.So create-react-app is just a shell storing all its packages in a /packages folder.
  • After you install it, it runs a postinstall command from the main package.json, which in turn runs Lerna’s bootstrap script, which does some magic: basically moves or symlinks nested packages into your main node_modules folder allowing to require or import them as usual.The only package you need to bother about is located in /packages/react-scripts.
  • It exposes all the configuration and scripts your own project (if it was generated by create-react-app), uses to start, build, etc.
  • Have a look at scripts section of your project’s package.json.Moreover, react-scripts is the only dependency left in your package.json after create-react-app have initialised.

I started using create-react-app instead of configuring build tools (webpack, babel, etc.) by myself a while ago and it saved me a lot of time and frustration. Thanks, Facebook! But.. Sometimes you…
Continue reading “Maintaining a fork of create-react-app as an alternative to ejecting”

Maintaining a fork of create-react-app as an alternative to ejecting

Maintaining a fork of create-react-app as an alternative to ejecting:  #ReactJS

  • How everything worksFacebook’s create-react-app is a multi-package repository, powered by Lerna.Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
  • © Docs.So create-react-app is just a shell storing all its packages in a /packages folder.
  • After you install it, it runs a postinstall command from the main package.json, which in turn runs Lerna’s bootstrap script, which does some magic: basically moves or symlinks nested packages into your main node_modules folder allowing to require or import them as usual.The only package you need to bother about is located in /packages/react-scripts.
  • It exposes all the configuration and scripts your own project (if it was generated by create-react-app), uses to start, build, etc.
  • Have a look at scripts section of your project’s package.json.Moreover, react-scripts is the only dependency left in your package.json after create-react-app have initialised.

I started using create-react-app instead of configuring build tools (webpack, babel, etc.) by myself a while ago and it saved me a lot of time and frustration. Thanks, Facebook! But.. Sometimes you…
Continue reading “Maintaining a fork of create-react-app as an alternative to ejecting”

How to Test React and MobX with Jest – ReactJS News

#Applications How to Test React and MobX with Jest  #frameworks #developer

  • Enzyme will be our testing tool of choice, since it will allow us to test React components with jQuery-like syntax.
  • Adding MobX and Enzyme to our React application really made the data and testing layers fun to work with.
  • Since MobX stores act just like object literals, we can test our React component by injecting it with any object literal to simulate a store state.
  • The sample todo application is incredibly easy to build with React and MobX, and in this article we’ll cover unit and UI/functional testing for React and MobX with Enzyme.
  • If you want to do this with React and MobX, you should simply replace the mock store with a real MobX store.

If you’re developing React applications, then you know that the React community has been
bursting with new ideas and tools over the last year. When investigating any
new technology to incorporate into a stack, we should consider if it either
makes the workflow much easier, or solves a key problem. MobX and Enzyme are 2 new
libraries in the React world that fit the bill. This sample todo application
is incredibly easy to build with React and MobX, and in this article we’ll cover
unit and UI/functional testing for React and MobX with Enzyme. @ReactiveConf: How to test #ReactJS and MobX with Jest:

Continue reading “How to Test React and MobX with Jest – ReactJS News”