Category: React

TILT- React Material UI and Navigation–part 29

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”}

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

TILT- Angular2React–part 28

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

  1. 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)
  1. 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/';
  1. 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!
  1. Do not forget about setting PUBLIC_URL .

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

TILT-REACT Router

Now to see how to handle FrontEnd routing ( From Backend it is simple – just transfer to index.html and React will handle it )

The long established in React world seems to be https://github.com/remix-run/react-router . There is a new kid , https://github.com/Paratron/hookrouter – that uses hooks. However, the documentation says:

This project is not and will not be written in typescript.

So back to the old react router.

To register you need:

  1. Some routes
<Routes>
<Route path="/" element={<PublicTilts />} />
<Route path="/public/:id" element={<OnePublicTiltComponent />} />
{/* <Route path="*" element={<NotFound />} /> */}
</Routes>
  1. And intercept
function OnePublicTiltComponent() : JSX.Element{

    let { id } = useParams();
//code
}

However, when I look to Angular and React, the code in React ( with Hooks) seems more clean and usable. Just the render and the functions.

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.