Basics of React – Part 1

So, you have already learnt JavaScript and now you want to try your hands in the various frameworks that it has helped built, React being one of them. Before we start getting into the good stuff, there are a few things that are really for the beginners and chances are that if have followed along any course or even started watching what React is, you already know about this. Even you haven’t come across these then congratulations you have learned something new.

What exactly is React and How do we begin?

Even from React docs landing page you can pick up what is react. React is a JavaScript library used to build User Interfaces. Now the keyword here that is React is a library you might get a question in interview is React is a library or a framework.
It is based on three principles Declarative, Component Based and Learn Once, Write anywhere. Before you go on and build super awesome projects you need to download NodeJS. It comes inclusive of a package downloader called npm. We write the code in JSX format(JavaScript XML) which essentially lets us write HTML elements in JavaScript and place them in the DOM.
There are a few basics commands to get started with React:

1. npx create-react-app : This creates a folder for React components made up of node modules.

2. 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)

3. 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

4. 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

• Since we are using JSX we need to make sure we are using the correct HTML format and use proper notations of JS elements or handlers. Ex- In React we use onClick instead of onclick of Javascript.

• 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.