intro to react pt. 1

#javascript #react

Welcome to this weeks blog entry where I'll provide you a high level introduction to React by creating a program. Lets get to it!

WHAT IS REACT?

Below is an example of a React program. As you can see the UI is seamless and organized. Imagine the possibilities!

CREATE REACT APP
The first thing I want to do is create a new React app. How would I do this? There are various ways to solve this problem and for the purpose of this entry I'm going to run the following code in my terminal.

npx create-react-app react-example

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
Once the new React app is finished installing you will see something like the image below.

NOTE: I'll be using Yarn, a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world.
Now that I've created a new React program I'm going to open it up in my text editor and you'll be able to see all of the newly created files.
.

Next, to view the program in a browser I'm going to run the following code in the command line.

yarn start

Awesome, lets go back to the text editor and check out index.js.

The first couple of lines seem like simple code but what do they mean? In React we use the keywords import and from to import a particular module or a named parameter.

import React from 'react';
import ReactDOM from 'react-dom';

The import statement is used to import read only live bindings which are exported by another module.
To summarize, I'm using both the import and from keywords to import React and ReactDOM into my program.
The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to.
methods provided by the react-dom api
render()
hydrate()
unmountComponentAtNode()
findDOMNode()
createPortal()
Next, you'll see code similar to the example below. Remember, we have access to render() because we imported the react-dom API into our program.

ReactDOM.render(

);

ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called.
Awesome, let's start going over what is inside render()

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <App />
  document.getElementById('root') // We call this a “root” DOM node because everything inside it will be managed by React DOM.
);

First, there is an App element which is a plain object describing a component instance or DOM node and its desired properties. Second, Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
Sweet, lets go ahead and check out the App component being referenced! To do that head over to the directory in your text editor and go to the App.js file.

This is the file that is holding the UI logic displayed in the browser and where I'm going to end this entry. Next week, I'll dive deeper into Components, Elements and JSX!