Skip to main content

Featured

Designing React States

  Why We Need to Design States We already know that we should use state if we want the component to change the content it is rendering. What we don't have answers for yet is: when should state be called? what type of data should the state be? in which component is it defined? This design process will pay off when trying to answer these questions in complicated projects so practice it with simple projects first.  It follows three main steps: distinguish states from events, distinguish the variable name and data type for the state, distinguish which component should house this state according to the other components that will need it as props  State Design Process Distinguishing State from Event First, we have to figure out what will be a state and what will be an event handler given the three following questions: 1. make a list of actions your user can make and the changes in the UI said actions make  2. generally speaking, user actions are event handlers and the chan...
Post a Comment
Read more
Labels

Setup Dev Environment for TS

 



Install Dependencies


# install typescript to get tsc command
npm i -g typescript

# make new project
mkdir new-ts-project
cd new-ts-project/

# create the src folder + root ts file
mkdir src
cd src/
touch index.ts

cd ../

# create ts config file in root dir
tsc --init

Tweak TS Config file

Can also just yoink the config from vite's TS config file 

In reference to the key value pairs that need adjustment in that config file: 

  • Target to choose es version 

  • Module to use common or es6 browser module 

  • rootDir = “./src” move index.ts in there (establish where our root ts file is)

  • In emit within “outDir”: “dist”, “removeComments”: “true” (index.js with the es5 code will go in dist/ and we remove all comments) 

  • Turn on noEmitOnError true so it won’t compile or generate es5 js unless there are zero issues  

  • Everything should just work with the command tsc provided that we named index.ts and that it is in the src directory. 

  • That config file acts as the flags we would’ve otherwise put in the CLI command 

     

Labels:

Comments

Post a Comment

Popular Posts