React learning for beginners


What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Create your React app

To install the full React toolchain on WSL, we recommend using create-react-app:

  1. Open a terminal(Windows Command Prompt or PowerShell).
  2. Create a new project folder: mkdir ReactProjects and enter that directory: cd ReactProjects.
  3. Install React using create-react-app, a tool that installs all of the dependencies to build and run a full React.js application:PowerShellCopy npx create-react-app my-app  
  4. Note :-npx is the package runner used by npm to execute packages in place of a global install. It basically creates a temporary install of React so that with each new project you are using the most recent version of React (not whatever version was current when you performed the global install above). Using the NPX package runner to execute a package can also help reduce the pollution of installing lots of packages on your machine.
  5. This will first ask for your permission to temporarily install create-react-app and it’s associated packages. Once completed, change directories into your new app (“my-app” or whatever you’ve chosen to call it): cd my-app.
  6. Start your new React app:PowerShellCopy npm start This command will start up the Node.js server and launch a new browser window displaying your app. You can use Ctrl + c to stop running the React app in your command line.
  7. Install – React Developer Tools for chrome
  8. Visual studio Code Extensions
    1. Thunder client
    2. ES7 React/Redux/graphQL/React-Native snippets – https://marketplace.visualstudio.com/items?itemName=rodrigovallades.es7-react-js-snippets
    3. Bracket Pair Color DLW
    4. Auto Rename Tag
    5. live server
    6. Prettier- code formatter

Strict Mode

StrictMode is a tool for highlighting potential problems in an application. Like FragmentStrictMode does not render any visible UI. It activates additional checks and warnings for its descendants.

Note:

Strict mode checks are run in development mode only; they do not impact the production build.

The purpose of "use strict" is to indicate that the code should be executed in “strict mode“.
With strict mode, you can not, for example, use undeclared variables.

Modules

JavaScript modules allow you to break up your code into separate files.

This makes it easier to maintain the code-base.

ES Modules rely on the import and export statements.

Export

You can export a function or variable from any file.

Let us create a file named person.js, and fill it with the things we want to export.

There are two types of exports: Named and Default.

Named Export

person.js const name = “Jesse” const age = 40 export { name, age }
Default Exports
Let us create another file, named message.js, and use it for demonstrating default export.

You can only have one default export in a file.
message.js

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Import

You can import modules into a file in two ways, based on if they are named exports or default exports.

Named exports must be destructured using curly braces. Default exports do not.

Import from named exports

Import named exports from the file person.js:

import { name, age } from "./person.js";

Import from default exports

Import a default export from the file message.js:

import message from "./message.js";

Props

The term “props” stands for “properties” and is used for passing data from one component to another.

props are read-only. So, the data coming from a parent component can’t be changed by the child component.

1st Step: Defining Attribute and Data

We can assign data to React components while calling them in this way:

<Child attr1={value} attr2={value}/>

2st Step: Rendering Props Data

Now we need to render props since we have already passed it to the child component as an argument:

const Child = (props) => {    return <p>{props.attr1},{props.attr2}</p>; };

PropTypes

To run typechecking on the props for a component, you can assign the special propTypes property

PropTypes exports a range of validators that can be used to make sure the data you receive is valid.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

https://www.freecodecamp.org/news/how-to-use-proptypes-in-react/