React Movie Feed

• Version
• Important Note
• Prerequisite Environment
• Prerequisite React Modules
• Generating React App with extra features
• React Manual Execution
• Modify the following files to change the custom uri

• 0.0.1

• This script was written with React 17.0.1 methods on NodeJS 15.7.0

• Install
  • NodeJS
    • Use the following web site to download for your operating system (Windows/Mac OS/Linux)
      • https://nodejs.org/
      • node -v
• Npm
  • npm install -g npm@latest
  • npm -v

• Install/Update React
  • npm install react-scripts@latest
• React
  • npm install -g create-react-app
  • Find out the React and React Native version via command line tool
    • npm view react version
    • npm view react-native version

• Generate React App
  • Navigate to project
    • cd /path/of/project/location/
      • npx create-react-app <project_name>
        • WAIT FOR THIS TO FINISH
• Open Command Prompt without Administrator
  • Navigate to project
    • cd /path/inside/parent/directory
      • Serve React project (default HTTP host and port number)
        • npm start
• Start React which opens in a browser
  • npm start
• TailWindCSS (Make sure you are in the React project folder)
  • Install TailWindCSS
    • npm install tailwindcss postcss postcss-cli autoprefixer
    • OR npm install tailwindcss@latest postcss@latest postcss-cli autoprefixer@latest
      • WAIT FOR THIS TO FINISH
  • Create your configuration file
    • Navigate to root directory
      • cd /path/inside/parent/directory
    • npx tailwindcss init -p
      • -p is optional
  • Reconfigure the package.json file to include the new tailwindcss compiler
    • Open the package.json file in the scripts section

      • "build:css": "postcss src/index.css -o src/tailwind.css",
        "watch:css": "postcss src/index.css -o src/tailwind.css -w",
        "start": "(set PORT=3000 || export PORT=3000) && npm run build:css && react-scripts start",
        "build": "npm run build:css && react-scripts build",
        

    • Save and exit
    • Build CSS from the command line
      • Open terminal of your choice and execute the following command
        • npm run build:css
• FontAwesome
  • Install
    • npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
      • WAIT FOR THIS TO FINISH
• React-Spring
  • Install
    • npm install react-spring
      • WAIT FOR THIS TO FINISH
• Router
  • npm install react-router-dom
    • For websites
  • npm install react-router-native
    • For native apps
    • If issues, Fix the upstream dependency conflict, or retry with --force or --legacy-peer-deps
      • npm install react-router-native --legacy-peer-deps
• Axios
  • npm install axios
    • Used to access web service APIs
• React Datepicker
  • npm install react-datepicker --save
  • If issues, Fix the upstream dependency conflict, or retry with --force or --legacy-peer-deps
    • npm install react-datepicker --save --legacy-peer-deps
• Fix vulnerabilities
  • npm audit fix

• Change into the root project directory
  • cd /root/project/directory
• Build react project for production
  • npm run build

• Navigate to the root project dicrectory
  • cd /root/project/directory
  • Open the package.json file and modify the homepage line
    • "homepage": "/<uri_name>/",
• Navigate to the src dicrectory
  • cd /root/project/src/directory
  • Open the App.js file and modify any line that needs the uri name
    • "/<uri_name>/"
• Navigate to any file that needs the new uri name
• Change into the root project directory
  • cd /root/project/directory
• Build react project for production
  • npm run build