How to Get Started
Let's get started.
It could be overwhelming when you first start to learn React. You are bombarded with terminologies like "state" and "hooks" and what-have-you.
And, you could try to fix your confusion by watching half a dozen videos, consult the official documentation, go over threads tagged with "reactjs" on StackOverflow, read blog entries here and there, and so much more.
But , then, you are likely to feel like you are just running around like a hamster on a wheel. You are absorbing information, but without actually learning anything of practical use.
Let's solve that problem. Let me show you how to properly learn React in a reasonable time (usually a week to a month, depending on your time commitment and so on).
The key is to build React apps as you learn the framework.
While some tutorials (videos and articles) use this project-based approach to teaching ReactJS, others just walk you through the common concepts (hooks, state management, props, styling, etc.) using simple code samples that don't really help you learn as you should.
So, here are the types of projects, in increasing degrees of complexity, that you should build as you learn React.
1. About Me:
A personal profile app is a good first app to build. There is no sophisticated styling or API calls or complex form processing.
You can divvy up the app's UI into a few components:
- Header: to display the header section of the app
- Footer: To display your app's footer. Put your copyright info here, if you like.
- AboutMe: This component will display personal biographical information about you such as your name, professional background, hobbies, etc.
While developing this app, you should focus on building these skills:
- Basic setup of a React app
- How to use the root App component (in the src/App.js file) to render your app's custom components
- How to create basic React components and render them side by side
- Basic JSX markup and syntax.
2. Portfolio App
This app should have the following components:
- Header: This component should appear on every page of the app
- Footer: The footer should also appear at the bottom of every page.
- Home: To serve as the root route/entry point of your application. Have an intro paragraph in here. Provides links to your "About Me" and "Portfolio" pages/components
- AboutMe: To provide biographical details about you.
- Portfolio: To show your work history and projects you have worked on (as a hobby, open source code, etc.)
- ContactMe: To render a form that a user/potential employer can fill in to send you a message.
While developing this app, you can focus on building these skills:
- Creating and rendering basic React components (See the React components guide for a walkthrough of the basics)
- Styling your components (using: inline styles, JavaScript object styling, dynamic styling or using an external stylesheet or RWD framework like Bootstrap, etc.). See the (ready-to-publish in a few days) How to Implement Simple and Dynamic Styling in your React App.
- How to render, style and handle events from a "controlled form."
3. Personal Blog
This should not be anything overly complex. You want to create a blogging app that has these components:
- Header
- Footer
- CategoryList: to show the list of content categories on your blog
- CategoryDetail: To show details about a category and the list of blog posts in that category
- PostDetail: To show the title and body of a blog post, and similar details
- SubmitComment: A form to let a user post a comment on a blog post.
This component should be rendered inside the PostDetail component.
- CommentList: To show the list of comments posted on a blog post.
This component should be rendered in the PostDetail component.
While developing this app, you should focus on building these skills:
- How to create "parent" and "child" components in React
- How to share component data/state between components using "props"
- Basic form processing and event handling
- Basic Routing. Your app should have these routes:
- root "/": To render the CategoryList component
- "/:categoryId": To render the CategoryDetail component
- "/:categoryId/postId": To render the PostDetail component
- Basic API calls: You can use:
- axios-http: To make the API calls. Learn how to make GET and POST calls. (As a bonus, you can also learn how to make PUT, UPDATE and DELETE calls to the API. It is all in the Axios docs in that link.)
- https://jsonplaceholder.typicode.com/: To test making API calls. Look at their docs to note the endpoints for the /posts and /comments/ APIs and the HTTP methods supported.
- React Hooks: You should be using a few built-in React hooks including:
4. Single-Store App
Develop an app that shows the list of product categories and the lists of products in each category to the shopper.
You can mock the actual "payment"/"ordering" so you don't have to call an external API (from Stripe, Paypal, etc.) to place an order.
(Or, you can use the development "sandboxes" that these services offer to make dummy payments using their systems. That will be another learning experience, but it will be worth it. It is up to you.)
This app is a bit more complex and should have these components (and, potentially, more):
- Header
- Footer
- Home: A welcome message and links to the current list of product categories.
- CategoryDetail: Shows a description of this product category as well as the list of products in the category.
- ProductDetail: Shows the name, image, description and price of a product.
- Cart: This should show the list of products a shopper has added to his cart as well as the cumulative total price of all the products in the shopper's cart/basket.
While developing this app, you should focus on building these skills:
- How to create, render and pass data between "parent" and "child" components
- Using a state management library like the Redux or React's built-in Context API to manage the complex state/data of categories, products and shopping carts.
- Properly style your components using an RWD framework like Bootstrap or Material Design (unless you have got some very cool CSS chops to show.)
- Routing: You should build on your knowledge of using the react-router-dom v6 (or later) to build routes for the various components of the app that should be ideally on a "page" of their own.
- Authentication: You can either mock or implement this for the app. This would enable a user to login and view the products in his shopping cart, etc.
5. Photo App
With this app, you are learning how to render images, organize images and do some authentication. You will also be doing some form-handling to enable a registered user to upload photos or to view the photos uploaded by other users.
This app will build on the skills you used when building the Blog and Store apps. So, if you did those two justice, this one should be a breeze, God willing.
Your photo-sharing app should have these components:
- Header
- Footer
- Home : With links to the registration page and the list of photo albums currently on the app.
- Register: To enable new users to sign up
- LogIn: To let registered users log in
- Profile: A profile of the user with bi (brief) bio, list of Albums he has created, etc.
- AlbumList: A user's list of photo albums
- AlbumDetail: An album with a list/thumbnails of the photos in it. And, a link to each photo.
- PhotoDetail: To render the full photo, as well as some info like the Album it belongs to, when it was uploaded and button to delete it (assuming the user viewing it is the user that uploaded the photo
While developing this app, you should focus on building these skills:
- Managing component relationships: Parent-Child and "sibling" components.
- Authentication and Authorization (Permissions)
- Routing
- Image Rendering: thumbnails creation, etc.
- Styling your components
- Making API Calls: To create (POST), retirieve (GET), change (UPDATE or PUT) and remove (DELETE) your albums and photos.
- Using a state manager (like the Context API or Redux) to manage the complex global (i.e "app-wide") state of your app.
As you build your apps, make sure you:
- Create a GitHub account for yourself
- Create a repo for each of these apps
- make regular (and sensible) commits;
- and push the repo to your GitHub account so that it can be viewed later on by potential colleagues and employers
- Write docs for each app you create. A README.md file is more than good enough. This shows (anyone looking at your app's code):
- That you know what you are doing
- Understand the React concepts that you are using
- A preview of how your beautiful mind works when it comes to deciding how to use what you know to develop the apps you want.
Best Practices
- Learn One Thing at a Time: Don't try to learn all the hooks at once. And, don't try to learn both Redux Toolkit and the Context API at once. Don't jump from one React package to another either.
Stay focused and master a library or aspect of React before you move on to another. Don't fall for the "shiny object" syndrome.
There is a software package update released almost every week. That doesn't mean you should abandon your current learning track to pick up the "new thing" everyone is talking about in your forum or social media group or your company's "Sprint Call."
Stay focused so you can be a better developer than the "Jumpy Joes" that get excited by every new feature, package launch or library update.
- Learn from the Official Docs: Youtube crash courses are a good way to get quickly introduced to a new feature of React (or any other libraries or frameworks you use). Blog posts are also a good starting point.
But, do you know what is the best (and most accurate) reference for your web development framework? The official docs.
So, for ReactJS, that means heading over to react.dev and following the official "Quick Start" guide and tutorials.
Then, dive deep into the documentation for any of its features (routing, state management), APIs and hooks (`useState()`, `useEffect()`, `useRef()`, `useContext()`, etc.)
This way, that you learn what these things are supposed to do from the people who developed them before you go binging through Youtube tutorials and blog posts (both of which are subject to the content creator's limited experience, exposure and general understanding with that framework, tool or feature).
After all, who is better suited to created a product manual? The product creator or a user? The same thing applies here.
- Document your Learning: Take a copious amount of notes, document bug fixes, write articles or create slides or videos to explain concepts you have learned and worked with. Polish and publish these notes on your Github profile or a blog post.
- Develop More Apps Regularly: Build developer "muscle memory" as you build more app, encounter and fix more bugs, etc. Don't just go over every tutorial suggestion you find on Youtube or your favorite social media group.
Build a React app every other week or every month, depending on your personal and professional schedule. But, never let a month go by without building an app. If you do, you will always come back and find out that you have to relearn old concepts and fix old bugs that you thought you had already learned and know how to fix. Don't be "that guy!".
Build more React apps to cement your understanding of concepts you have learned, enounter bugs that are unavoidable and then master React by learning to fix those bugs (and avoid similar ones in the future) like the pro that you have become.
Theory is good, developing apps makes you a better developer. So, work on becoming one.
Then, share the link to your app's repo (on Github, etc.) on your social media profile, developer group and team. Then, take the criticism and critique like a pro.
Thank you for taking the time to learn with me.
Now, go and get on coding ... React apps. And, work on being a master Frontend Developer in no time.
Technical Reference
If you have any questions, comments, corrections, please, add them below.