Steps to create the React application
Step 1: Create React Project
npm create-react-app myreactapp
Step 2: Change your directory and enter your main folder charting as
cd myreactapp
Project Structure:
Example 1: This example demonstrates the creation of functional components.
Javascript
// Filename - index.js import React from "react" ; import ReactDOM from "react-dom" ; import Demo from "./App" ; const root = ReactDOM.createRoot( document.getElementById( "root" ) ); root.render( <React.StrictMode> <Demo /> </React.StrictMode> ); |
Javascript
//Filename - App.js import React from 'react' ; import ReactDOM from 'react-dom' ; const Demo=()=>{ return <h1>Welcome to w3wiki</h1>}; export default Demo; |
Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/
ReactJS Functional Components
Functional Component is one way to create components in a React Application. React.js Functional Components helps to create UI components in a Functional and more concise way. In this article, we will learn about functional components in React, different ways to call the functional component, and also learn how to create the functional components. We will also demonstrate the use of hooks in functional components
Table of Content
- Functional components in React :
- Ways to call the functional component:
- Problem with using functional components
- Advantage of using hooks in functional components