Side Navigation

X

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}

 

You May Also Like

Comments

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>