Introducing the React RFC Process

  • We’re adopting an RFC (“request for comments”) process for contributing ideas to React.
  • It’s also intended to provide a clear path for ideas to enter the project: – – RFCs are accepted when they are approved for implementation in React.
  • As a rule of thumb, this means any proposal that adds, changes, or removes a React API.
  • We now have several repositories where you can submit contributions to React: – – Coinciding with the launch of our RFC process, we’ve submitted a proposal for a new version of context.
  • The proposal has already received many valuable comments from the community that we will incorporate into the design of the new API.

Inspired by Yarn, Ember, and Rust, the goal is to allow React core team members and community members to collaborate on the design of new features. It’s also intended to provide a clear path for ideas to enter the project:
Continue reading “Introducing the React RFC Process”

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”

Easily Styling React Apps In JavaScript

Easily Styling React Apps In JavaScript


#reactjs #javascript

  • While many developers still use CSS to style their React apps, writing styles in JavaScript has become an increasingly popular practice as it gives all of the conveniences of CSS preprocessors without the need to learn a new language.
  • Most CSS-in-JS libraries involve creating a JavaScript object of styles.
  • As an example, this is what a style object looks like using my preferred library, Aphrodite.
  • For example, when styling placeholder text, I use a function that returns an object of styles:

    One of biggest advantages of writing styles in JavaScript is that classNames are scoped to each component by default.

  • There are lots of helpful libraries for creating JavaScript styles.

Writing styles React Apps in JavaScript has become an increasingly popular practice as it gives all of the conveniences of CSS preprocessors
Continue reading “Easily Styling React Apps In JavaScript”

Dev Blog: How We Chose Our Stack – MHacks

Dev Blog: How We Chose Our Stack  #react #nodejs #tech #docker #hackathons #reactjs

  • It had seen years of changes brought in from different tech teams and contributors, last-moment fixes to prevent catastrophic events moments before the hackathon started, and a general lack of consistency.
  • Suffice to say, it was a hodge-podge of things we needed without enough time to implement them.Over the life of MHacks, we’ve seen about 5 completely different tech stacks for the website/backend, 3 different apps for either iOS or Android, and a few extraneous repos along the way (and for the record, those numbers are probably low-balling it).
  • We also use Docker for everything DevOps, including setting up our development environments, so everyone on the team is on the same page.DockerBy using Docker, we were also able to simplify deployments to the point where we can deploy through a simple Slack command.
  • (And speaking of Docker, I’ll be giving a tech talk at MHacks X about all things Docker, so be sure to drop by if you’re interested!)
  • In combination with both of those passing, we require Pull Requests to go through multiple reviews to make sure things will work the way they should.A Community-Friendly StackIn my opinion though, the best part about this stack is that everything is customizable.

Hello World! My name is Antonio and I am a Pharmaceutical Sciences major (yes, you read that right) at the University of Michigan. On the MHacks Core Team, I act as sassadmin — or rather sysadmin …
Continue reading “Dev Blog: How We Chose Our Stack – MHacks”

Make things that matter, together.

  • We believe everyone deserves to work on products that will be used, enjoyed, and loved – products that matter.
  • Truly excellent products are a team effort.
  • It’s our mission to help product leaders across the globe cultivate these values in their organizations, and we’ve adopted them as well.
  • With productboard, every team can make things that matter – together.

Meet the team behind productboard and find out why we do what we do and how we do the magic.

Continue reading “Make things that matter, together.”

Code Release: Out Loud – The Studio

  • I believe we’re doing some very interesting things with our code, from the audio player that learns user preferences based on play patterns to the extremely tight VoiceOver integration.
  • Out Loud’s audio player slowly learns your preferences and rearranges audio selections to match them
  • An audio guide for people who hate museum audio guides
  • Code for Out Loud is open-sourced under the MIT license.
  • Never miss a story from The Studio , when you sign up for Medium.

Over the past few months we’ve been working really hard with The Andy Warhol Museum to create Out Loud, the museum’s new inclusive audio guide, available today as a free download in the Apple App…
Continue reading “Code Release: Out Loud – The Studio”