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”

React Fundamentals with Wes Bos Tickets, Fri, Sep 8, 2017 at 9:00 AM

  • This workshop is aimed at understanding the fundamentals of React.
  • Throughout the day, participants will work to build an application by incrementally learning each fundamental concept in React.
  • By taking the time to implement it into an application, participants will get a hands-on approach to understanding why and how React works.
  • Refunds for HackerYou workshops will only be given if we are notified 7 days prior to the event.

Eventbrite – HackerYou presents React Fundamentals with Wes Bos – Friday, September 8, 2017 at HackerYou, Toronto, ON. Find event and ticket information.
Continue reading “React Fundamentals with Wes Bos Tickets, Fri, Sep 8, 2017 at 9:00 AM”

Extracting Logic from React Components

Extracting Logic from #ReactJS Components:  by @Jack_Franklin #Javascript

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

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”