react redux

React-redux makes it easier to pass these states from one component to another irrespective of their position in the component tree and hence prevents the complexity of the application.

When a react application holds various components in need of state from other components it becomes difficult to realize where the state should reside among these components to make it easier to maintain. React-redux provides a store which makes the state inside components easier to maintain. Along with stores, react-redux introduces actions and reducers which work simultaneously with stores to make the state more predictable. The working of the features in react-redux is explained below:

… full article

distribute react application

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents

… full article

another option will be to install react into visual studio, as explained here:

Using react inside visual studio

More topics covered:

• codepen
• codepen redux: https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.js
• ajax inside redux
• react provider
• npm install redux react-redux
• update react reference in visual studio

Links:

• Class code: codepen code demo
• Class code: redux store
• Class code: redux with ajax
• Codepen home page
• Lesson Summary Video!

react router

React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.
By preventing a page refresh, and using Router or Link, the flash of a white screen or blank page is prevented. This is one increasingly common way of having a more seamless user experience. React router also allows the user to utilize browser functionality like the back button and the refresh page while maintaining the correct view of the application.

react-router-dom
It contains the DOM bindings for React Router. In other words, the router components for websites

full example

High order component

A higher-order component (HOC) is an advanced technique in React for reusing component logic. Concretely, a higher-order component is a function that takes a component and returns a new component. Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

… full article

More topics covered:

• active css
• cloudflare css
• HOC: super-charge
• card-content

Links:

• Class code: react router demo
• Lesson Summary Video!

CSS react

CSS Stylesheet:

Inline styling:

… full article

Component Lifecycle

Each component has several “lifecycle methods” that you can use to run code at particular times in the process. Methods prefixed with will are called right before something happens, and methods prefixed with did are called right after something happens

Examples:

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

… full article

Ajax

You can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX, and the browser built-in window.fetch.

You should populate data with AJAX calls in the componentDidMount lifecycle method. This is so you can use setState to update your component when the data is retrieved.

… full article

More topics covered:

• Modify css each second
• lifecycle – loops
• fetch vs axios
• ajax result to setState

Links:

• Class code: react css examples
• Class code: react ajax example
• Lesson Summary Video!

Lists in react

use Array’s built-in map function to create a new array that has the same number of elements, and where each element is the result of calling the function you provide

You might’ve noticed I used the item’s array index as the key prop in both examples above. This is actually not a great idea in all cases, and I’ll tell you why.

(The best choice for a key is an item’s unique ID, if it has one.)

React relies on the key to identify items in the list. Remember React uses a virtual DOM, and it only redraws the components that changed since the last render.

The first time a component like IdiomaticReactList is rendered, React will see that you want to render a bunch of items, and it will create DOM nodes for them.

The next time that component renders, React will say, “I already have some list items on screen – are these ones different?” It will avoid recreating DOM nodes if it can tell that the items are the same.

But here’s the important bit: React can’t tell with a simple equality check, because every time a JSX element is created, that’s a brand new object, unequal to the old one.

So that’s where the key prop comes in. React can look at the key and know that, yes, even though this <Item> is not strictly === to the old <Item>, it actually is the same because the keys are the same.

This leads to a couple rules for keys. They must be:

• Unique – Every item in the list must have a unique key. So, person.firstName would be a bad choice, for example (might not be unique).

and

• Permanent – An item’s key must not change between re-renders, unless that item is different. So, Math.random is a bad choice for a key (it’ll change every time… and it might not be unique (slim chance of that, though))

… full article

Container vs Presentational Components

The main thing to keep in mind is that container components and presentational components go together when setting up a React app component hierarchy. React apps will almost always need some components that take responsibility for the way things work, and components for displaying actual data. Where presentational components don’t manage state, container components do. Where presentational components are usually children in the app component hierarchy, container components are usually the parents of presentational components.

… full article

More topics covered:

• list – condition
• list – add
• list – remove
• pass functions as an arguments

Links:

• Class code: react simple list
• Class code: react more lists
• Lesson Summary Video!

Welcome to React!

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API; Redux, React Router and axios are respective examples of such libraries.

React home page – link

Who is the most popular framework ? – link

script src crossorigin

The crossorigin attribute should only be used if we care about getting error information for the script being loaded. Since accessing this information requires a CORS check, the Access-Control-Allow-Origin header must be present on the resource for it to be loaded.

script src crossorigin – MDN

Node JS – export, require

The exports keyword gives you the chance to “export” your objects and methods. Let’s do an example:

In the code below, we are exporting the area and circumference functions. We defined the PI constant, but this is only accessible within the module. Only the elements associated with exports are available outside the module.

So, we can consume it using require in another file like follows:Noticed that this time we prefix the module name with ./. That indicates that the module is a local file.

… full article

Node JS – Express

Express.js, or simply Express, is a web application framework for Node.js, It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js. express provides a robust set of features for web and mobile applications.

Express home page – link

More topics covered:

• React- modify state property
• React developer tools for chrome
• React- place html in js field
• React- data-binding to input
• React- handle submit
• using vs code extensions
• Live server

Links:

• Class code: nodejs import export
• Class code: nodejs express
• Class code: react intro
• Class code: react state
• Class code: react button click
• Class code: react events
• Class code: react text box submit
• React pdf
• React developer tools download
• React – supported events
• unpkg – home page
• Lesson Summary Video!