react.js

██████  ███████  █████   ██████ ████████      ██ ███████ 
██   ██ ██      ██   ██ ██         ██         ██ ██      
██████  █████   ███████ ██         ██         ██ ███████ 
██   ██ ██      ██   ██ ██         ██    ██   ██      ██ 
██   ██ ███████ ██   ██  ██████    ██ ██  █████  ███████ 

environment

• node.js
• NPM 5.2+
• babel
• JSX syntax
• react router
• Firefox

resources

• React.js
• node.js
• NPM
• babel
• JSX syntax
• react router
• Firefox

instalation

• install node.js

• install npm

• sudo snap install node --classic

Using docker

docker file

FROM node:18-alpine

RUN npm install --location=global vim
RUN npm install --location=global npm
RUN npm install --location=global semistandard -y

• docker build -t node-alp:1.0 .
• docker run -d -it --rm -p 3000:3000 -v /home/ralex/code:/code --user node --name node-alp-0 node-alp:1.0
• docker exec -it --user root node-alp-0 sh

Alternatives to React

Since React is a library, and not a framework, this means that can be used with other JavaScript libraries.

• Lodash - utility library
• Luxon - date and time library
• Redux - state management library
• Axios - HTTP client
• Jest - testing library

create React app

This process will install react, react-dom and react-scripts

React will create react componenets, react-dom is is how add them to the page, and react scripts is how we handle the bundling.

• node -v
• npx create-react-app my-app
• cd my-app
• npm start
• open http://localhost:3000 to view it in the browser.

if download the code from github, you need to install the dependencies with npm install

fundations

Principles - React.js

• Don't touch the DOM
• Build websites like blocks
• Unidirection data flow, only move down
• React.js the UI

src folder

• package.json what are the different packages or libraries that the project means in order to work, created by create-react-app

scripts

npm start load into localhost:3000

npm run build build the project in an optimized way ready for production. React create an optimal build

npm run eject don't eject until you find a good reason for that (actually i don't know one)

JSX

JavaScript Expressions

• whenever use curly braces {} is a JavaScript expression and can be used functions

let name = 'John'
{name.toLowerCase()}

useState hook

useState is a hook that allows you to add state to functional components

• import React, { useState } from 'react'

const [name, setName] = useState('John')

• name is the state
• setName is the function that allows you to change the state
• useState is the hook
• useState('John') is the initial value of the state

useEffect hook

useEffect is a hook that allows you to add side effects to functional components

• import React, { useState, useEffect } from 'react'

useEffect(() => {
  console.log('render')
}, [name])

• useEffect is the hook
• useEffect(() => { console.log('render') }, [name]) is the function that will be executed when the component is rendered
• [name] is the dependency array, if the state name changes, the function will be executed

dependecy array

• if the dependency array is empty, the function will be executed only once when the component is rendered
• if the dependency array is not empty, the function will be executed when the component is rendered and when the state in the dependency array changes
• if more than one state is in the dependency array, the function will be executed when any of the states changes

reducer hook

reducer is a hook that allows you to add state to functional components

• import React, { useReducer } from 'react'

const [state, dispatch] = useReducer(reducer, initialState)

• state is the state
• dispatch is the function that allows you to change the state
• useReducer is the hook
• useReducer(reducer, initialState) is the reducer function and the initial value of the state

forms

useRef hook

useRef is a hook that allows you to add state to functional components

Is used to get the value of an input

• import React, { useRef } from 'react'

const inputRef = useRef()

• inputRef is the state
• useRef is the hook
• useRef() is the initial value of the state

form libraries

• Formik
• React Hook Form
• React Final Form
• React Form
• Use Hook Form

react router

React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick!

• npm install react-router-dom

testing

• npm test

resources for testing

• Jest
• React Testing Library
• Enzyme
• React Testing Library

jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

• Jest will run all the test in the project with .test.js or .spec.js extension

react testing library

The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices.

React icons

• npm install react-icons --save install the react icons library as a dependency
• usage

import { ICONNAME } from 'react-icons/bs

< ICONNAME />

• react icons

Tailwind css

• Tailwind css

• npm install -D tailwindcss postcss autoprefixer

• npm install -D @tailwindcss/forms

• npx tailwindcss init -p

install CRACO

try first run with react-script Create React App Configuration Override

• npm install @craco/craco

• modify package.json

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
},

• create craco.config.js

module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

config tailwind

• create tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
}

• modify the index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

bug fixes

postcss plugins not found

• find node_modules/ -name 'postcss-flexbugs-fixes'
• npm install postcss-flexbugs-fixes postcss-normalize postcss-preset-env

Author