React

Check out the project screenshots!

Why use React ?

• flexibility
• community support
• corporate commitment(Facebook has employed full time staff)
• testability
• separation of concerns

Frameworks like Vue, Angular, Ember are template centric. They tend to make HTML more powerful by adding Javascript like HTML syntax in them. While React is Javascript centric. It increases the power of JS by allowing you to create HTML elements with the help of JS.

Now if you are worried about Separation of concerns : Why is HTML, JS and CSS not in separate files? This is because React implements the philosophy of separation of concerns in a totally different way - by allowing you to create different elements in different files and putting HTML, CSS and JS all in the same file. Well, you have the option to put CSS in a different file as well. This makes it easier to break your webpage into small reusable components which can be added together like a set of russian dolls to form a larger component and become a part of the webpage.

A side effect of this method is that it results in the creation of large number of JS modules which needs to be all included in the webage. Here, webpack comes to rescue by bundling all the different JS modules into one big JS file which you can include in the webpage. Or you can even split the file into smaller chunks.

Ways to convert HTML to JSX

1. use ctrl+F (Find and replace)
2. use a html to jsx online compiler
3. use htmltojsx npm package

Old vs New React

ES class vs React Class

Why avoid mutating the state object in React ?

In javascript, objects and arrays are passed by reference. This means

let x = [1,2,3];
let y = x;
/* Here y and x both point to the same  memory location */
y.push(4);
console.log(x); // outputs [1,2,3,4]

An article on immutability.

PluralSight course on immutabilty libraries.

NOTE : Screenshots taken from this Pluralsight course.

Project Screenshots

• Play Nine Game

---

• Amazon Layout clone

Items page

Cart Page

---

• TweetBox

---

• Youtube layout Clone

---

• BookList using Redux

A few screenshots of the projects made using ReactJS.

---

React Boilerplates

• react-slingshot : React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in.

• create-react-app : Set up a modern web app by running one command. https://facebook.github.io/create-react-app

• react-bolierplate : A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. https://www.reactboilerplate.com

---

2017-2018 @kryptokinght