First React App

 In this article we are going to learn below topic with the help of example.

• Create React component
• Store data in state
• Share state data from one component to other

Example :

Step 1:

     Create React app using create-react-app <Project Name> then press enter command and with till          task complete.

Step 2:

    Enter cd <Project Name>  to enter project folder location.    

  

Step 3:

     Run code . to open code in visual code editor.

   

Step 4:

     Run npm start npm start to run react project and open in browser.

Step 5:

     Create below file in React app as shown below.

       

• Components
• UserInput
1. UserInput.js
• UserOutput
1. UserOutout.js
2. UserOutput.css

Step 6:

     Open UserInput.js and write React component code.

import React from "react";

const UserInput = (prop) => {};

export default UserInput;

    

Step 7:

        define input tag in UserInput.js

import React from "react";

const UserInput = () => {

  return (

    <div>

      <input type="text"></input>

      <div>From Output Components</div>

    </div>

  );

};

export default UserInput;

Step 8:

    this component accept some input from patent component using prop

import React from "react";

const UserInput = () => {

  return (

    <div>

      <input type="text" value={prop.value} onChange={prop.change}></input>

      <div>From Output Components</div>

    </div>

  );

};

export default UserInput;

 

Step 9:

     Add some inline stile in inputUser component.

     Define inputStyle and componentCss variable and use in our components.

import React, { useState } from "react";

const inputStyle = {

  backgroundColor: "black",

  color: "white",

  margin: "20px",

  padding: "10px",

};

const componentCss = {

  border: "1px solid black",

  color: "white",

  backgroundColor: "dimgray",

  borderRadius: "5px",

  margin: "20px",

  paddingBottom: "10px",

};

const UserInput = (prop) => {

  return (

    <div style={componentCss}>

      <input

        type="text"

        style={inputStyle}

        value={prop.value}

        onChange={prop.change}

      ></input>

      <div>From Output Components</div>

    </div>

  );

};

export default UserInput;

Step 10:

    open userOuput file and crate component.

import React from "react";

const UserOutput = () => {

  return (

    <div>

      <div>User Name : Replace with Name</div>

      <div>From Output Components</div>

    </div>

  );

};

export default UserOutput;

Step 11:

    Accept input value from  parent component using pops.

import React from "react";

const UserOutput = (prop) => {

  return (

    <div>

      <div>User Name : {prop.UserName}</div>

      <div>From Output Components</div>

    </div>

  );

};

export default UserOutput;

 

Step 12:

     define some css class for UserOutout component styling.

     open UserOutput.css file add add below style.

.user {

  border: 1px solid black;

  color: white;

  background-color: dimgray;

  border-radius: 5px;

  margin: 20px;

  padding: 10px;

}

Step 13:

  use user class in useroutput component using className property.

import React from "react";

import "../UserOutput/UserOutput.css";

const UserOutput = (prop) => {

  return (

    <div className="user">

      <div>User Name : {prop.UserName}</div>

      <div>From Output Components</div>

    </div>

  );

};

export default UserOutput;

Step 14:

     open app.js and import userInput and userOutput file and define userState.

import "./App.css";

import { useState } from "react";

import UserInput from "./Components/UserInput/UserInput";

import UserOutout from "./Components/UserOutput/UserOutout";

const App = () => {

  const [userNameState, setUserNameState] = useState({

    userName: "Ankit Sahu",

  });

  const switchNamesHandler = (event) => {

    setUserNameState({

      userName: event.target.value,

    });

  };

  return (

    <div className="App">

      <UserInput value={userNameState.userName} change={switchNamesHandler} />

      <UserOutout UserName={userNameState.userName} />

      <UserOutout UserName={userNameState.userName} />

      <UserOutout UserName={userNameState.userName} />

    </div>

  );

};

export default App;

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldRephraseRephrase current sentenceEdit in Ginger×Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldRephraseRephrase current sentenceEdit in Ginger×Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldRephraseRephrase current sentenceEdit in Ginger×

Step 15:

 run npm start to run react app.