How to Enter React World
Motivation
This post describes what it takes to enter react world
Target audience
Anyone that wants to enter React world and learn on his own .
By entering i mean :
- Master react main concepts
- Build react SPA
Minimal required knowledge
Data : HTML
- Tag
- DOM
- Element attributes
- Heading
- Paragraph
- Text formatting
- URL
- Link
- Image
- Table
- List
- Form
- Input
- IFrame
- Comment
- Drop Down List
- File Path
- Class , id
- style
- script
Styling : CSS
- Css syntax
- Element\id\class selector
- Comment
- Inline\internal\external css
- Color
- Background color\image
- Css box model : margin , border , padding , content
- Width , height
- Text
- Font
- Icons
- Display : inline , block , inline-block
- Position : static , relative , fixed , absolute
- Overflow : visible , hidden , scroll , auto
- Float
- Align
- Pseudo class
- Css combinators
- Attribute selectors
Programming language : JavaScript
Programming :
- Script tag
- Style attribute
- Output : innerHTML , window,alert , console.log
- Statement
- Comment
- Variables
- Operators : assignment , arithmetic , logical , comparison
- Data types
- Functions
- Variables scope : local , global , auto
- Objects
- Events : onclick , onchange , onload , onmouseover
- Conditions
- Loops
- Array
- Debugging
- DOM : createElement , getElementById , appendChild , removeChild , setAttribute, document.body
- String
JSON
- Json definition
- JSON.parse
- JSON.stringify
- Json syntax
- Data types in json
AJAX
- What is Ajax
- Ajax Request
- Ajax Response
- XMLHttpRequest
- ReadyState
- Server status
Remark :
- The order of learning is : HTML -> CSS -> JavaScript
How to learn
I consider two options :
- Learn from an online course
- Learn from tutorials , videos , books
In general i consider video as better than tutorial \ books because in the video you operate your ears and eyes while operating only your eyes during reading.
I prefer to start with online course because it is organized as step by step which make learning easy.
However, there may be times during the online course when i find myself not fully understanding specific subject, at this point i will look for tutorial \ videos on the internet and once i understand i get back to the online course. This can happen a few times
How to digest what you learn
An online course has :
- Lessons
- Chapters
I suggest you to practice immediately after every lesson by coding tiny samples.
I suggest you to practice immediately after every chapter by coding bigger samples.
I suggest you to practice immediately after the course by coding few projects \ applications.
Practicing this way has few benefits :
- It gives you a sense of progress
- It is the only proof you have that you truly understand what you are learning
- The projects that you do becomes part of your portfolio and give you experience
Remarks :
- Start practicing immediately after every concept that you learn even while in the same lesson !!
2. I prefer courses with :
- Short lessons
- One concept per lesson
- Quiz\assignment\coding exercise after every lesson
Which react concepts to learn
- Component (stateless \ stateful)
- Next generation JavaScript
- React project setup
- JSX
- State
- Props
- Events
- Unidirectional data flow
- Styling
- Rendering list and using keys
- Component Life Cycle
- Routing using react-router
- Single Page Application
How to continue
Practice coding in many react projects as you can : a web application , generic form , authentication starter project …., build a portfolio , insert it to github.
More concepts
There is much more to learn : redux , context , hoc …. . However, i suggest that you will continue with more concepts only after you have practiced and feel that you can code a react project on your own
