Introduction to React

[noobling]

What we have for our existing website we have made so far is fine be it is very simple. Let's imagine we tried to use the same approach for Facebook what would happen?

• Thousands of lines of code in HTML files
• Large network cost due to large files
• How can hundreds of devs work on a single file?

So what does React do for us?

Some things the React library doesn't directly solve but the React ecosystem does

• Offers a more scalable way of writing web applications
• Compresses our code to minimize network impact. The ideal solution is that we deliver a single HTML, single JavaScript file and a single CSS file
• More efficient web applications
• Ability to have instantly loading web pages (SPA)

What is React?

Its simply just another JavaScript library

the difference is that it is very popular so a community has grown around it and done a lot of awesome stuff with it. The tooling e.g. IDE tools, linting, formatting, dev tools are first class.

In the previous course, you learned about all the DOM operations to create HTML elements. React does that for us so we don't have to write that code. You will notice not all code in React is valid JavaScript. React has done this by implementing their own kind of compiler that interprets our JSX code and parses it and creates the appropriate HTML JS and CSS.

React getting started

1. npx create-react-app demo
2. code demo

create-react-app

This is a library that builds upon the React library by bundling all the necessary modern tools with React to produce a high-quality website. Normally you use this with React because there is a lot of boilerplate configuration that is hard to get right so you definitely don't want to be doing that yourself. It also includes a lot of nice features like hot reloading and creates a development server which serves your app

• Webpack Bundles all your files together and minifies them
• Babel Transpiles your code into cross-browser compatible code
• eslint Enforces opinionated best practice coding rules like no shadow variables
• prettier A powerful code formatter e.g. indents your code with 2 spaces
• jest A test runner
• Node A JavaScript server

Basic React

To build a webpage create components for the website. Components are like HTML elements (same syntax) except they are created by you so essentially you are creating your own HTML elements except they have much more features. Components are generally made up of other components.

Understanding React file structure

• public static assets that are publicly accessible.
  • favicon.ico That thing you see in your browser tab
  • manifest.json tells the browser about your web application and how it should behave
  • index.html The HTML page that is given to the user when they use your app. You react code is injected into this element <div id="root"></div>
• src Your source code (code you write)
  • index.jsThe entry point to your react app. It renders your App component inside the index.html
  • App.js This is the main component you generally will want to put your components inside here
  • index.css/App.css CSS related to your components
• .gitignore Files/folder to not be tracked by git
• package.json specify your libraries here and define your app name
• README.md talk about your app here
• node_modules Third party code
• yarn.lock The exact third party libraries and versions

React components

import React from 'react'

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

export default HelloMessage

Using React component

// In App.js
import HelloMessage from 'HelloMessage'

function App() {
  return (
    <div className="App">
      ...
      <HelloMessage name="David" />
    </div>
  );
}

Routing in React

Use a library called react-router-dom

• <Route path="/users/" component={Users} /> Define the what component the route matches to
• <Link to="/users/">Users</Link> Add a link in the webpage to go to specified route

The cooked this keyword

this refers to an object and that object is the one that is currently executing the code. This is very important to understand. this does not always refer to an object that was created with new on a Class. Sometimes this is undefined and this can cause all sorts of strange bugs.

Let's use React

Specification

1. Existing website is converted into React
2. Substitute all direct DOM operations with React code
3. Import images
4. Deploy your new react app with now follow this guide https://zeit.co/guides/deploying-react-with-now-cra

Example solution

https://github.com/noobling/learn/tree/react-example
https://react-example.nooblingis.now.sh