Category: React

I wanted some good looking on the site – so I choose https://mui.com/

It does not have ready made navigation like in Angular – so I need to make on myself. Fortunately , it has the all the things that one need:

1. Media Query: https://mui.com/material-ui/react-use-media-query/

2. App Bar: https://mui.com/material-ui/react-app-bar/

The final code looks like that

const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const [userWantshowLeftMenu, showLeftMenu] = useState(false);
const showMenu= (event: React.MouseEvent<HTMLElement>) =>{
  showLeftMenu((prevState)=> !prevState )
}  

Created MenuLeft components to show menu left

Created PublicTilts component to show the main page

The GUI in React:

  <AppBar position="static">
          <Toolbar>          
            { isMobile && 
            <IconButton
              size="large"
              edge="start"
              color="inherit"
              aria-label="menu"
              sx={{ mr: 2 }}
              onClick={showMenu}
            >
              <MenuIcon />              
            </IconButton>
            }
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              TILT
            </Typography>
            <Button color="inherit">Login </Button>
          </Toolbar>
        </AppBar>
      </Box>
      {!isMobile || userWantshowLeftMenu ? (<span style={{float:"left"}}><MenuLeft /></span>):("")}
      
      <span style={{float:"left"}}><PublicTilts /></span>

Lessons Learned:

1. It is better to write components and again components in React. If not , you will be overflow by the amount of GUI

2. React does not know how to display a boolean . Use this

{userWantshowLeftMenu?”true”:”false”}

3. It is somehow more difficult to make the React events in TypeScript rather than in JavaScript.

I was thinking to learn React – and transform the Angular site to React.

The steps that I took are the folllowing:

1. Learn React from https://reactjs.org/tutorial/tutorial.html – and learning that React is a library, not a framework

2. Learn useEffect, useState with Hooks – very easy

3. Learn that React can have a TypeScript template – it will make harder to develop, but in the end it is safer.

Lesson Learned:

1.The typescript classes are the same – so can be translated from Angular to React

2. The Observables are the same, with a difference: HttpClient does not exists. So we pass from HttpClient to Ajax

In Angular:

return ajax.get<string>(this.baseUrl+`PublicTILTs/CountTILTs/${id}/count`,options)

In React

this.http.get(this.baseUrl+`PublicTILTs/CountTILTs/${id}/count`,options)

3. Environment.ts is modified to .env.local and .env.production

In Angular

export const environment = {
  production: true,
  url: 'https://tiltwebapp.azurewebsites.net/',  
};

As a usage ,

import { environment } from 'src/environments/environment';
//code
this.baseUrl=environment.url+'api/';

In React

PUBLIC_URL=/ReactTilt
REACT_APP_PRODUCTION=true
REACT_APP_URL=https://tiltwebapp.azurewebsites.net/

As a usage

this.baseUrl=process.env.REACT_APP_URL+'api/';

4. UseEffect can give infinite loops

If you use set from hooks in useEffect, can give infinite loops. See very important below.

useEffect(()=>{
      var publicService= new PublicTiltsService();
      var x= publicService.getUrls().subscribe(data=>{
        data.forEach( it=>{
            publicService.nrTilts(it).subscribe(a=> 
            {
              console.log("obtaining ", a );            
              addTilts((prevState:publicTilt[])=>  [...prevState, a] );
            }
            );
          });
  
      });
      return ()=> x.unsubscribe();
    },[]);//very important!

5. Do not forget about setting PUBLIC_URL .

6. In development, if you investigate Developer Tools it is better refresh the page ( in angular it is auto refreshed)