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.
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.
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.
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.
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.
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!
Top comments (5)
Hii Connor, great stuff🦄🎉🎉🎉,
Can you please explain
Which is good practice to Use Class Components or Functional Components
As Functional Components support hooks I usually use Functional comp with hooks and redux.
What would you say?
And also should I learn Context In react or go for NextJs as a SSR
It's still a bit controversial which one to use between class components (CC) and function (not functional) component (FC).
I'd suggest to learn FC first but also learn about CC as CC is still widely used and there are things that FC cannot do but CC can.
Context API is a core React feature, so you'd actually want to learn. Context API has its own use cases where you won't need Redux for.
You can check out the discussions about FC vs. CC here.
Thanks a lot Sung,
I got a bit clear image what to do next😁, will suerly go for context Api starting from tomorrow before touching NextJs...
Also I am bit good in ReactJS, where I am using Functional Components daily, and from now will look for the reasons to use CC or FC for sure....
Ps: In First comment there was mistake with my Autocorrect in last line..
You're welcome there, Hemant :)
After learning the Context API, you need to be careful on setting it up on NextJS, as it's an SSR (server-side rendering) framework. On each page refresh, context state is gone.
So you'd need to set up the context in what's called a special file,
pages/_app.js, which you can read about here -> reacttricks.com/sharing-global-dat...Yes🤔, will take care of it