| Project No. | Project Name | Live Project Link |
|---|---|---|
| 1 | Hello World App | Live Demo |
| 2 | Simple Counter | Live Demo |
| 3 | ||
| 4 | ||
| 5 | ||
| 6 | ||
| 7 | ||
| 8 | ||
| 9 | ||
| 10 | ||
| 11 | ||
| 12 | ||
| 13 | ||
| 14 | ||
| 15 | ||
| 16 | ||
| 17 | ||
| 18 | ||
| 19 | ||
| 20 | ||
| 21 | ||
| 22 | ||
| 23 | ||
| 24 | ||
| 25 | ||
| 26 | ||
| 27 | ||
| 28 | ||
| 29 | ||
| 30 | ||
| 31 | ||
| 32 | ||
| 33 | ||
| 34 | ||
| 35 | ||
| 36 | ||
| 37 | ||
| 38 | ||
| 39 | ||
| 40 | ||
| 41 | ||
| 42 | ||
| 43 | ||
| 44 | ||
| 45 | ||
| 46 | ||
| 47 | ||
| 48 | ||
| 49 | ||
| 50 |
- How to install node.
- How to setup React.
- Modifying app.js file.
A simple react project which prints Hello World.
Click the following image to view Project
Coming Soon...
- Basic Concept of Component.
- React State.
- Creating a Simple Counter Component.
A simple counter project which allows you to increment, decrement and reset a value by clicking the respective buttons.
Click the following image to view Project
Coming Soon...
- How to create and reuse components when needed.
- How to use same components to make similar types of contents (which is the react's one of the best features).
This tiny project belongs to a simple UI which shows a list of products. Each section of products looks similar, but different in data which invokes developers to use React in their app.
Click the following image to view Project
Coming Soon...
- How react state works.
- How to use useState() and useEffect() function.
This react project generates a random quote while you press Generate Random Quote button.
Click the following image to view Project
Coming Soon...
- React Component and Props Core Concept.
- React State and Lifecycle in Class Component.
- React Event Handling and Control Re-rendering.
- How to Prevent Re-rendering A Child Component When A Parent Component Rendered.
- Passing Property to A Component.
- Conditional Rendering
This app display a simple clock and convert its language from Bangla to English and vice versa if you press the Change Language button.
Click the following image to view Project
Coming Soon...
- React Lifting State Up.
- React State Management.
- Best Practice about State.
- Concept and Benefits of Uni-directional or Top-Down Data Flow in React.
- How to Think Clearly About Splitting a Large App.
This app asks for a temparature in Celsius or Fahrenheit from users and displays the temparature in other format. Again this app displays whether the water will boil or not according to the provided temparature. This is a very simple project, but after completing this project according to me, you'll learn a lot. My promise! :D
Click the following image to view Project
Coming Soon...
- React Higher Order Components (HOC).
- How to User HOC.
- Benefits of Using HOC.
This is too small counter and mouse hover app. While you click, the counter will increase and while you hover mouser, the hover counter will increase as well. The main purpose to create this app is to let you understand HOC and its benefits in React.
Click the following image to view Project
Coming Soon...
- React Render Props.
- How to User Render Props Technique.
This is too small counter and mouse hover app. While you click, the counter will increase and while you hover mouser, the hover counter will increase as well. The main purpose to create this app is to let you understand Render Props concept in React.
Click the following image to view Project
Coming Soon...
- React Context API Technique.
This is another tiny project that changes the background of the content if Chnage Theme button is pressed. The main purpose for this project is to use the concept of Context API technique in React Project.
Click the following image to view Project
Coming Soon...