DEV Community

Cover image for Functional Components in React
Abhii
Abhii

Posted on β€’ Edited on

1

Functional Components in React

I started learning React yesterday and hence I thought I'll write articles about what I learned each day.

What are components in React?

Short answer: Components are independent and reusable block of code and return html using render() function.

Suppose we have the following UI:
Explaining react components via UI layout

So we will have components for each like Navbar component, sidebar component, component for article and footer.

React allows us to write components in two ways:

  • Functional components
  • Class Components

Writing your first React component

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Functional Components in React</title>
</head>

<body>
<div id="root"></div>

// Babel (To render JSX), React and ReactDOM
<script src="https://unpkg.com/@babel/standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<script type="text/babel">
  function SayHello(){
    return (<h1>Hello, World!</h1>);
  };

  ReactDOM.render(
      <SayHello />,
      document.getElementById('root')
  );
</script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Understanding above code:

We have a simple html document with div with id as root and some script files:

  • Babel (used to render jsx)
  • React and ReactDOM

In our inline script, we wrote our first functional component.
Function SayHello() returns jsx and thus we used imported babel.

Now, we render this JSX into out html with the help of render() function from ReactDOM.
render() accepts two arguments: render(WHAT TO RENDER, WHERE TO RENDER).

Hence our functional component SayHello() renders Hello, World! into the div with id as root.

Points to remember:

  1. Start component name with CAPITAL letter. (Capital CamelCase is preferred)
  2. Your component cannot return multiple elements. Therefore make sure to bind all of them into a single parent element. e.g.
<div>
 <h1></h1>
 <p></p>
</div>
Enter fullscreen mode Exit fullscreen mode

Okay, that's all today. Hope you liked the article and would also like to hear from you to improve my ways of writing these articles.
Don't forget: I'm Noob writer after all 😁

Some Links to learn React:

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay