React.js : beginner guide, Where To Start
Tags: react, javascript, webdev
Published: 2021-10-01 09:03:33

##  Table Of Contents
 * [What Is React](#what-is-react)
 * [How It Works](#how-it-works)
 * [Is It Suitable For You](#suitable)
 * [Roadmap To Learn React](#roadmap)

### What Is React <a name="what-is-react"></a>

React Is A Javascript Library To Build User Interfaces. Think Of It As Simple Web Library That You Can Inject Through `<script>` Tag. 

#### Main Features Of React That Attracts Peoples
- It Has Huge Community
- Library Is Declarative And Easy-To-Understand
- It Is Component Base
- Back By Facebook And Used In Many Morden Web Applications
- Different Production Ready Frameworks Build upon It
- You Can Use JSX To Write Components And It Makes It So Much Easy Rather Than Using Templates

### How It Works <a name='how-it-works'></a>

It Uses Virtual Dom To Handle State And All Its Component And React Based On State Changes. And Updating Virtual Dom Update Browser Dom.

```javascript
React.createElement(
  'h1',
  {className: 'heading'},
  "hey reader"
)
```

React Is Just Library And If You Want To Work With Its True Potential You Have To Use Bable To Transpile All JSX into browser-javascript

Above Component In Jsx is littraly
```jsx
<h1 className='heading'>hey reader</h1>
```
But You Don't Have To Worry About This Transpiling Things Because All The Framework Build On Top Of React Just Do That Automatically.

### Is It Suitable For You <a name='suitable'></a>

For Most Cases React Is Completely Suitable To Work With Because It Provides 1000s' Of Open-Sources Community Library That Is Help To Solve So Many Problems.

But, It Is Recommended To Just See What You Want To Achieve And It Is Too Overkill To Use React In That Scenario.

### Roadmap To Learn React <a name='roadmap'></a>

#### Overview Of React
[Fireship 100 Seconds Of React](https://www.youtube.com/watch?v=Tn6-PIqc4UM)


#### Learning Material For React

*I Am Recommending This Because I Have Used It For Myself Also*
- [Brain Hold FrontEnd Masters Notes](https://btholt.github.io/complete-intro-to-react-v6/)
- [React Docs](https://reactjs.org/docs/getting-started.html)

#### List Of Things To Learn
**Follow List To Get Better Understanding**
*I Have Bias In Some Library Than Other Just Because I Have Learned It And My Experience With That Libraries*

1. Starter Project (Vite.js, Create-React-App)
2. How JSX & Babel Works With Bundlers
3. React Functional Components (*You Can Use Class Components But Functional Is Easy To Use & Learn*)
4. Lifecycle In Functional Components
5. UseState Hook In Functional Component
6. Props In React
7. Build Todo Application With It With Each Todo item is its own component. Use State & lifecycle Hooks Along With Props.
8. Learn UseContext Hook & Improve Above Todo App With This Hook
9. Learn UseMemo, UseReducer Hooks
10. Learn About React-Router Or Reach Router To Create Different Pages And Make Use Of Them In Above Application
11. Learn Different CSS & Components Library To Style Above Application.
12. Learn About State Management Like Recoil & Redux (*"Redux Is Too Complicated And Takes Lots Of Time And Also You Probably Don't Need Redux So Be Careful & Select One You Like"*)
13. Learn About Single Page App, Static Site Generation And Server-Side Rendering
14. Use Gatsby Or Next.js For Simple Project And Learn About Them.
15. Use Typescript With React.
16. Learn About One Last Thing That Is Datafetching And Error Handling
 - use ReactQuery Or Swr For Datafetching And Caching

*Feel Free To Comment About Your Opinions & Improvement In This List And Blog*