What exactly is React and How do we begin?
There are a few basics commands to get started with React:
npx create-react-app : This creates a folder for React components made up of node modules.
npm start: It's run in the system terminal or the integrated terminal of your code editor to get the localhost get up and running in your browser(default port of React? Hint: I love React 3000)
npm init: Creates package.json, essential file to have when you want to host or showcase in your github account. People can download you app and simply run the next command to get your app running
npm install: This has multiple applications. We can download packages as well as dependencies listed in your package.json. There are also four basic ways to run this command.
#1- installs packages and dependencies locally and add to package.json. By default feature. npm install <package name> --save #2- install packages globally npm install <package name> -g #3- install packages used only in development npm install <package name> --save-dev #4- to download all packages listed in the package.json npm install
Things to keep in mind
First thing to keep in mind when when uploading your React code is to never upload your node modules(generated when we run npm install) anywhere. The reasons for this is node modules are very large and as mentioned above all dependencies are kept in the package.json and can be downloaded with a mere npm install.
Always capitalize the name of component for a successful rendering.
When creating a component, only one thing is returned in the render function so remember to keep everything wrapped in a fragment(<></> or React.Fragment)
Magic of React render function
As mentioned in the above segment, React has a function called render. This takes in two things, What to render and Where to render.
ReactDOM.render( element, document.getElementById('root') );
ReactDOM is a variable name, which holds the package of react-dom. It containsDOM-specific methods that can be used at the top level of our app. Also acting as an escape hatch to get outside of the React model if you need to. render() is one of those methods.
import ReactDOM from 'react-dom'
Blink and you miss
The inline-styling in React files take the highest precedence and overwrites any css from ".css" file. It often poses a problem when using external libraries. So check if they have already written inline css or not.
While importing ".css" files we need to mention the filename with the extension however we don't need to do that incase of ".js" files in the main react file.
When we host any React projects from local machine, make sure to run an "npm run build" command. All you need to do next is drag and drop the build folder to you hosting website.
That’s the end of basics of React part 1. I’ll keep adding more of these. Do let me know your thoughts and follow my Twitter and LinkedIn.
Top comments (0)