React is a JavaScript framework used to build fast and interactive user interface.
React App
Is the collection of subunits called component. A component is a piece of a user interface, they are built in isolation and as so stand-alone.
Each react app has at least one component called root components. Roots components contain other components that makes up the App's UI.
I also learnt that components can be reusable in the entire application, each component is a function that has some state and a return statement, state is the data to be displayed when the component is rendered.

Weekly review.
React uses virtual Dom to propagate changes.

How the virtual Dom work
The virtual Dom get updated and compared to what it looks like before it was updated, React then figures out that the object has changed and the changed object gets updated on the real Dom.
To create a react app we run if you command on the terminal or CLI such as npx create-react-app app-name. Then cd app-name, npm start.
The react app folder contain and a file a create root component which creates the UI, package.js info file, node modules and a public and src file.

Components
Components can refer to other components in the output and components are small block of codes.
Few rules to my components
Components name should be in pascal case, element that need keys should be unique, method should be in camel case and be named for their functions, every component have to be in the root component.
Handling listing and components
Keys in list are used to give a lost a unique identity. The keys must be similar to the value of the list.
Handling events with react elements is very similar to handling events in Dom element of vanilla Js.
Events are names using camel case instead of lowercase.
With jsx you pass a function as the event handler, rather than a string.

React props.
Props are arguments or properties passed into react components.
Props are how data can b passed from one component to another , as a parameter.
Props are passed as an object and can be destructed.

React hooks
useState - update state.
useEffect - allow us to perform side effects like setTimeout in our components.
useContext - allows us manage state globally instead of prop drilling.
Continue tomorrow...

If you know react you already know like 70% nextjs

EricBraven:
React props.
Props are arguments or properties passed into react components.
Props are how data can b passed from one component to another , as a parameter.
Props are passed as an object and can be destructed.

React hooks
useState - update state.
useEffect - allow us to perform side effects like setTimeout in our components.
useContext - allows us manage state globally instead of prop drilling.
Continue tomorrow...

You're learning the theoretical concepts of React
If writing it out makes it more understandable for you, I'm curious if you can deal with it practically too?

Anonymous6o6:


You're learning the theoretical concepts of React
If writing it out makes it more understandable for you, I'm curious if you can deal with it practically too?

I do both.

So I have been working on various practical example, using react. It includes a counter, a to-do list app which consist of a create, read, update and delete function.
It was fun doing it as I also have to research alot and make use of array methods in most cases such as the filter, map and others.

Deicide:
If you know react you already know like 70% nextjs

I will be moving to nextjs soon. Heard it's greater than React

React router up next.

Building something awesome, I have been making use of various hooks so far, I have used useState, useEffect,useRef,createContext,UseContext. I hope i am able to put out something awesome at the end of the day.


Routing
Navigating between different pages of our website, it is more like using the anchor tag in html.
firsts thing before using the react router we have to install the router package using npm install react-router-dom@6

using React Router

We have to import { BrowserRouter } from react-router-dom at the top of our file and wrap our app with
<BrowserRouter >
<App />
</BrowserRouter >

we have to ensure that our overall app is wrapped in it. nOw we can use it in our app.
To use it inour app we have to import { Routes,Route,Link } from react-router-dom and wrap the component we want to route to with the <Routes></Routes> and then call our component in Route, in this format <Route path="/" element={<HomePage />} />
<Route path="about" element={<AboutPage/>} />
<Route path="Contact" element={<ContactPage />} />

together:

<Routes>
<Route path="/" element={<HomePage />} />
<Route path="about" element={<HomePage />} />
<Route path="contact" element={<HomePage />} />
</Routes>
then we use our { Link } in a navbar or in place of a tag to move from page to page with reloading the webpage.

that is:

<nav>
<Link to="/">Home</Link>
<Link to="about">About</Link>
<Link to="contact">Contact Us</Link>
</nav>


React router also have what I will call hooks such as useParam(), useSearchParam(),useNavigate(),useLocation() etc.


Will write about how i made the counter and todoList soon and also drop the Link to the webpage.

I'm a react developer font end
Pls you can contact me on 08147364485 for any project or real time project

Whoops, been a long while I posted about progress made here, well I have been working on various practical example using react, like I said earlier I was able to create a to-do list app which enable CRUD, I was also able to create a git repo app which make use of useEffect hook to fetch data of repositories in my GitHub account, I also came across 2 challenges which I have worked on 1 but there is still improvement to be made while the 2nd one will be completed tomorrow.
The first is a music web app while the 2nd is a website for creatives, where they can sell their artwork and buyers can place bid for it, it also consist of a live auction page and a cart for items selected.
They are as follow.

https://git-repo-api-fetch./
https://musica-gerne./
https://artsy-silk./
https://simple-rating-card./

You can review them and drop your response, as it will help me improve and sharpen my skills. Thanks

A glimpse of what the artsy is like

2.

3.

A glimpse of musica, I'd love to add that it can play music and can move to the next song only when thw next button is clicked, i'd want to make it automatic and also the progress bar in orange like color show the progress of the song. If you have any idea how that can bbe done, let me know

I am also looking forward to sharpening my skills by working in collaboration with someone to bring designs to live.

Haven't posted here for a while because I was modifying the ARTSY website to be able to work with firebase database and paystack integration. Will most likely drop the result today and please do purchase an art from the ARTSY even if you won't pay, I want to be sure everything is working perfectly

Here is the link to the website
https://artsy-silk.vercel. app/ (remove the space between vercel. And app/
It has a realtime database where I can see your orders placed and email address of buyer, fill the relevant details. it also has a paystack integration that allow users choose which mode of payment.
Make use of the marketplace to place your order for the art you like.
Try it out and tell me what your experience is, I got the design from twitter, a guy called ossy.
Note, when it comes to key, use a combination of digit and letter and for safe code use 5 letter words .
https://artsy-silk./

EricBraven:
I am also looking forward to sharpening my skills by working in collaboration with someone to bring designs to live.

Can we do this together? I am a junior react developer

Laryfrosh:


Can we do this together? I am a junior react developer

If you have a project, I don't mind. We can work together.
Send GitHub link

I hate that React, so forking overrated!

chim14:
I hate that React, so forking overrated!

Why though, what stack are you?

Been a while, I have been working on something which is the building of the sellers page where the orders placed on ARTSY can be seen.
I have also moved on to nextjs, read the introduction and it sounds like it would be a lot of fun using it.what intrigue me most during the Introduction is the rendering, it has 3 rendering methods (client side rendering, static site generation and server side rendering). The client side rendering occur in the users browser that's why you see an empty white page first before the webpage gets painted/constructed.
Will share more as I learn. Will try to update everyday

EricBraven:

Why though, what stack are you?

I use mainly use vanilla javascript / jquery most of the time.

l also use mithril.js occasionally as my frontend framework depending on the project & need for it. But I try to use it as little as possible and mainly use the good old raw javascript.


.

EricBraven:
A glimpse of what the artsy is like

You try but HTML and CSS can do just this with ease

EricBraven:
2.

You tried, but this script is common on the web

EricBraven:
Here is the link to the website
https://artsy-silk.vercel. app/ (remove the space between vercel. And app/
It has a realtime database where I can see your orders placed and email address of buyer, fill the relevant details. it also has a paystack integration that allow users choose which mode of payment.
Make use of the marketplace to place your order for the art you like.
Try it out and tell me what your experience is, I got the design from twitter, a guy called ossy.
Note, when it comes to key, use a combination of digit and letter and for safe code use 5 letter words .
https://artsy-silk./

You're doing great, but you need to work on your UI/UX

2D patterning software and 3D to 2D pattern software are essential tools for designers and manufacturers. 2D patterning Windows software is ideal for creating patterns in a two-dimensional format, while 3D to 2D pattern software is perfect for converting 3D models into 2D patterns. Ultimately, the choice of which software to use will depend on the specific needs of the project at hand. Whether you’re designing a garment or creating a complex metal part, there’s a pattern-making software that’s right for you.

Website- https://mpanel.com/products/mpanel-software/