React Basics
Node-Project-SFG
Create: folder -> npm init to generate a project
npm i express (npm i express@4.17.0) // 4.x or latest and node i
npm i mongodb
npm i react react-dom
npm i -D webpack webpack-cli
npm i -D babel-loader @babel/cli @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
npm i nodemon
npm i eslint babel-eslint eslint-plugin-react
npm i prop-types
mkdir src, public, api
ni src/index.js, public/index.js, api/index.js
Add Scripts:
“start”: “nodemon –exec babel-node server.js –ignore public/”,
“dev”: “webpack -wd”
To reduce nested coding we can use Jsx,
My first List:
If Condition and Props:
return (
<> //fragment
{props.autherized ? <SecretComponent/> : <RegularComponet/>}
</>
);
Object de-structuring and array destructuring in states
function toggle(){
setChecked((checked) => !checked);
}
useReducer hook
const [checked, toggle] = useReducer(
(checked) => !checked,
false);
return (
<>
<input
type=”checkbox”
value={checked}
onChange={toggle}
Leave a Comment