Working with React

React

These are excerpts from a Pluralsight Webinar on React.

React is just a View library but we can still build large scale apps.

Angular and ember are full frameworks.

Angular - brings JavaScript to HTML - eg using ngfor ngif inside html tags

React is the other way around - brings HTML tags inside JavaScript!!

If state is this..then make this html be there or not

jQuery is used for DOM manipulation, add classes, event listeners and remove them etc.

it has built in AJAX, while React is just let us change states and re-render the screen only the parts that have changes...very very performant.

What is Flux and what is Redux?

Flux is a very abstract design pattern - for them MVC wasn't scalable anymore in facebook. Open source project.

Flux is very abstract and just a design pattern but can have library (Redux) that implements Flux.

Redux adds more to the design pattern that Flux suggested in its implementation.

Without using Flux, you can still write with React alone.

when writing larger apps, you will naturally run into design patterns that you want to use and that is where Flux and Redux comes in.

start learning with React and writing React components first.

Better to use React's own synthetic events, but we can also use jquery for that.

React now works with all browsers.

Diffing happens before rendering but actual DOM is changed.

For AJAX with React, recommended FETCH or AXIOS apis

No need for templating engines, as REACT comes with its own built in templating baked into the library.

Understand life cycle methods for React to understand it better.

How to deal with different CSS styles in React.

Read Pluralsight training CSS Styling with React to compare different methods of styling.

We can completely create and server side render React components from the server side, it is possible and obviously better performant but more complex.

Node and Express are back end technologies that you can use for server side rendering.

How is binding property to a state different  from 2 way data binding.

Angular is listening for browser events - happens outside of development workflow. So it detects and binds.

In React it is one way - so we can tell when to update the DOM when the state changes. This is a simpler model for development.

React doesn't include a client-side routing - can install a npm package React-routing??

When things become complex, look at Redux for routing.

React-Native - is for building native apps and running mobile apps.

React will work well with .NET. Apparently even can do server-side rendering with .NET!

By and large anything that serves a RESTFul API and returns JSON, we can use React unless we are trying to do some complex server side rendering.

WebPack is popular environment for building React that gives you a bunch of different things like Module loading etc.

You could just build React and use Gulp + Browserify instead though.

For compiling multiple components, it is better to use one component per file. Say use ES2015 Module Loader to aid that.

Babel can be used to transpile into JavaScript