DEV Community

michele
michele

Posted on

My React Journey: Day 1- Create a new project, add dependencies, and global CSS styles

#angular #react #typescript #webdev

Hello everyone

I'm Michele Malagnini, an Angular developer. For my next article, I want to help fellow Angular developers learn React. To do this, I'm drawing inspiration from a cool series of articles where a developer Connie Leung built a basic app in Vue and then ported it to Svelte and Angular. I'm going to follow a similar path, taking his original Angular application and rebuilding it from the ground up in React, all while using TypeScript.

We are going to do a simple CRUD application a shopping cart that adds and delets items from it

*1. Create a new project *

Angular 19 application 

ng new angular-project-example
select css or what you want for css style
do not use ssr and ssg Type no

cd angular-project-example
npm i
ng serve
go to localhost://4200
Enter fullscreen mode Exit fullscreen mode

React 

npm create vite@4         # install version Vite 4.x 
name: react-project-example
react -> typescript

cd react-project-example
npm i
Enter fullscreen mode Exit fullscreen mode

*2. Install Icon library *

Like a Connie Leung article I would like to use icons to make the examples more creative :-P. I installed Iconify for react and ng-icons for Angular.

Angular 19 application 

npm install --save-exact @ng-icons/core @ng-icons/materialicons
Enter fullscreen mode Exit fullscreen mode

React 

npm i @iconify/react
Enter fullscreen mode Exit fullscreen mode

*3. edit global stylesheet *

Angular 19 application

Angular 19 application
Update the global styles in styles.css
copy the file src/styles.css

React

create the file src/styles/global.css
copy this file src/styles/global.css

Import it once in the app's bootstrap.

// src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

// impor here the global stylesheet
import './styles/global.css'

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
Enter fullscreen mode Exit fullscreen mode

Resources
Github Repos:
https://github.com/michelemalagnini/angular-project-example
https://github.com/michelemalagnini/react-fundamental

Top comments (0)