Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,143,387 members, 7,781,107 topics. Date: Friday, 29 March 2024 at 09:02 AM

My Journey As A Software Developer. Learning REACT - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / My Journey As A Software Developer. Learning REACT (2297 Views)

I Started Learning React 2 Weeks Ago, And I Was Able To Build This / Is It Too Early To Start Learning React? / Becoming A Badass Developer Learning, Building And Growing With Zuri (2) (3) (4)

(1) (2) (Reply) (Go Down)

My Journey As A Software Developer. Learning REACT by EricBraven: 2:04pm On Feb 15, 2023
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.

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 5:50pm On Feb 19, 2023
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.

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 5:57pm On Feb 19, 2023
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.
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 6:04pm On Feb 19, 2023
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...
Re: My Journey As A Software Developer. Learning REACT by Deicide: 6:32pm On Feb 19, 2023
If you know react you already know like 70% nextjs
Re: My Journey As A Software Developer. Learning REACT by Anonymous6o6: 9:04am On Feb 20, 2023
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?

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 12:50am On Mar 02, 2023
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.
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 12:54am On Mar 02, 2023
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.
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 12:56am On Mar 02, 2023
Deicide:
If you know react you already know like 70% nextjs
I will be moving to nextjs soon. Heard it's greater than React
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 12:56am On Mar 02, 2023
React router up next.
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 7:01pm On Mar 02, 2023
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.
Re: My Journey As A Software Developer. Learning REACT by Channeltracy(m): 9:46pm On Mar 06, 2023
I'm a react developer font end
Pls you can contact me on 08147364485 for any project or real time project
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 9:09am On Mar 19, 2023
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

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 9:34am On Mar 19, 2023
A glimpse of what the artsy is like

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 9:35am On Mar 19, 2023
2.

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 9:36am On Mar 19, 2023
3.

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 9:43am On Mar 19, 2023
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

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 9:44am On Mar 19, 2023
I am also looking forward to sharpening my skills by working in collaboration with someone to bring designs to live.

1 Like

Re: My Journey As A Software Developer. Learning REACT by EricBraven: 12:46pm On Apr 04, 2023
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
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 1:16pm On Apr 04, 2023
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./

1 Like

Re: My Journey As A Software Developer. Learning REACT by Laryfrosh: 3:24am On Apr 07, 2023
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
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 4:55am On Apr 07, 2023
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
Re: My Journey As A Software Developer. Learning REACT by Laryfrosh: 6:44am On Apr 14, 2023
EricBraven:

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

https://github.com/hilary017
Re: My Journey As A Software Developer. Learning REACT by chim14(m): 12:06am On Apr 15, 2023
I hate that React, so forking overrated!
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 6:07am On Apr 15, 2023
chim14:
I hate that React, so forking overrated!
Why though, what stack are you?
Re: My Journey As A Software Developer. Learning REACT by EricBraven: 6:13am On Apr 15, 2023
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
Re: My Journey As A Software Developer. Learning REACT by chim14(m): 8:31am On Apr 27, 2023
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.


.
Re: My Journey As A Software Developer. Learning REACT by Tim1212(m): 11:54pm On Apr 27, 2023
EricBraven:
A glimpse of what the artsy is like

You try but HTML and CSS can do just this with ease
Re: My Journey As A Software Developer. Learning REACT by Tim1212(m): 11:57pm On Apr 27, 2023
EricBraven:
2.

You tried, but this script is common on the web
Re: My Journey As A Software Developer. Learning REACT by Tim1212(m): 12:01am On Apr 28, 2023
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
Re: My Journey As A Software Developer. Learning REACT by mpanelsoftwares(m): 7:37am On May 01, 2023
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/

(1) (2) (Reply)

1. Learning Android Programming / Should You Study Computer Science To Learn How To Code? / What Kinds Of App Cn Be Built With Android Studio Software?

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 53
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.