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:
- Stateless Components or Functional Components
- 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 containsRoute
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
- useState(value)
const [state,stateSetterMethod] = useState(initialValue)
Example: const [count, setCount] = useState(0);
- 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
- Always call Hooks at the top-level, not within loops, conditionals, nested functions
- Only call Hooks from React function components or other custom Hooks