JAVASCRIPT

React

A JavaScript Library for building frontend user interfaces

react

// I would suggest using function components react hooks 
// if you use react version > 16.8. React function components have
// various advantages over React class. Check them out here:
// https://reactjs.org/docs/hooks-intro.html

import React, { useState } from 'react';

const Example = (props) => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Hello {props.name}. You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

react

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
To start with react: install node in your device
then open terminal and run : 
npx create-react-app my-app
cd my-app
npm start

react

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

react

rweact uwu

React

npm i --save redux react-redux redux-thunk // You will need these redux packages

React

A JS Library that is considered one of the best frameworks/libraries of JS, Thi is Made by Facebook, If u want check out Clever Programmer, the god of React in Youtube

react

ReactDOM.render(JSX, document.getElementById("challenge-node"));

react

import react, { Component}  from 'react';
import ReactDOM  from 'react-dom';

export default class SuperHero extends Component {

    constructor(props){
       super(props);
       this.state = {
           name: 'Ironman',
           weapon: 'Suit'
       }
    }
    render(){
        return(
            <span>Welcome {this.state.name}</span>
        );
    }
}

React

ReactDOMServer.renderToPipeableStream(element, options)

react

Please do not react with this answer :D

react

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);

react

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

react

# Learn React
https://github.com/d4rkvent/30-Days-Of-React

react

e.preventDefault() prevents the default browser behavior for the few events that have it.

react

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

React

You can first rename the folder to your desire NAME in your FOLDER because you cant change it in VS code  to YOUR NEW NAME. then change the name in package.json and package-lock.json.

react

e.stopPropagation() stops the event handlers attached to the tags above from firing.

react

npx create-react-app MyApp

react

Event handlers must be passed, not called! onClick={handleClick}, not onClick={handleClick()}

react

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);

react

React Elements
- uses JSX (Java script functions)

React Element Attributes
<div className="container"></div>

React Element Styles
{/* Inline styles */}
<h1 style={{ fontSize: 24, margin: '0 auto', textAlign: 'center' }}>My header</h1>

React Fragments
// valid syntax
function MyComponent() {
  return (
    <>
      <h1>My header</h1>
      </p>My paragraph</p>
    </>
  );
}

We can write fragments in a regular or shorthand syntax: <React.Fragment></React.Fragment> or <></>.

react

/* React is a lightweight yet powerful JavaScript framework for creating user interfaces. 
It solves many problems of developer, like easy state management and updating, creating interactive UIs, a big library support, routing, reusable components (write once use everywhere) and a huge community of developers working day and night to improve the framework.
After the introduction of react hooks in React 16.8, function component are now the standard way of writing react components, so it is recommended that a new developer focuses more or functional components rather than class based components.
In react we can write both HTML and JavaScript in the same file (called JSX syntex), it gives us more control and facilities over our code. 
** Note - Some developers say it's a library not a framework (this is arguable but does not make a difference for the react itself). On official React website it is said to be a library. */
// How to you write a simple react component (In TypeScript)
import React from 'react'
function Component(){
  const name = "Himanshu"
    return (
        <h1>Hello {name}</h1>
    )
}
export default Component

React

npx create-react-app gfg

React

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import $ from 'jquery';
import Popper from 'popper.js';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
// If you want to start measuring performance
// in your app, pass a function to log results
// (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();

react

<Filter>
  { product.color?.map((c) => (
    <FilterColor color = {c} key = {c} />
  ))};
</Filter>

react

import toast from 'toasted-notes' 
import 'toasted-notes/src/styles.css';

toast.notify('Hello world!')
                

React

useEffect(didUpdate);

react

{
    enableTime: true,
    noCalendar: true,
    minuteIncrement: 5,
    time_24hr: true
}

react

React is a JavaScript library for building user interfaces.

react

React -A JavaScript library for building user interfaes

react

# Initializing react app using npx (Node.js package runner)
# See source for details.
npx create-react-app your-app-name

React

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

react

echo "# Emmazine" >> 
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Emmazine/Emmazine.git
git push -u origin main

react

echo "# Emmazine" >> 
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Emmazine/Emmazine.git
git push -u origin main

react

echo "# Emmazine" >> 
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Emmazine/Emmazine.git
git push -u origin main

react

echo "# Emmazine" >> 
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Emmazine/Emmazine.git
git push -u origin main

react

return (
    < Router>
      <div className="App" >
        <Routes>
          <Route path='/'
            element={
              <Fragment>
                  < NavBar />
                  < NewsLetterCard />
                  < TestimonialsCard />
                  < ServicesCard />
                  < ContactsCard />
                  < Footer />
              </Fragment>
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

React

cd gfg

react

welcome to the world of react. We will be here to help you anytime.

react

Namaste
Angular is better ___GTFO