React Basics For Beginners

React is a powerful, component-based JavaScript library that allows efficient building of large applications with rapidly changing data.

There's a ton to learn with React, but here's some of the basics to get you familiar with the framework.

Benefits
Basics
JSX
Components
Props

Benefits

Virtual DOM

React is efficient because it employs the use of a Virtual DOM
Typical DOM manipulation is slow and inefficient as it requires rebuilding of the entire DOM for each update (for instance, if you have a list of 10 items, update one item, it updates the entire list rather than only that item).
A Virtual DOM, however, acts as a lightweight representation of the real DOM.
All updates are instead made to the Virtual DOM, which then compares to a snapshot of the Virtual DOM prior to the update, in a process called "diffing". Through diffing, React can know exactly which DOM objects have changed, and then update only those objects on the real DOM, which in turn updates the user interface.
This greatly increases the speed of processing large data changes.

Other Functionality

Webpack functionality is taken care of by default with React. Webpack functionality is essentially used to minify and then bundle Javascript files together to allow the application to load more efficiently.
Babel functionality is also built in with React, which allows Javascript to be written in ES6, ES7, or ES8 and converts it to ES5 which all modern browsers can understand.

Basics

To create a React application, run npx create-react-app my-app-name

npx is not a typo. It is a package runner tool that comes with npm.

There is no need for a server.js file with React. Instead, run npm start to start the application.
Nearly the entirity of the code is written within the /src directory (with the exception of adding fonts and other CDNs such as Bootstrap or jQuery to the <head> tag in index.html).

Rendering

/public/index.html contains only one line of native HTML: <div id="root"></div>. The entire virtual DOM is rendered in this element.
This is done in index.js employing ReactDOM.render(), which is considered the entry point:

ReactDOM.render(
    // What to render
    <App />,
    // Where to render it
    document.getELementbyId("root")
);

<App /> refers to App.js. This is where you can begin building the app with your components.

JSX

JSX (JavaScript XML) is a syntax extension to JavaScript which allows us to essentially write and visualize HTML in JS.

JSX is not specific to React, or required in React, but it makes things a lot easier. It is using React.createElement() behind the scenes.

JavaScript expressions are written in {}. With the exception of if/else, switch statements, and for loops that must be written in methods in class-based components, or using "hooks" (advanced concept).
"Class" is a reserved keyword in JavaScript. All instances of the "class" property must be updated to className in JSX.
Any self-closing tags in HTML (such as <img> or <input>) need to be updated to a closing tag in JSX: <tag / >.
Comments in JSX can be written as {/* comment here */}.
Only one element can be returned by return() at a time. Can wrap in an empty <div> container or use a fragment <> that will not add bloat to the DOM.

Inline Styling in JSX

Style property must be an object rather than a string like in HTML
All property names are camelCase, and values are strings
Numbers default to "pixels" (eg. height, margin, padding, etc.)
Styles are passed in as a prop

Exmaple:

const styles = {
  card: {
    margin: 20,
    background: "#e8eaf6"
  },
  heading: {
    background: "#9a74db",
    minHeight: 50,
    lineHeight: 3.5,
    fontSize: "1.2rem",
    color: "white",
    padding: "0 20px"
  }
};

function Navbar() {
  return (
    <div style={styles.card}>
      <div style={styles.heading}>Home</div>
    </div>
  );
}

Components

Components are essentially reusable functions.
Each component must import react:

import React from "react"

Each component must include export default componentName to be used in other components, similar to the concept of module.exports().
There are two ways to write functions in components:

Functional Components - these are just plain JavaScript functions and are stateless (unless you're using "hooks" which I don't cover here). They are easier to read and test than their Class counterparts and require less code.

Typically functions native to React are written with regular functions:

function componentName(){
    return ( JSX here );
}

Otherwise, functions should be written as arrow functions:

const componentName = () => {
    return ( JSX here );
}

Arrow functions are important due to the scope of this: In this case, this is not restricted to the scope of the function itself but rather belongs to the outside object.

Class Components - The below is identical to the above functional components. However, Classes allow the use of setState()

class componentName extends React.Component {
    render() {
        ( JSX Here )
    }
}

Props

Props are like inputs into components which are like functions, allowing you to pass data from component to component.
Props can be an arbitrary property name passed into the component:

<componentName propertyName=value />

The value can be accessed in the component via the props object:

function componentName(props) {
return(
   <div>
      <span>{props.propertyName}</span>
   </div>
 )
}

Props pass data from component to component in unidirectional flow (parent > child)
Props can be passed through to more child components in a process called props drilling

There are many more advanced concepts for using React like State, Hooks, Context, and more. These are just the basics to get you started!