Steps to create React Application And Installing Module
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
file directory
Example: We will create a card component and pass it to the App function to render it.
Javascript
// App.jsimport React from "react";function Card({ receiver, writer }) { return ( <div> <h1 style={{ backgroundColor: "lightblue", width: "fit-content" }}> w3wiki </h1> <h2 style={{ backgroundColor: "lightgrey", width: "fit-content" }}> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </h2> <h3>Your truly, {writer}</h3> </div> );}export default function App() { return ( <div> <Card writer="GFG" receiver="gfg jr" /> </div> );} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Output
References: https://reactjs.org/docs/components-and-props.html
How to create components in ReactJS ?
Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS.
Table of Content
- React Functional Components
- React Class-based Components
- Rendering the Component
Contact Us