React js

React JS installation

1. download Node js- whenever you install nodejs the npm will automatically install
2. check node version if it is already installed

node --version

3. check npm version

npm --version

4. add react developer tools extension in google chrome

enable thunder client extension in vscode , it is a postman alternative,

enable ES7 React/Redux/GraphQL/React-Native snipp

enable Bracket Pair Colorizer 3 , we use it for making color of each bracket pair

enable Auto Rename Tag

enable Live Server , it will help to open website in browser in live browser we can make changes in backend and it will automatically reload in frontend

enable Prettier — Code formatter , it is a code formatter

by using npx create-react-app my-app to create app

npm is a package manager ,

Get Reema Kumaritech’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

react is a kind of farmwork

1. Node modules: contains all modules
2. git ignore- it helps to push the code to gitlab or github
3. package.json contains all packages name which is present in node modules
4. src: component props and state we store in src folder, in components whatever details we are sending from outside that we say props

to start the app run npm start

document.addEventListener("click", function click() {
    console.log("clicked");

    // alert("hello")

    let conf = confirm("Are you sure?");
    console.log(conf);
});

1. document.addEventListener("click", function click() {

• document refers to the entire web page.
• addEventListener() is used to listen for an event.
• "click" means the event is triggered whenever the user clicks anywhere on the page.
• function click() { ... } is the function that runs when the click event occurs.

In simple words:
“When the user clicks on the webpage, execute the code inside this function.”

what ever we are writting inside app.js , the same will display on screen

generally nowdays we are using function based java script and in below code inside the function it is written jsx code , generally we say it is html code inside javascript

enable the below emmet from setting and last line

State Hooks 
State lets a component “remember” information like user input. For example, a form component can use state to store the input value, while an image gallery component can use state to store the selected image index.

To add state to a component, use one of these Hooks:

useState declares a state variable that you can update directly.
useReducer declares a state variable with the update logic inside a reducer function.
function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

create components folder

create Menubar.js

import React from 'react'

export default function Menubar(props) {
  return (
   
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
        <div className="container-fluid">
          <a className="navbar-brand" href="/">{props.title}</a>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <a className="nav-link active" aria-current="page" href="/">Home</a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="/">{props.aboutText}</a>
              </li>
              
            </ul>
            <form className="d-flex" role="search">
              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"/>
              <button className="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>   
    
  )
}

create TextForm.js

import React,{useState} from 'react'



export default function TextForm(props) {
    const handleOnClick=()=>{
        console.log("on click")
        let newText=text.toUpperCase();
        setText(newText)
    }
    const handleOnChange=(event)=>{
        console.log("on change")
        setText(event.target.value)
    }
     
const [text, setText] = useState('Enter text here');
  return (
            <div>  
                <h1>{props.heading}</h1>
                <div className="mb-3">
               
                <textarea className="form-control" id="Text area" value={text} onChange={handleOnChange} rows="8"></textarea>
                <button className="btn btn-primary" onClick={handleOnClick}>Convert to Uppercase</button>
        </div>
    </div>
  )
}

update code in app.js

import './App.css';
import Menubar from './components/Menubar';
import TextForm from './components/TextForm';




function App() {
  
  return (
    <div>
     <Menubar title="TextUtils" aboutText="About_Us"></Menubar>
     <div className="container my-3" >
        <TextForm heading="Enter the text to analyze below"></TextForm> 
        
     </div>
     
    </div>
  );
}

export default App;

update code in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    
  </body>
</html>