Becoming Friends with React JS
Tags: javascript, react
Published: 2020-07-13 04:40:00

##Frontend Frameworks
There are a variety of different frontend frameworks that can be used to develop your webpages and applications. There are countless options and its often confusing and difficult to decide on which framework is best for you. Most of the time it comes down to personal preference, but some of the most accessible ones are Backbone.js, Angular.js, and React.js. These three are the ones that I'm most familiar with and have spent time using. Each have their own advantages and disadvantages, but its always good to know a variety of different frameworks because you might not always have the liberty to decide which one you will be working with. Today we'll be taking a look at React and how to use it to implement a very basic Friends List in the web browser. 

![React img](https://www.freecodecamp.org/news/content/images/size/w2000/2020/02/Ekran-Resmi-2019-11-18-18.08.13.png)

##What is React.js? 
React.js or just React, as its commonly referred to, is an open-source software that was developed by the folks at Facebook back in 2011. Originally utilized on Facebook and Instagram, it was released to the public in 2013. Since then it has gained a lot of support from individuals around the development community. Facebook and Instagram are some of the largest social media platforms to date, and the fact that they use React shows just how powerful this framework is. Instagram has 500 million active users and React handles all of that web traffic with ease (well most of the time). As of today, React is one of the most popular frontend frameworks and a really great one to get familiar with, so let's take a small peek at what React can do and how to go about using it!

##How to use React
One of the most important aspects of React is the React Component. In React it is used to create the component aspects in the webpage or application. One of the great features of React is the utilization of ES6 syntax when creating new components. Every component created will extend from the React Component. Before we dive into how we can create a React component, let's setup the foundation of our Friends List. 


```javascript
const Friends = () => {
    return (
      <div>
      Friends List
      <FriendsList friends={['Ross', 'Rachel', 'Joey', 'Phoebe', 'Chandler', 'Monica']}/>
      </div>
    )
}

const FriendsList = (props) => {
  return (
      <ul>
        {props.friends.map(friend => <Friend friend={friend} key={friend}/>)}
      </ul>
  )
}

ReactDOM.render(<Friends />, document.getElementbyId('friends');
```
Here we've set up the basis for creating our Friend component. In the code above we created a function called Friends that will return an HTML outline that will be appended within the friends element of the webpage. The ReactDOM.render is a React method that inserts code into the element specified by the given Id. Note that within the 'div' tag we are referencing FriendsList and supplying it an array of friends. The FriendsList returns another HTML element that takes the friends array supplied in the Friends function and maps it, passing each friend into the Friend component. Notice how we are accessing the data through the props object and the key is friends, which was set when we were supplying the friends array. 

## React Component
Now that we have this setup, it is time to take a look at what the Friend component does within our webpage. 

```javascript
  class Friend extends React.Component {
    constructor(props) {
      super(props)
    }
    render() { 
      return <li>{this.props.friend}</li>
    }
  }
```
Whenever you create a React Component it is important to remember the ES6 syntax for creating classes, because this is the format that React follows. Here we use the class keyword and the extend keyword to create our component. In the above code we are returning a list item with the value of this.props.friend. This allows us to add each individual name that was in the friends array as a list item on the page. Note the use of the render function within the component, every React component has a render function and is automatically invoked. Whatever is defined within the render function will be added to the page on load. So now that we've seen the code, what is the actual output within the browser you might ask, let's take a look. 

![Example](https://i.imgur.com/xtKVL7l.png)

As you can see, we've got all of our friends printed right there in the browser! This is just a little glimpse into the functionality and power the React has. There's much more that can be done with this framework, if you're still curious, I suggest checking out their website [Reactjs.org](https://reactjs.org/). 
When using React there are some key thing to remember: 
* Use ES6 Syntax when creating new components 
* ReactDOM.render must be used to append your components to the page

When creating any component, you must use the class keyword as well as the extends keyword. Every component you create will be extended from the React.Component, don't forget this when creating your components! Also you must use ReactDOM.render() to display your components within your browser. If you've got those two things you're well on your way to creating awesome webpages and applications with React JS!