In the project directory, you can:

Starts a development server

Launches the testner in the interactive watch mode.

Builds the app for production to the build folder.

• React is shipped with a component i.e. App.js as an example and is a pretty great example of a stateless functional component.

• All components must return at least one wrapper element.

• There must be one parent wrapper for returning multiple components, e.g.

  return (

  )

• Components are of two kinds:

1. Stateless Components or Functional Components
2. Stateful Components or Class-Based Components

Example 1: Stateless Component

function HelloWorld(){ return ( <h1>Hello Drake</h1> ) } 

Example 2: Stateful Component

class HelloWorld extends React.Component{ render(){ return ( <h1>Hello Drake</h1> ) } } 

• To pass a component in another component

• Prop (Properties)

  • Pass in a prop -

    <HelloWorld name="Drake"/> 

  • Access prop -

    function HelloWorld(props){ return ( <h1>Hello {props.name}</h1> ) } 

Features hooks, class based approach

• Functional approach

  const [var, method_to_modify_var] = useState(initial_value_of_var)

useState(val) function returns a var and a function and that's the reason to declare the LHS const above

- To modify var we reference method_to_modify_var(new_data) 

• Add styles in CSS file
• Use the class name like so

function Header(){ return ( <header className="app-header"> AppName </header> ) } 

• Remove App.css & all its imports
• yarn i tailwindcss
• yarn tailwindcss init
• yarn i postcss-cli && autoprefixer
• Create postcss.config.js with

module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ] } 

• Modify package.json "build:css": "postcss src/index.css -o src/tailwind.css", "watch:css": "postcss src/index.css -o src/tailwind.css -w", "start": "yarn build:css && react-scripts start", "build": "yarn build:css && react-scripts build",

• Restart server with yarn start

Render HTML conditionally

• Using state for conditional rendering

let menu=null; if(showMenu){ menu = <div> The menu </div> } 

• Install react-spring yarn add react-spring
• Define transitions

const menuTransitions = useTransition(showMenu,null, { from: {opacity: 0, transform: 'translateX(-100%)'}, enter: {opacity:1, transform: 'translateX(0%)'}, leave: {opacity: 0, transform: 'translateX(-100%)'} }) 

• Use it as follows

{ maskTransitions.map(({item, key, props})=> item && <animated.div key={key} style={props} className="bg-black-t-50 fixed top-0 left-0 w-full h-full z-50" onClick={()=> setShowMenu(false)}> </animated.div> ) } 

• Install React Router DOM yarn add react-router-dom
• Add necessary imports

 BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom' 

• Make sure Router encapsulates at the topmost level

• Router can contain Link which defines navigation URL

• Router can contain Switch which in turn contains Route which acts as a router outlet for specified links

• Install axios by yarn add axios
• axios works on the mechanisms of promise (then, catch - resolve, reject)
• Implementation

axios.method(url).then().catch() 

• Hooks let us use state and other React features without using a class i.e. through classless components

• Two introductory hooks

1. useState(value)

const [state,stateSetterMethod] = useState(initialValue) 

Example: const [count, setCount] = useState(0);

2. A great substitute for componentDidMount, componentDidUpdate, componentWillUnmount put together

• No clearnup required
• Tell React that component needs to do something after rendering

useEffect(() => { document.title = `You clicked ${count} times`; }); 

• Rules

1. Always call Hooks at the top-level, not within loops, conditionals, nested functions
2. Only call Hooks from React function components or other custom Hooks