React.js : beginner guide, Where To Start

Table Of Contents

• What Is React
• How It Works
• Is It Suitable For You
• Roadmap To Learn React

What Is React

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

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

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

<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

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

Overview Of React

Fireship 100 Seconds Of React

Learning Material For React

I Am Recommending This Because I Have Used It For Myself Also

• Brain Hold FrontEnd Masters Notes
• React Docs

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

Comments

[Shreyansh sheth]

Thanks For Your Advice. i Thought As Beginner You Have To Know What You Are Working With. But i'll Try To Improve In Following Blogs😉