intro to react pt. 1
Tags: javascript, react
Published: 2021-10-06 15:41:59

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?**
![react infographic 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxyyu56rb1xbnl8y4w5v.png)
![react infographic 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0d6fzdj90rutcveg6o8.jpg)
Below is an example of a React program. As you can see the UI is seamless and organized. Imagine the possibilities!  
<img width="100%" style="width:100%" src="https://media.giphy.com/media/c5hT4dktaaAr1wxUx2/giphy.gif">
**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](https://reactjs.org/docs/create-a-new-react-app.html) 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.
![react 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzwlblzx3bkhjaa9fu9l.png)

NOTE: I'll be using [Yarn](https://classic.yarnpkg.com/en/docs/getting-started), 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. 
![react 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3d2sety64r0qua7g6rmj.png). 

Next, to view the program in a browser I'm going to run the following code in the command line. 
```
yarn start
```
![react 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4njuhcfsmagqoqwey76q.png)
Awesome, lets go back to the text editor and check out `index.js`.
![react 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2mxu1sh10u5r8iavguk.png)  
The first couple of lines seem like simple code but what do they mean? In [React](https://www.geeksforgeeks.org/reactjs-importing-exporting/) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/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.
![react 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eobrynqx1qpmnqb52jg.png) The [react-dom](https://reactjs.org/docs/react-dom.html#gatsby-focus-wrapper) 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 `import`ed the `react-dom` API into our program. 
```
ReactDOM.render(

);
```
[ReactDOM.render()](https://reactjs.org/docs/react-dom.html#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](https://reactjs.org/docs/rendering-elements.html) which is a plain object describing a [component](https://reactjs.org/docs/components-and-props.html) instance or DOM node and its desired properties. Second, [Applications](https://reactjs.org/docs/rendering-elements.html) 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. 
![react 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arobq83jbnk5royf1e9o.png)
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! 
![Alt 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydp2w13vlte22e4cnhg7.png)

RESOURCES
https://reactjs.org/docs/hello-world.html
https://www.c-sharpcorner.com/article/what-and-why-reactjs/
https://reactjs.org/docs/getting-started.html
https://classic.yarnpkg.com/en/docs/getting-started
https://medium.com/@gabrielrasdale/react-react-dom-eli5-db2101e614e5
https://www.taniarascia.com/getting-started-with-react/