Beyond React 16: Time Slicing and Suspense API

  • The latest release of ReactJS which is React 16 ships with a lot of features such as , , , and many others.
  • A sneak peek into new features coming to React was demoed by the creator of Redux and React core team member, Dan Abramov at JSConf Iceland, 2018.
  • Making it easier for developers to build great user experiences using ReactJS has always been the goal of the ReactJS team.
  • Time-slicing allows ReactJS, which now runs on React Fiber, to split computations of updates on children components into chunks during idle callbacks and rendering work is spread out over multiple frames.
  • Besides the steps shown in this section, the guide also shows: – – I’m overwhelmed by the engagement of React core team members with members of the JavaScript community in landing new features in React.

Time Slicing, Suspense and the Fetcher API are new features and concepts that will land soonest in stable releases of ReactJS. Learn how they work.
Continue reading “Beyond React 16: Time Slicing and Suspense API”

Essential React Libraries in 2018

  • But in the end, when implementing a larger application, you need a couple of more libraries to have a sophisticated web application with React as its core.
  • The following article will give you an opinionated approach to select from these libraries to build a sophisticated React application.
  • In plain JavaScript, it would be possible to create a React class attribute with conditionals: – – But it is so much easier with the classnames library: – – It works perfectly with CSS modules too.
  • The library is for many people almost mandatory in applications when it comes to conditional stylings in React.
  • Basically a fetch looks like the following, for instance in a React lifecycle method when a component mounts: – – Basically you wouldn’t have to add any other library to do the job.

Often it is difficult to find all the relevant libraries to complement your React application, because React’s ecosystem is a flexible yet large framework. The article gives you an opinionated React setup by choosing essential libraries: Redux, MobX, React Router, Flow, Styled Components, Lodash, Ramda, Prettier, Axios, …
Continue reading “Essential React Libraries in 2018”

So you want to learn React.js? – EdgeCoders

So you want to learn React.js?


#javascript #ReactJS

  • This is a good thing, React is a library that does one thing really well, but it’s not the answer to everything.However, identify whether what you’re currently learning is React or not, mainly so that you don’t get confused about your effort to learn React itself.
  • This is not counting the tools and other libraries that complete React like for example, Redux or Relay.There is an important question about the order with which you need to learn things.
  • I like to be specific about this here, so if you don’t know how to map or reduce an array, or if you don’t understand the concept of closures and callbacks, or if seeing “this” in JavaScript code confuses you, you’re not ready for React and you still have a…
  • Imports and exports of modules (most important of all)You don’t have to start with ES2015, but you do need to eventually learn it (and not because you’re learning React).
  • Don’t start here until you’re very comfortable with React itself.

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to…
Continue reading “So you want to learn React.js? – EdgeCoders”

React server-side rendering with Webpack – The Problem Solver

#React Server-Side Rendering with #Webpack  #reactjs #javascript #Programming #coding

  • There are times when the initial blank html page being download for a React application is not perfect.
  • So, if you want to maximize traffic to your React application using SEO Server-side rendering is a must have.
  • With a Server-side rendering style application, the initial HTML page already contains all, or most, of the markup so it can be displayed much faster.
  • There are several approaches to doing Server-side rendering with a React application generated using Create React App (CRA).
  • A much better approach would be to use Webpack to generate two JavaScript bundles, one for use with Server-side Rendering and a second for use in the browser.

There are times when the initial blank html page being download for a React application is not perfect. One reason might be Search Engine Optimization, another might be a slower initial render, especially on mobile devices.
Continue reading “React server-side rendering with Webpack – The Problem Solver”

Fullstack React: React and WebVR using A-Frame

React and WebVR using A-Frame  #ReactJS #WebVR

  • Today we are going to learn how to create a simple augmented reality experience using a library called A-Frame and React.
  • We are going to take what I learned from that and create a relatively simple application that takes an equirectangle image and use it as our back drop for the beginnings of a virtual experience.
  • A-Frame is a web framework used to build virtual reality experiences built on top of technologies like three.js and the WebVR API The Mozilla VR Team developed it as a fully open project.
  • We now need to import A-Frame into our React component and then add our first tag, the scene.
  • Update the render function of your component by adding some entities: – – A-Frame gives you access to a lot of primitive entities out of the box so we can add a sphere by just using the tag.

Editor’s Note: We are excited to have a guest blogger on our blog for this article! Jordan Papeleo is a technologist, programmer, and code mentor who has deep passions about growing developers, his community, his faith, and his mustache.
Continue reading “Fullstack React: React and WebVR using A-Frame”

React Alicante 2017 #ReactAlicante #React.js #JavaScript

React Alicante 2017 #ReactAlicante #React.js #JavaScript

  • With an attendance of over 250 and a wide range of the latest and greatest from the React world, React Alicante delivered some interesting topics ranging from React Native all the way to GraphQL.
  • While I really do see the value in documenting your React components for large scale projects I can also see its value being diminished somewhat for smaller scale projects as the time spent building a system of UI documentation with Storybook while also having to write tests specifically for that…
  • Possibly one the most interesting talks at the conference was by Nikolas Burk, His talk (Building a realtime chat app with GraphQL) was extremely engaging.
  • A talk by Erik Rasmussen labelled A practical guide to Redux Form was very interesting and made me rethink my current system of form validation using React and Redux.
  • Erik is the creator of Redux Form and he outlined how this library provides an easier way to manage the various state changes of a dynamic form.

Last weekend I attended React Alicante. Its the first of its type set in Spain’s southeastern Costa Blanca. It delivered some interesting topics ranging from
Continue reading “React Alicante 2017 #ReactAlicante #React.js #JavaScript”