React 5-Minute Refresher🚀

React Brief History

  • Back in the day, websites had synchronous tasks from the backend, and refreshed the page every time new data was needed.
  • jQuery took care of complexities and also worked in all browsers
  • Backbone.js allowed to organize these js files.
  • SPA was born out of working more and more with the DOM.
  • Angular was born out of this. It had containers that wrap a project. It also had an MVC pattern.
  • 2013 React was released by Facebook. 2014 Angular was also rewritten as response.

React Core Principles

  • React virtual DOM (don’t touch the DOM). React will do it.
  • Imperative Programming: Changing directly the DOM through JS (e.g. getElementById). This approach has that it becomes difficult to point and identify relationships between events.
  • Declarative Programming: Declares to React what the state or data should look like. React will make the decision of how to implement it. This state is one big JS object. Resulting in less complexity, faster developer times.
  • Components — Put together they form bigger components and form the whole app. You can copy these components and reuse them. Components are built with JSX. Reusable components e.g. React.bootstrap, Blueprint etc.
  • Unidirectional Data Flow — Anytime we want something to change ‘state’ has to change. Data flows one way. State changes and trickle down. Data can’t move up. This could allow for easier debugging. Angular is opposite here.
  • React is not a framework — Angular is a framework and gives you everything. React is a library and lets you use any tools you want from outside.
  • React Everywhere — React Native.React Desktop and React 360 (VR)

Create-React -App

  • Run as as npx create-react-app myAppName
  • Create React App is CLI created so we can build fast React apps.
  • npx allows you to build using Create React App without globally installing it first.
  • react-scripts does things for us so we don't worry about webpack nor Babel.
  • When we do build on React project, it will take all code inside src and bring it to public folder.
  • Babel will make sure that the JS files will work on all browser.
  • Webpack is a module bundler. Let us write modular code. It takes all our javascript and optimize it for us.
  • React library allows us to write JSX. ReactDOM like the virtual DOM which interacts with the actual DOM.
  • You have all scripts for webpack and build, start and test scripts.
  • It’s a lot of code, so not recommended to eject. It is like a lot of competing with developers that work full time on this. They keep up-to-date with industry trends.

Expanding On Key Concepts

  1. constructor(): Called first. Allows the class to have access to lifecycle components. Here is where you declare your state.
  2. render(): Render is called next to display HTML.
  3. componentDidMount(): This lifecycle component when component is mounted good when calling fetch requests. This will cause a re-render so render() gets called again. This runs every time you refresh the page.
  4. componentDidUpdate: Any updates brings your component to updating phase. React here selectively changes parts of the DOM and it doesn't remount the component. componentDidUpdate is called after update. Here you can do additional fetch calls as you compare prev and new props. Read more.
  • shouldComponentUpdate(): It checks the props and can decide whether or not update. This is done for optimization read here to learn more. You can also consider using React Pure Components, read here.
  • componentWillUnmount(): Called when a component is being removed from the DOM. This is where cleanup can be done, such as memory leaks that JS garbage collection has not picked up. Read docs to learn more.

So how, can I be a great React developer?

  • Decide on Components: What is a component and how you will divide the app.
  • Decide on state and where it lives.
  • Know what changes when state changes.

Resources

--

--

--

Social Entrepreneur and Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top 5 JavaScript Array Methods

Roman Number to Decimal Converter App

Svelte vs. React vs. Angular — Why Svelte is more sustainable

Angular, React and Svelte’s logo

Chrome Extension Development with Nx Workspace & Angular v13 — Part 4

Web Application for Docker

Micro-frontends resources

JavaScript Best Practices — Useless Operations and Deprecated Statements

Boost Application Performance with Lazy Loading in Angular

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Felipe Bohorquez

Felipe Bohorquez

Social Entrepreneur and Software Engineer

More from Medium

React JS Components

Client-Side Routing — React

How to do a Modal in React: the HTML first approach

What’s new in React Router V6