The meaning of life is to explore the world

React.js basics for beginners

Posted on By Jason Liu

You may want to use npx create-react-app my-app-name as a starting point.

But there still can be issues like below.

1. Install Node.js

There’s no npm or npx command without installing Node.js first.
You have to install with admin right in Windows otherwise it’ll likely come to the below error.

Creating a new React app in C:\JJJJJJ\codes\metro-learner\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

npm ERR! Cannot read properties of null (reading 'pickAlgorithm')
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jason.liu\AppData\Local\npm-cache\_logs\2022-10-21T01_14_53_148Z-debug-0.log

Aborting installation.
  npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

Deleting generated file... package.json
Deleting my-app/ from C:\JJJJJJ\codes\metro-learner
Done.

2. Using 3rd party React libraries

Add import statements to the JavaScript

import React from "react";
import ClassName from "./the-path-to-3rd-party-library/xxxx.jsx";

Error that will likely appear:

Support for the experimental syntax 'jsx' isn't currently enabled

Solution:
Do modifications on node_modules\react-scripts\config\webpack.config.js

1.Add babel reference
my_image

2.Add JSX to the test for outside app
my_image

3. Deployment

Use npm run build to deploy the uglified web pages to the build folder.
However, other web host may fail to call the deployed web pages.

Solution:
Create a new .env file. Set the PUBLIC_URL in it according to the web host home page.