The React Podcast by Changelog Media on Apple Podcasts

  • Most saliently, you called his framework “React Native Web” over and over again despite him saying “React Native for Web” every single time.
  • Whatever you thought the framework’s name was going into the interview, and for whatever reason you thought it, when your guest describes their own work with one name USE THAT NAME.
  • For example, he clearly said his problem with the CSS framework replacing the Style object was that it would add overhead, not that it would make low-level styling impossible (no web framework has that power unless it’s malicious).
  • His point was that if you’re writing a framework that does low-level CSS operations under one paradigm (React Native for Web), it’s wasteful to load an entirely different framework that does the same work under a different paradigm (CSS framework).
  • Please, either listen better, or after the interview ask the interviewee if they’d like you to preamble the podcast with any corrections of what you said.

Download past episodes or subscribe to future episodes of The React Podcast by Changelog Media for free.
Continue reading “The React Podcast by Changelog Media on Apple Podcasts”

How to display Draft.js content as HTML – tuomo.me

How to display Draft.js content as HTML  #webdevelopment #webdev #ReactJS #react #javascript

  • At first however, it might not be so clear how to take the rich text representation that is created by Draft.js (=ContentState) and display it as HTML.
  • Draft.js itself doesn’t have an API to convert the content state to HTML.
  • One way to export your content state to HTML is to use npm package provides stateToHtml method which takes ContentState object as parameter and returns the content state as html.
  • Here is an example for a component that has Draft.js editor and as you type the editor’s content is displayed as html.
  • Getting HTML content of Draft.js editor is quite straight forward.

Continue reading “How to display Draft.js content as HTML – tuomo.me”

React Tutorial: A Comprehensive Guide to learning React.js in 2018

  • These components are defined either in pure JavaScript or they can be defined in what the React team calls “JSX”.
  • The reason the React team went with this approach is because, since the virtual DOM is a JavaScript representation of the actual DOM, React can keep track of the difference between the current virtual DOM(computed after some data changes), with the previous virtual DOM (computed befores some data changes).
  • In more layman’s terms, because manipulating the actual DOM is slow, React is able to minimize manipulations to the actual DOM by keeping track of a virtual DOM and only updating the real DOM when necessary and with only the necessary changes.
  • The process looks something like this, – – Some user event which changes the state of your app → Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.
  • Signal to notify our app some data has changed→ Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

Continue reading “React Tutorial: A Comprehensive Guide to learning React.js in 2018”

React Tutorial: A Comprehensive Guide to learning React.js in 2018

  • These components are defined either in pure JavaScript or they can be defined in what the React team calls “JSX”.
  • The reason the React team went with this approach is because, since the virtual DOM is a JavaScript representation of the actual DOM, React can keep track of the difference between the current virtual DOM(computed after some data changes), with the previous virtual DOM (computed befores some data changes).
  • In more layman’s terms, because manipulating the actual DOM is slow, React is able to minimize manipulations to the actual DOM by keeping track of a virtual DOM and only updating the real DOM when necessary and with only the necessary changes.
  • The process looks something like this, – – Some user event which changes the state of your app → Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.
  • Signal to notify our app some data has changed→ Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

Continue reading “React Tutorial: A Comprehensive Guide to learning React.js in 2018”

Here is a simple Counter example using react-senna to create and handle state. #reactJS

Here is a simple Counter example using react-senna to create and handle state. #reactJS

  • A store component to quickly initialize state and state handlers in React.
  • ; { } ; describe the state you want in a `seeds` array, for example: [ { name , initialState [], } ]; Use the Store component to initiate React state and setState handlers () ( Store seeds {seeds} render { { .
  • (props); render whatever you want with the state and handler you just created!
  • Here, you can create handlers using the current state as a parameter: – – The resulting function increments the state by 1 – – will create a handler that will set the state to its opposite: – – The resulting will flip the state of – – In fact, is…
  • For example, controlling two separate counter states: – – Remove handlers before the props are passed on to the render function.

GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over 80 million projects.
Continue reading “Here is a simple Counter example using react-senna to create and handle state. #reactJS”

Protected routes and Authentication with React and Node.js

Protected routes and Authentication with React and Node.js  #reactjs  #react #Nodejs

  • Front-end App ArchitectureI’m a huge fan of the React Boilerplate architecture so I created something similar to organize my code: – /src – └─── containers // React components associated with a Route – | └─── App // The entry point of the application – | └─── AuthPage // Component handling…
  • component={AuthPage} / – Route exact path=”/connect/:provider” component={ConnectPage} / – Route path=”” component={NotFoundPage} / – /Switch – /div – /Router – ); – } – } – – export default App;Creating the Authentication ViewsNow that all our routes are implemented we need the create our views.  –  The way we declared…
  • First of all, let’s create a forms.json file that will handle the creation of the form on each auth structure of the JSON will be like the following (you can see a customBootstrapClass key that is needed in the Input component): – { – “views”: { – “login”: [ -…
  • Here is the flow: – The user clicks on login with FacebookIt redirects him to another page so he can authorize the appOnce authorized, Facebook redirects the user to your app with a code in the URLSend this code to StrapiAt this point, we need to implement only one lifecycle…
  • catch(err = { – }); – } – – redirectUser = (path) = { – the Providers in the AuthPage – To do so, we need a SocialLinkcomponent like the following: – /** – * – * SocialLink – * – */ – – import React from ‘react’; – import…

So I started a side project to create a tiny boilerplate with nothing more than Create React App to implement the authentication flow with Strapi, a Node.js framework with an extensible admin panel…
Continue reading “Protected routes and Authentication with React and Node.js”

What I learned making my first open source React component

  • A folder for your code, a folder for your demo app (plus dev server and hot loading, yay\o/), a folder that you should use and I didn’t, some build stuff for shipping… – – Basically, it gives you everything you need so you can focus on your component and don’t…
  • You need a demo page so you can show off your component in action.
  • react-lazyload-fadein, for example, has a demo page that shows off different ways you can use it.
  • People will find out about your component in different ways.
  • Especially if someone could figure out how to slurp in the README file and make that demo page for you 🤔 – – The React community is a bit silly and loves to invent new patterns to bicker about.

Continue reading “What I learned making my first open source React component”

Build production ready universal apps using MERN Stack v2.0 #MongoDB #ExpressJS #ReactJS #NodeJS via @mern_io

  • In this version, we also added code generators.
  • Blueprints for those generators are located at , and config is located at .
  • Take a look at this section in the documentation which explains how to modify generators.

MERN is a scaffolding tool which makes it easy to build universal apps using Mongo, Express, React, NodeJS, Redux and Webpack. It minimizes the setup time and gets you up to speed using proven technologies.
Continue reading “Build production ready universal apps using MERN Stack v2.0 #MongoDB #ExpressJS #ReactJS #NodeJS via @mern_io”

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”

The Future of State in React

The Future of #State in #reactjs   #javascript #developers

  • React’s new Context API will be the go-to solution for sharing state simply™️.
  • In this post, I’ll describe Context by creating a simple theme-switching component: – – Since Context won’t be live until React 16.3, I’ll be using the polyfill.
  • Creating a Context instance is as simple as calling a function with a default value .
  • Context’s has less emphasis on global state than Redux and can be used to as little or as large a scale that you’d want: just like MobX.
  • In the following snippet, I set up a React Component that manages the state that our Provider will pass to those willing to consume it: – – Consumers must be descendants of its context’s Provider for it to access the value it wants.

The days of relying on state-management libraries for non-local state are coming to a close. You wont need Redux anymore. Not even MobX. React’s new Context API will be the go-to solution for sharing state simply™️.
Continue reading “The Future of State in React”