React :things should to know before start

INTRO : 

hey, this is my first article in depth where i write about tech-skills (language, framework ...). i didn't use any code in 😅hope you give me your feedback 😃😃.

i m a react developer and i really enjoy using it, but before like many other people i have learned it alone so i get into a lot of mistakes (hope you don't) and i lost a lot of time and effort .since there was no guides,

so here's what i wished to know before starting with React :

1-Understanding the general concept :

The first step to learn a new tech is to understand how it works under the hoods. for react the hole concept is about rendering a component! that's it. react creates a virtual DOM (Documentation Object Model) than when there is a change between the real DOM and the virtual one it “reacts” to. and apply those changes. so try to think within this box.  

We have two types of component Class based and functional (functional ones are my preferred type💗).

I didn't want it to be too long so that we can focus on the next part.

2- Concepts you need to know  :

State:

Know how to create, read, update and delete data within your component , is very important. It may be with two different ways.

in CC (class component) we declare a state with each class, then we can access to data using OOP (Oriented Object Programming) rules inside the rendered code or functions. but basically I prefer the second one method because it's easier, we can't use state within SFC (Stateless Functional Component) so we use hooks! like UseState (my beloved) it makes your work easier, you can use as much hooks as you want in a single component. most important you can get rid of   OOP complexity (especially if your works get bigger).

hooks:

well I talked about UseState hooks, but there are a lot of to   learn, they make your work easier so be sure to put them on your to-learn  list.

PS: you can your own hook 😎

passing props:

Once your project get bigger, it's compulsory to  divide your project within files, for more scalability. but sometimes you need to use data within A (parent) inside B (child) .so   here you pass props from the level A to B. same goes for function. for example you want to render a list of item, you build a separate component called  Item.js  that render a single

item UI with params, then you import it in parent component and render the list where each Item.js take a specific params.

 

state management :

since I have talked about state in React I shall mention this  also:

if you have this structure A=>B=>C=>D , and each letter stands for a component . you want to use data from A inside D but you don’t need them in B neither A . So the old way is to pass data from parent to child until  we get to D . but this isn’t an efficient way to do things ,and the project will become slower and more code to write … so the solution is by using  special method ( I thinks they are 6 😂) to manage state between component .  when we need to use a specific data we just call it ! yes that’s easy .  but you  don’t need to know all of them !

personally I  use context API + hooks , Redux is most famous solution for , but it’s a little complicate so I advice you learn hooks and react Context .

Motion and UI  :

Working in front end is basically attracting the client , so you should add beautiful UI and animation to your project so you do your work .  React provide a variety of library to handle this . for animation  I m using React Motion , for designing there are a lot of choices . those library and tools help you  to develop fantastic UI very fast   

 

Consuming API and Handling request  :

Well, let’s say that this the most important things in our article. Again I want get into the code but I will try to give tips and tricks  . if you don’t understand what does it mean I advice to read Front-end VS Back-end : the full  story , it will simplify things .  Most lovely tool here is Axois , a famous package for handling request in React . you should learn it ! than you will need a fairly good understanding of asynchronous code in JS   and fetch  method.

And a lot of other thinks I won’t tell you about😈 . just kidding that’s all 😂! yes I know I  made it like rocket science but it’s just like this . those are some basic concept you have to learn and know , I won’t get into  details but just give initial point to start .

Hope you liked it. please give me feedback so I can enhance my work💪😍