This is a comprehensive course on React.js and React Native, the popular frameworks for building user interfaces with JavaScript. You will learn everything from the basics of React.js and React Native to advanced topics like hooks, custom components, navigation, state management, testing, deployment, and more. You will also build several projects along the way, including a calculator app, a blog app, a quiz app, a weather app, a chat app, and more. By the end of this course, you will have the skills and confidence to create your own web and mobile apps using React.js and React Native. 😎
- How to set up your development environment for React.js and React Native
- How to use JSX and props to create reusable components
- How to use hooks and custom hooks to manage state and effects
- How to use React Router and React Navigation to create different pages and transitions
- How to use Axios, JSON Server, Firebase Firestore, Storage, Authentication for fetching and manipulating data
- How to use Context API and Redux for global state management
- How to use Material UI, Styled Components, Expo Icons for styling your web app
- How to use native modules and libraries to access device features and enhance your mobile app
- How to test your web app with React Testing Library and Jest
- How to test your mobile app with Detox
- How to deploy your web app with Netlify or Vercel
- How to deploy your mobile app with Expo or App Store / Google Play Store
(Check out the website here)
| Day | Chapter Name | Read on Website | Read on GitHub |
|---|---|---|---|
| 1 | Introduction | Check Here for Better Experience | Check Here |
| 2 | Installation | Check Here for Better Experience | Check Here |
| 3 | Structure of a React App | Check Here for Better Experience | Check Here |
| 4 | JSX | Check Here for Better Experience | Check Here |
| 5 | Components | Check Here for Better Experience | Check Here |
| 6 | Styling Components | Check Here for Better Experience | Check Here |
| 7 | Props & Prop-types | Check Here for Better Experience | Check Here |
| 8 | Create Movie Website | Check Here for Better Experience | Check Here |
| 9 | Tools & If-Else & ternary | Check Here for Better Experience | Check Here |
(Check out the website here)
| Day | Chapter Name | Read on Website | Read on GitHub |
|---|---|---|---|
| 1 | Introduction | Check Here for Better Experience | Check Here |
| 2 | Installation | Check Here for Better Experience | Check Here |
| 3 | CreateApp & Debugging | Check Here for Better Experience | Check Here |
| 4 | Folder Structure | Check Here for Better Experience | Check Here |
| 5 | Hello World App | Check Here for Better Experience | Check Here |
| 6 | StyleSheet | Check Here for Better Experience | Check Here |
| 7 | Hook for Dark and light Mode | Check Here for Better Experience | Check Here |
| 8 | Unsupported class file major version 63 | Check Here for Better Experience | Check Here |
| 9 | Multi file Components | Check Here for Better Experience | Check Here |
- Calculator App: A simple calculator app that lets you perform basic arithmetic operations using React.js.
- Blog App: A blog app that lets you create, read, update, and delete posts using React.js, JSON Server, Axios, Material UI, and React Router.
- Quiz App: A quiz app that lets you answer multiple-choice questions on various topics using React.js, Open Trivia DB API, Styled Components, and Context API.
- *And many more... *
You can contribute your project
-
Weather App: A weather app that shows the current weather and forecast for any city in the world using OpenWeatherMap API. and Expo Location.
-
Chat App: A real-time chat app that lets you send messages, images, videos, and audio files using Firebase Firestore, Storage, Authentication, and Expo Image Picker / Camera / Audio / Video.
-
Todo App: A productivity app that lets you create, edit, delete, and mark tasks as done using AsyncStorage.
-
*And many more... *
You can contribute your project
To take this course,
you should have:
- Basic knowledge of HTML,
CSS,
JavaScript (ES6)
and React
-
A computer (Windows/Mac/Linux) with internet access
-
A code editor (VS Code recommended)
-
A browser (Chrome/Firefox/Safari)
-
An Android or iOS device or emulator/simulator
To start this course:
-
Clone this repository or download it as a zip file.
-
Open each project folder in your code editor.
-
Follow the instructions in each project's README file.
If you want to contribute to this course:
-
Fork this repository or create a new branch.
-
Make your changes or additions.
-
Create a pull request with a clear description of your changes.
We appreciate any feedback or suggestions that can help us improve this course. Thank you! 😊
This course is licensed under the MIT License - see LICENSE file for details.