Шпаргалка по React.js для начинающих

npx create-react-app hello-world
cd hello-world
npm start

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  render() {
    return(
      <div>
         Hello World
      </div>
    )
  }
}
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react'
import ReactDOM from 'react-dom'
function App() {
  return (
    <div>
       Hello World
    </div>
  )
}
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react'
class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {  
        //Initializing state values
        name: ""
      }
  }
  componentDidMount() {
      this.setState({  
        //Updating state values
        name: "codemaker"
      })
  }
  render() {
    return(
      <div>
        Hello {this.state.name} {/* Using state values */}
      </div>
    )
  }
}
export default App;

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div>
        Hello {this.props.name} {/* Using prop values */}
      </div>
    )
  }
}
ReactDOM.render(
  <React.StrictMode>
    <App name={"codemaker"} /> {/* Provide prop values  */}
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react'
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <div>
        Hello {this.props.name} {/* Using prop values */}
      </div>
    )
  }
}
App.defaultProps = {  //Setting default props with values
  name: "codemaker"
}
export default App;

import React from 'react'
class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {  //Initializing state values / default state
        name: ""
      }
  }
  componentDidMount() {
      this.setState({  //Updating state values
        name: "codemaker"
      })
  }
  render() {
    return(
      <div>
        Hello {this.state.name} {/* Using state values */}
      </div>
    )
  }
}
export default App;

import React from 'react';
class App extends Component {
  render () {
    return <div>
      <input ref={el => this.input = el} />
    </div>
  }  componentDidMount () {
    this.input.focus()
  }
}
export default App;

import React from 'react';
class App extends Component {
  render () {
     return (
        <input type="text"
           value={this.state.value}
           onChange={event => this.onChange(event)} />
     )
  }
  onChange (event) {
    this.setState({ value: event.target.value })
  }
}
export default App;

import React from 'react';
class App extends React.Component {
   render() {
      var i = 1;
      const { items } = this.props
      return ( // JSX syntax. Using HTML code in Javascript
         <div>
            <p>Hello World</p>
            <p>{8+5}</p> {/* JSX expression */}
            <p className={"demo-class"}>class name test</p> {/* Accessing css class */}
            <div style={{backgroundColor: 'red'}}> style option test</div>  {/* Defining styles inside component */}
            <h1>{i == 1 ? 'True' : 'False'}</h1> {/* Conditional statements */}
            {i == 1 ? <div>Hello</div> : <div>Haii</div>} {/* Conditional rendering */}
            {i == 1 && <div>Test</div>} {/* Short evaluation */}
            {items.map(item =>          //List rendering in JSX
                         <p>{item}</p>  
                      )
            }
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

import React from 'react';   
import ReactDOM from 'react-dom';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthenticated: true,
    }
 }
  render() {  
    const isAuthenticated = this.state.isAuthenticated;  
    return (  
       <div>  
         Welcome {isAuthenticated ? 'Authenticated User' : 'Please login to continue'}.  
       </div>  
    );  
  }  
}

import React from 'react';  
import PropTypes from 'prop-types';
class App extends React.Component {  
   render() {  
        return (  
            <div>  
                <p>{this.props.propArray}</p>  
                <p>{this.props.propBool}</p>  
                <p>{this.props.propFunc(5)}</p>  
                <p>{this.props.propString}</p>  
                <p>{this.props.propNumber}</p>  
            </div>  
        );  
   }  
}  
App.propTypes = {  
    propArray: PropTypes.array.isRequired,  
    propBool: PropTypes.bool.isRequired,  
    propFunc: PropTypes.func,  
    propNumber: PropTypes.number,  
    propString: PropTypes.string,   
}  
App.defaultProps = {  
    propArray: [1,2,3],  
    propBool: true,  
    propFunc: function(x){return x+3},  
    propNumber: 1,  
    propString: "codemaker",  
}  
export default App;

npm install react-router-dom --save

// This is a React Router v6 app
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

import React, { useState, useEffect } from 'react';  

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

  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {  
    // Update the document title using the browser API  
    document.title = `You clicked ${count} times`;  
  });  

  return (  
    <div>  
      <p>You clicked {count} times</p>  {/* Access state values */}
      <button onClick={() => setCount(count + 1)}>  {/* Updating state values using setCount */}
        Click me  
      </button>  
    </div>  
  );  
}  
export default App;

// Create a context for the user authentication.  
const AuthContext = React.createContext('auth');  

class App extends React.Component {  
 render() {  
      /* Use a ContextProvider to pass the auth information, 
         we are passing the "true" as the current value.*/  
      return (  
         <AuthContext.Provider value="true">  
           <App />  
         </AuthContext.Provider>  
      );  
   }  
}  

// Now, it is not required to pass the auth down explicitly for every component.  
function App(props) {  
   return (  
      <Home /> 
   );  
}  

class Home extends React.Component {  
 static contextType = AuthContext;  
   render() {  
      return <Button auth={this.context} />;  
   }  
}

npm install reactstrap react react-dom
npm install --save bootstrap

import React from 'react';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <Button color="danger">Cancel</Button>
  );
};

import React from 'react';
class ErrorBoundary extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = { hasError: false };  
   }  
   static getDerivedStateFromError(error) {  
      // It will update the state so the next render 
      // and shows the fallback UI.  
      return { hasError: true };  
   }  
   componentDidCatch(error, info) {  
      // It will catch error in any component below. 
      // We can also log the error to an error reporting service.  
      logErrorToMyService(error, info);  
   }  
   render() {  
      if (this.state.hasError) {  
          return (  
           <div>Oops! Error occurs.</div>;  
       );  
      }  
      return this.props.children;   
   }  
}
// Wrap the error boundary around your component
<ErrorBoundary>  
 <App/>  
</ErrorBoundary>