3 Ways to Fine-tune Presentational Components

Three ways to fine-tune your React presentational components  #reactjs #javascript

  • Here are three ways I’ve found to make React presentational components work as re-usable building blocks.
  • Here are two stories for a text input component: the first shows the component in its valid state, and the second show the component in its invalid state.
  • Instead, extract a new component and pull it up: – – Let the container decide explicitly when and where show presentational components.
  • As you keep pulling presentational components up, they start looking like enhanced native elements, so you’d like to be able to pass all props you would pass to a native element, like or .
  • Inside the component, extract the props you’ve defined yourself and pass the rest to the element that you’re wrapping: – – Here, we’re separating the prop from the rest, and passing the remaining props to the element.


Saturday, Feb 17 2018

in

javascript

react

Continue reading “3 Ways to Fine-tune Presentational Components”

Choosing a frontend framework in 2017 – This Dot Labs – Medium

Choosing a #frontend framework in 2017:  #EmberJS #Meteor #ReactJS #AngularJS

  • Many developers were attracted to Angular.js because it was built by Google which gave Angular.js automatic credibility.At about the same time, Web Components specification promised to make it possible for developers to create reusable widgets that were isolated from their context and were easy to compose with other widgets.The Web Components specification was four separate specifications that worked together.HTML Template — provides HTML markup for the componentCustom Element — provides a mechanism to create a custom HTML elementShadow DOM — isolates the internals of the component from the context that rendered itHTML Import — makes it possible to load the Web Component into a pageA team at Google created a polyfill library that provided Web Components for all browsers at the time.
  • The Ember.js team looked at large Backbone applications to find similarities.They identified the need to render nested views where some parts of the application where consistent while other parts changed from one part of the app to another.They also saw the URL as a key player in the architecture of web applications.
  • Some brave Backbone developers were adding React as views to their applications to fix performance problems that they were encountering.In response to the threat posed by React, the Ember core team created a plan to adopt ideas introduced by React into the Ember framework.
  • They recognized the need for backward compatibility and created an upgrade path that allowed existing applications to upgrade to a version of Ember that included a new React-inspired rendering engine.Over the course of 4 minor releases Ember.js deprecated Views, moved the community to a CLI-based build process and made component-based architecture the foundation of Ember application development.
  • The Angular team calls the new framework a platform because they plan to provide everything that a professional developer needs to build web applications.

There’s been a lot of development in the frontend frameworks ecosystem over the last seven years. We’ve learned a lot about what it takes to build and maintain large applications. We’ve seen many new…
Continue reading “Choosing a frontend framework in 2017 – This Dot Labs – Medium”

React, Webpack, and Horizon Quick Start — Frontend Weekly — Medium

#ReactJS, Webpack, and Horizon quick start:

  • Were going to add in Message and Messages Components, along with a stylesheet to make it a little more tolerable to look at (right now, we only really need a ‘center’ class).
  • import React, { Component } from ‘react’; class App extends Component { render() { //return html } } export default App;
  • /messages’; class App extends Component { render() { return (

    ); } } export default App;

  • Passing in the chat object down to the child component is how we will be able to get our messages and map them to our Message component
  • import React, { Component } from ‘react’; export default class Message extends Component { constructor(props) { super(props); this.props = props; } render() { return (
    {this.props.msg.author}
    {this.props.msg.text}

    ); } }

Read the full article, click here.


@ReactiveConf: “#ReactJS, Webpack, and Horizon quick start:”


This tutorial will give you a quick start example to follow along to, and help you build a barebones React chat application with Horizon.io…


React, Webpack, and Horizon Quick Start — Frontend Weekly — Medium