Crawling Websites in React-Native

  • Normally you would have to set up a server that crawls the target website and turns it into an API that you can use, but when you can access all data from all websites inside your client, you can save time.
  • You want to show all products of a page and a way to load the next, but you want it in our own data structure, so you can build your own UI around it.
  • The data is inside the HTML, but it’s a string.
  • The naive approach would be to use a regular expression to parse the string and get the data, but HTML doesn’t have a regular grammar so that wouldn’t work.
  • After the data has been extracted from the HTML, we can start to reshape it for our use-cases.

From the dev.to() community. Sharing ideas that makes us all better developers.
Continue reading “Crawling Websites in React-Native”

With styled-components into the future – 💅 styled-components – Medium

With styled-components into the future  #styledcomponents #react #cssinjs #css #reactjs

  • Those remain the same and intact.While this sounds like no more can be achieved from a library that was mostly about best practices and common patterns in CSS, we are still in a position to drive change in the community.And this is because of the ecosystem that people have created…
  • Even more so with our new docs that we’ve published a few months ago.But the real question is, what makes it the library you know and love?There’s a lot of great content and talks from both Max and Glen, so if you’re new to what the ideas of the library are,…
  • [1]Then we have to transform the CSS to be able to inject it [2], and finally inject your CSS into the stylesheet, at the position that we’ve marked earlier.In v2 and onwards we’ve focused a lot on optimising all of the different steps involved here for performance, but one step…
  • The idea that becomes increasingly important here is, that we can’t build a library that works for some special use cases, but what we can build is a CSS infrastructure that allows you to change the CSS yourself.Let’s see how we could approach this.The interesting thing is that with v1…
  • We can run our transformations during Babel’s transpilation, or during build-time in general.We can build a CSS-in-JS pipeline!This would result in nothing being shipped to the runtime, and as long as we can provide an “opt-in” system, you would still be able to decide whether you’d like to ship the…

styled-components has changed a lot in its past. And we are not even done yet!
Continue reading “With styled-components into the future – đź’… styled-components – Medium”

Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.

  • In this tutorial, I’m going to show you how to create a simple Sticky Notes app using React, Redux, Selectors, Redux Sagas, a little bit of Node, and Cosmic JS.
  • For the sake of understanding how to consume Restful API’s, this tutorial will show how to make AJAX (XHR) requests to the Cosmic JS API in order to retrieve, add, update, and delete data/media in our Cosmic JS Buckets.
  • The bundle.js file located in our dist directory is what our webpack.config file will spit out after bundling all of our react components.
  • Request uses whatwg-fetch to hit AJAX requests to the Cosmic JS API.
  • This util is used to call those endpoints which are not present in the Cosmic JS package e.g deleteMedia and searchObjects based on filters – – Cosmic JS uses cosmicjs package to hit AJAX request to Cosmic API.

Cosmic JS is a cloud-hosted content platform that offers a flexible and intuitive CMS API. Build websites and applications with more freedom and manage content easier. Get started for Free.
Continue reading “Cosmic JS Blog Stay tuned for feature roll-outs, news and updates as we continue to help you manage content for your websites and applications faster and easier.”

When to use Component or PureComponent – codeburst

When to use Component or PureComponent:  #ReactJS

  • Thus, the component will re-render by default whenever shouldComponentUpdate is called.Shallow Comparison 101When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.Never MUTATEYou’ve probably been hearing not to mutate objects and arrays in props and state.
  • Although the values have changed upstream, the child would be comparing the reference to the previous props and not detect a difference.Instead, return new objects when you make a change by either leveraging es6 for object and array spreading or using a library to enforce immutability.Are there a performance issues?Comparing primitives and object references is an incredibly cheap operation.
  • If you have a list of child objects and one of the children updates, doing a check on their props and state is lightning fast compared to the cost of re-rendering each one.Other ways you could slip upDon’t bind values in functions in renderSay you have a list of items, each passing a unique parameter to parent method.
  • CommentItem likeComment={this.likeComment} userID={user.id} /Then in the child component create a class method that will reference its props:class CommentItem extends PureComponent { … handleLike() { } …}Don’t derive data in the render methodConsider a list of articles from which your profile component will display the user’s 10 most liked pieces.render() { const { posts } = this.props const topTen = posts.sort((a, b) = b.likes – a.likes).
  • slice(0, 9) return //…}topTen will have a brand new reference each time the component re-renders, even if posts hasn’t changed and the derived data is the same.

I switched to using PureComponent awhile back on the premise of it being a more performant version of Component. This turned out to be true, but the performance gains come with a few strings attached…
Continue reading “When to use Component or PureComponent – codeburst”

Beginner’s guide to react/redux —painting a mental model

  • I highly recommend anyone starting out with Redux to read the core concepts outlined in the official documentation.Long story short, Redux application has a plain object, known as store, which serves as data model for your app.
  • For example, for a list of articles, I can have an article state that looks like this:state = { articles: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, fetching articles is an action that looks that this:{ type: ‘ARTICLES_FETCHED’, payload: [{ “id”: 314, “title”: “6 innovative apps utilizing the ethereum network”, “source”: “Investopedia‎”, “link”: “date”: “1500523200”, “type”: “msm” }, { “id”: 893, “title”: “what is plasma and how will it strengthen…”, “source”: “Investopedia‎”, “link”: “date”: “1502856000”, “type”: “msm” },.
  • In our article example, the reducer looks like this:const initialState = { articlesById: null,}export default function(state = initialState, action) { switch (action.type) { case types.ARTICLES_FETCHED: return { …state, articlesById: action.articlesById } default: return initialState }}To summarize the basic ideas of Redux:it describes state as plain objects, and store (global state) by merging all the states in your app.it describes changes to the app as plain objects.it uses pure functions to handle changes.The redux API then bridges your redux logics with react views while providing some utilities to compose states.Say we send a request to a remote server and fetch some articles.
  • The reducer evaluates the action and store the payload articles in the state.

Disclaimer: This article is written by a beginner trying to comb through new concepts she just learned. React/Redux is the hottest frontend frameworks these day. If you google the term Redux diagram…
Continue reading “Beginner’s guide to react/redux —painting a mental model”

When to use Component or PureComponent – codeburst

  • Thus, the component will re-render by default whenever shouldComponentUpdate is called.Shallow Comparison 101When comparing previous props and state to next, a shallow comparison will check that primitives have the same value (eg, 1 equals 1 or that true equals true) and that the references are the same between more complex javascript values like objects and arrays.Never MUTATEYou’ve probably been hearing not to mutate objects and arrays in props and state.
  • Although the values have changed upstream, the child would be comparing the reference to the previous props and not detect a difference.Instead, return new objects when you make a change by either leveraging es6 for object and array spreading or using a library to enforce immutability.Are there a performance issues?Comparing primitives and object references is an incredibly cheap operation.
  • If you have a list of child objects and one of the children updates, doing a check on their props and state is lightning fast compared to the cost of re-rendering each one.Other ways you could slip upDon’t bind values in functions in renderSay you have a list of items, each passing a unique parameter to parent method.
  • CommentItem likeComment={this.likeComment} userID={user.id} /Then in the child component create a class method that will reference its props:class CommentItem extends PureComponent { … handleLike() { } …}Don’t derive data in the render methodConsider a list of articles from which your profile component will display the user’s 10 most liked pieces.render() { const { posts } = this.props const topTen = posts.sort((a, b) = b.likes – a.likes).
  • slice(0, 9) return //…}topTen will have a brand new reference each time the component re-renders, even if posts hasn’t changed and the derived data is the same.

I switched to using PureComponent awhile back on the premise of it being a more performant version of Component. This turned out to be true, but the performance gains come with a few strings attached…
Continue reading “When to use Component or PureComponent – codeburst”

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”