Skip to content

yhegazy/projectRedo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

projectRedo

The best way to learn is to do. Don't be of those who talk a big talk, but shy away from action.

Allah swt says in the Qur'an: "Oh you have believed, why do you say what you do not do" Q61:2

Learning a programming language, library or framework is like learning a human language. you need to understand the vocabulary, grammar, punctuation and structure. The only way to master this is through consistent repetition.

The goal is simple. It is to "Git Gud". Repeat the process until you own it.

Today's task is simple - learn React.js. Although reactjs is complex, as programmers, we need to have "the know how" when breaking down code into smaller tasks into manageable ones.

If you know React, then you know Preact, nanoJSX, and React Native. Simple. Easy.

But before we learn React, we need to have a good understanding of HTML and CSS. We will be using Vite to help build this project.

What is JSX?

JSX is JavaScript XML. It allows us to write HTML-like syntax within JavaScript. It makes it easier to build UI components in React. Other templating tools similar in concept include EtaJS and EJS, which are commonly used for server-side rendering in Node.js.

Prerequisites

  • IDE (e.g., vscode)
  • NodeJS installed
  • Basic understanding of HTML and CSS

VSCode Extension (optional)

  • React Extension Pack
  • Highly Matching Tag
  • Auto Close Tag
  • IntelliCode

Steps

  • git pull - this will pull the latest update to your local dev server.
  • npm install - Run this will install the package.json packages.
  • In the index.html change the title to projectRedo
  • In the App.jsx add the following details about yourself:
    • name should be placed in the top left side of the page
    • short description of yourself should be placed under name.
    • likes and dislikes should have a font of 18px with a color set to aliceblue
  • npm run dev - This will launch your server to http://localhost:5173 (if free)

Please make your CSS changes in App.css

Once completed, create a branch in this format YYYYMMDD-Name-ST and commit, then push your changes to the repo. Do not merge.

you have until next Friday to complete this. failure to do so will put you behind schedule.

About

project Redo

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •