Learn React Development: Build Real World React Web Application Using React.js, Context API, CSS
What you will learn
Build powerful, fast, user-friendly and reactive web app
See the step-by-step process of designing and assembling an project
Learn and understand what is React and how it works
Manage a project using a package-based architecture
Description
To get started with any framework you need to understand what all files you need to install. With React you donβt need to worry about this. React will install all the files required for you to get started with a single command. It will have all the necessary packages installed and you can start rendering and building your project at once.
Approach: React projects can be easily created using create-react-app CLI. Let us create a React project using create-react-app CLI.
Benefits:
- It helps you to create and configure React project in smooth and easy manner . An easy to start developing your project.
- Project is structured by default. All the components changes will be done in source folder. Node modules have separate folder with dependencies mentioned in package. Json file.
- React-scripts package is pre-installed which has Babel and Webpack configuration for you to run and deploy your project easily. A default view is set up for you to get started building your components .
- Compiler ,Build and Test environment is set up using this command. For testing @testing-library/jest-dom and @testing-library/react is already installed and you can run tests for your project.
- React is an open-source JavaScript library that helps you build user interfaces. It’s a component-based, declarative, “learn once and write anywhere” tool.
- With 164K+ GitHub stars, 30K+ forks, and close to ~10 million weekly downloads, React is undoubtedly a great user interface library to learn and use.
English
language
Content
Expense Tracker Application – React.js, Context API, CSS
Introduction To The Project
Folder Structure And Components
Creating Components
Creating Global Contexts
Transaction List
Add Transaction
Balance Component
Income Expense Component
Transaction and Global State
App Reducer and Dynamic Data
CSS And Finishing Up
Download the code files