React 101: A Quick Intro

If you're curious about what makes React the most popular JavaScript framework, or feel hesitant about learning React, this article is for you. We'll go through React fundamentals in simple terms covering the following topics:

• React in a Nutshell
• Key Concepts of React
• Create-react-app
• React Components
• React Props
• React State

In this article, it's assumed you know the basics and concepts of JavaScript.

React in a nutshell

React (also known as React.js or ReactJS) is a JavaScript framework created by Jordan Walke and maintained by a small team part of Facebook, led by Dan Abramov in London. React is open source and you can contribute to their GitHub repository.

It's used for building user interfaces specifically for single-page applications, that are fast to load and faster to build. React is a component-based framework with the core principle of reusing UI components.

Instead of creating DOM elements, we create React elements. react-dom will handle the events and turn them into DOM elements. This is done through React components.
React isolates the components, and re-renders that specific component which makes an app/website incredibly faster to render.

The 3 key concepts of React are:

• Passing data (unidirectional data flow)
• Returning data
• Return JSX

Unidirectional Data Flow

In React, data can only flow in one direction. As the underlying data changes, the view will update, but in order for the view layer to affect the data, an action must be triggered. There is noautomatic updating. This helps to reduce overhead and makes managing data simpler.

A component can manage its own data (known asstate), or can have data passed to it from another component (known asprops). When eitherstateorpropschanges, React will re-render the component which in turn updates the view.

Virtual DOM

React employs avirtual DOM, meaning it has a copy of the DOM in memory at all times. When the view needs to be updated, React will update this virtual DOM first. This is easy to do, because it is already in memory.

Once the Virtual DOM has been updated, React checks to see what the differences are between the Virtual DOM and the actual DOM. React can then just update the DOM nodes that have changed.
This approach is unique to React and is what made it so much quicker at rendering than its rivals.

JSX

JSXis a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

What does syntax extension mean?
In this case, it means that JSX is not valid JavaScript. Web browsers cant read it!
If a JavaScript file contains JSX code, then that file will have to becompiled. That means that before the file reaches a web browser, aJSX compilerwill translate any JSX into regular JavaScript.

Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript! JSX doesnt add numbers - it reads them as text, just like HTML.
You need a way to write code that says, Even though I am located in between JSX tags, treat me like ordinary JavaScript and not like JSX.
You can do this by wrapping your code incurly braces: { your code goes here }

In JSX, you need to add slashes to all of the self-closing tags, ie: <Header /> <Home />

Event Listeners in JSX

JSX elements can haveevent listeners, just like HTML elements. Programming in React means constantly working with event listeners.
You create an event listener by giving a JSX element a specialattribute. Heres an example:

<img onClick={myFunc} />

An event listener attributesnameshould be something likeonClickoronMouseOver: the word'on', plus the type of event that youre listening for. You can see a list of valid event nameshere.
An event listener attributesvalueshould be a function. The above example would only work ifmyFuncwere a valid function that had been defined elsewhere, like so:

function myFunc() {alert('Good morning!');}

<img onClick={myFunc} />

Note that in HTML, event listenernamesare written in all lowercase, such asclickormousemove. In JSX, event listener names are written in camelCase, such asonClickoronMouseOver.

Create-react-app

Create-react-app is a NPM package that installs all necessary packages to create a React application.
Using create-react-app sets up your environment with all we need.

It comes bundled with a few features including:
ESlint: to polish your code as you write it
Jest: a testing library, for testing your code

Because its an npm package, its executed only in the terminal, as such:

npx create-react-app your-react-app

It also accepts flags to tailor the template to your needs, ie npx create-react-app --typescript. This will create you a TypeScript project.

npx is the same as npm, but it installs the latest version of npm.

You must import React from react in each component file.
At the end, you export each new component you created:

function Hello () { return <h1>Hello {username}!</h1>;}export default Hello;

Or you can instantly export it when creating the function such as:

export default function Hello () { return <h1>Hello {username}!</h1>;}

Then you import the created component to the file you want to use it in.

Package.json comes with create-react-app and it defines dependencies. Dependencies are all the packages that need to be installed for it to run. For debugging, we have scripts, and you can add lint:fix for example. Package-lock.json defines more packages.
They both get installed when you run npm install.

The Public folder holds your HTML file. It takes the usual HTML boilerplate and <div id=root></div>.
We build our app, eg: app.js file, in the Src folder.

React components

As mentioned earlier, React is a component-based framework, which means components are created with the purpose of being reused throughout the UI.
You can use several functions to create different reusable components. You basically pass in functions between files, so we can pass values onto different files.

Components are like JavaScript functions, with a different way of executing them. Components can be created with function declarations or arrow functions.

Components must be exported: export default ComponentName

Then, we import the component to the file where we want to use it: import ComponentName from ./components/ComponentName

A component lives on a separate file. The module is the file that holds one of more components.

A component returns a piece of JSX. JSX, as explained earlier, is the syntax taken by React.

We can have the bigger components in the main App.js file and the smaller components in a components folder. But the structure is ultimately entirely up to the developer.

This is a React component:

function MyComponent (props) {  return (    <>     <h1>{props.greeting}</h1>    </>)};

And this is how we call a React component:

<MyComponent greeting=Hello World />

For example, passing a variable {myVariable}:

const myVariable = This is a variable

Then you call it by using {myVariable} in JSX.

Fragment
When you have more than one line of code to return, you wrap the content of a function inside a fragment: <> </>
It replicates a div-like wrapper where you store the code block within your components.

React props

This is the React equivalent to function parameters that are passed into functions. Best practice is to call them props when writing a component. You pass a prop. This means you pass in the equivalent to a JavaScript argument into a component. They are grouped together into an object by default.
React naturally takes all the arguments and wraps them in an object. The object is called props and you can access it by using dot notation, ie: props.name, props.age.

Props can handle functions and values, and they can have default values (ie, you can set the default to be whatever you want it to be!).
Props can be destructured in components for better readability.

React state

React State is a description of the status of the component and its features. It's a built-in React object that is used to contain data or information about the component. A component's state can change over time; whenever it changes, the component re-renders.
React developers usually refer to setting state, where you can write methods inside your component. It basically means controlling the state of a component and resets it for each time you call it/use it.

Value is a variable so it always returns a state.

Since the introduction of React Hooks (in 2018) we can use React.useState( ). It takes an initial value when it renders, which can also take the value of when the value is set/changed.

I hope this clarifies a little more about the intricacies of React! I've collated some great free resources in the list below:

Glitch: React Starter Kit - A free, 5-part video course with interactive code examples that will help you learn React.
Codecademy: React 101 - Codecademys introductory course for React.
Egghead.io: Start Learning React - This series will explore the basic fundamentals of React to get you started.
React Crash Course 2018 - A beginner-friendly crash course through the most important React topics.
Egghead.io: The Beginners Guide to ReactJS - Free course for React newbies and those looking to get a better understanding of React fundamentals.
Free React Bootcamp - Recordings from three days of a free online React bootcamp.
Scrimba: Learn React for free - 48 hands-on video tutorials building react apps.