⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

  • How well that static site performs and how easily you can build that site is another story.ProsVery easy to get startedWell documentedConsSubpar developer experience for static functionality no hot-reloadingLarge per-page JS bundles, resulting in a lot of unnecessary duplicate code being downloaded.Difficult root component customizationDestructive routing.
  • We also knew that we needed to ditch built-in proprietary connectors ASAP; being able to get your data from anywhere is important, but the ability to use and access that data in your site is paramount.Most importantly, we needed a tool that would allow us to build things like an…
  • It’s insanely fast, touts fantastic SEO capabilities, and is probably the most React-friendly static-site library on the internet.Let’s get to it.How does it work?react-static starts by exporting a single JS bundle, which includes every template for your entire site.
  • To connect a component to this data, you use a convenient HOC called getRouteProps.The HTML files generated by react-static ensure that pages load instantly and are optimized for SEO.Once the page is loaded, your site invisibly and instantly transitions to your react app.At this point, navigating around your app will…
  • You’ve worked hard enough producing and organizing all of the data for your website, so the last thing you need is some superfluous GraphQL layer or custom component lifecycle lodging itself between your data and your pages.

At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these…
Continue reading “⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!”

Our React Native GL library is in alpha – Points of interest

We're now supporting #reactnative Mapbox GL 🙌 Try out our alpha

  • Our React Native GL library is in alphaBy: Nick ItalianoWe’re officially supporting React Native Mapbox GL.
  • Our mobile team has started a rewrite of our current experimental React Native library and released an alpha 🙌Using the React Native framework, developers can build cross-platform mobile applications in half the time.
  • Our React Native library will make it as efficient as possible to access our APIs and open source libraries, so you can focus on shipping features.Reusable components are the strongest aspect of React, which is why we’ve created expressive and easy to use components for powerful features like runtime styling…
  • With this in mind, you can render a custom styled map centered on San Francisco in just 25 lines of code.First look runtime styling in React NativeRuntime styling is the first major feature with added support in this alpha release.
  • Here is a preview of a couple examples you can find in our sample application.3D buildingsMarker clusteringWhat’s nextWe plan on bringing our React Native SDK to feature parity with our Android/iOS SDKs and want to be active in the community:We have a Gitter channel where you can post any questions…

We’re officially supporting React Native Mapbox GL. Our mobile team has started a rewrite of our current experimental React Native library and released an alpha 🙌 Using the React Native framework…
Continue reading “Our React Native GL library is in alpha – Points of interest”

Props and Data Flow in ReactJS – Kenlyn Terai – Medium

Props and Data Flow in #ReactJS:  #JavaScript

  • (3) There are only two requirements that define a JavaScript function as a React component:The function accepts a single “props” object argument with dataIt returns a React elementA simple “Functional” componentThe equivalent “Class” componentWhether you declare a component as a function or a class, it must never modify its own props.
  • All React components must act like pure functions with respect to their props.
  • = BoringTo sum up what props are in React, theyAre data passed to components — values can be anything: a string, an array, functions, and so onAre immutableEnable components to become more reusableSo, if props are read-only, what place do they have in creating dynamic web applications?
  • The render() method also calls the diff algorithm which recognizes any changes in the component and logs them for batching to the “real” DOM.Credit: Tarun Sharma: “Understanding virtual DOM react js” from React DocsHere is an example from Components and Props in the React Docs.
  • This code renders “Hello, Sara” on the page:function Welcome(props) { return h1Hello, {props.name}/h1;}const element = Welcome name=”Sara” /;ReactDOM.render( element, it on CodePen.Let’s recap what happens in this example:We call ReactDOM.render() with the Welcome name=”Sara” / element.React calls the Welcome component with {name: ‘Sara’} as the props.Our Welcome component returns a h1Hello, Sara/h1 element as the result.React DOM efficiently updates the DOM to match h1Hello, Sara/h1.

ReactJS comes with a slew of new words and new definitions for existing ones. “Props” is no exception. To understand the meaning of “props” in ReactJS, I turned to the context where it is used — in…
Continue reading “Props and Data Flow in ReactJS – Kenlyn Terai – Medium”

React Components Explained – Manoj Singh Negi – Medium

“React Components Explained” by @manojnegiwd  #reactjs #NodeJS #javascript #coding

  • Something like thisimport React from ‘react’;class MyComponent extends React.Component { render () { return div This is a component /div }}class MyOtherComponent extends React.Component { render () { return ( div MyComponent / /div ) }}This way you are able to compose more complex and useful user interface for your users.
  • Component’s render method return JSX which then use to create real HTML output which will be rendered in the browser.The interesting Thing about render method is that it runs every time when your component State or Props updates.
  • Let me show you a exampleimport React from ‘react’;class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: “Manoj” }; } render () { return div My name is {this.state.name} /div }}// if we render this component the output will beMy name is ManojIgnore the super(props) (out of the scope of this article) focus on this.state this is where our component state lives.
  • Let’s see an example.class MyComponent extends React.Component { constructor(props) { super(props); this.state = { name: “Manoj” }; this.changeName = this.changeName.bind(this); } changeName () { this.setState({ name: “Your Name” }); } render () { return div onClick={this.changeName} My name is {this.state.name} /div }}In the above code we are telling our React component to call this.changeName whenever user clicks on the div.
  • You can run this code on jsFiddle here.PropsVisualise props as options that can be passed to a component to customize its functionality.For example, I have a heading component which renders a heading with subtitle.class MyHeading extends React.Component { render () { return div h1This is a heading/h1 pSubtitle/p /div }}If I will use this component it will always render same HTML, someting like this.This is a headingsubtitleIf we use our component in this way it is not of much use right ?

The simplest library I ever used in my life is React. As you know React hit is based upon component design. Everything in React is a component which makes it easy to reuse components frequently. You…
Continue reading “React Components Explained – Manoj Singh Negi – Medium”

Array Methods Explained : Filter vs Map vs Reduce vs Foreach

  • we all know why this method is used for and even you don’t know about this method the name pretty much explains everything.Foreach takes a callback function and run that callback function on each element of array one by one.var sample = [1, 2, 3];// es5sample.forEach(function (elem, index){ console.log(elem + ‘ comes at ‘ + index);})// es6sample.forEach((elem, index) = `${elem} comes at ${index}`)/*output1 comes at 02 comes at 13 comes at 2*/For every element on the array we are calling a callback which gets element its index provided by foreach.Basically forEach works as a traditional for loop looping over the array and providing you array elements to do operations on them.okay!
  • If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.var sample = [1, 2, 3] // yeah same array// es5var result = sample.filter(function(elem){ return elem !
  • As a ReactJS developer I use map a lot inside my application UI.Map like filter foreach takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.Let’s understand map with an examplevar sample = [1, 2, 3] // i am never gonna change Boo!
  • Yeah// es5var mapped = sample.map(function(elem) { return elem * 10;})// es6let mapped = sample.map(elem = elem * 10)console.log(mapped);/* output */[10, 20, 30]Map ran through every element of the array, multiplied it to 10 and returned the element which will be going to store inside our resulting array.Like filter, map also returns an array.
  • ReduceAs the name already suggest reduce method of the array object is used to reduce the array to one single value.For example if you have to add all the elements of an array you can do something like this.var sample = [1, 2, 3] // here we meet again// es5var sum = sample.reduce(function(sum, elem){ return sum + elem;})// es6var sum = sample.reduce((sum, elem) = sum + elem)console.log(sum)reduce takes a callback ( like every function we talked about ).

Okay so yeah we know they are different they have different purpose and goals still we don’t bother to understand them. We use arrays. A lot of arrays. We use arrays to show search lists, items added…
Continue reading “Array Methods Explained : Filter vs Map vs Reduce vs Foreach”

Using Normalizr to organize data in stores — practical guide

Solve the issues with data organizing:  #ReactJS #JavaScript

  • Using Normalizr to organize data in stores — practical guideA React application usually needs some data from the server to be stored locally for immediate use, mainly to be shown on the page.
  • In the response for teachers we get something like this (shape of a server response): [ { students: [ { id, name, studentCourses: [ { studentId, courseId, grande, }, … ], }, … ], courses: [ { id, name, }, … ], }, … ]Here you can read about how to combine data in queries, if you also use Loopback.In this particular case this would spare us two requests, but this is not very useful if we speak about storing on front-end.
  • Secondly, we might need courses inside of a student entity instance, but when we make a query to the server, we don’t include these courses to avoid duplication.To cope with the described issues we can start with Normalizr — a utility that normalizes data with nested objects, just like in our case.
  • If you haven’t used redux-saga in your projects yet, I think this should convince you to do so.The first saga will fetch data:const urls = { teachers: ‘/teachers, students: ‘/students’, courses: ‘/courses’,};export function* fetchModel(model, ids, include) { const url = urls[model]; const where = {id: {inq: ids}}; const filter = {where, include}; const params = {filter}; return yield get({url, params});}The second will store the data:export function* queryModels(modelName, ids, include]) { const singleModelSchema = schema[modelName]; const denormalizedData = yield fetchModel(modelName, ids, include); const normalizedData = normalize(denormalizedData, [singleModelSchema]); const {entities} = normalizedData; yield a reducer will add new pieces of data to the already fetched ones:case ADD_ENTITIES: { const models = action.entities; const newState = cloneDeep(state); return mergeWith(newState, models);}Methods mergeWith and cloneDeep here are from lodash.Having done all that we can query data from server in this manner (selector):export function* fetchTeachers() { yield queryModels(‘teachers’, ids, [ { relation: ‘students’, scope: { include: [‘studentCourses’], } }, { relation: ‘courses’, } ]);}Normalizr uses a normalization schema as described here.Eventually we end up with the state that looks like this: state: { … models: { teachers: {…}, sudents: {…}, courses: {…}, studentCourses: {…}, }, … }This basically is a nice little copy of a part of our database in the store.
  • It is done in queryModels saga and we always know where the fetched data is going to be put.After that we can use it in any page of the app combing it in selectors as required.In our case, if needed, we can get an object for teacher as complicated as this (denormalized data): { students: [ { id, name, studentCourses: […], courses: […], }, … ], courses: [ { id, name, sudents: […], teachers: […], }, … ], }There is also another way.

In one of the projects, we encountered the issues with data organizing. To cope with that we can use Normalizr — a utility that normalizes data with nested objects.
Continue reading “Using Normalizr to organize data in stores — practical guide”