React JS Portfolio Project - React Training for Beginners

Create a quiz component as the main root and build question and answer components to render the quiz content, exporting the quiz and rendering it from index.js.

Wrap the quiz, question, and answer components with divs using className, render the score and current question (e.g., 1/8), and import index.css to apply styles.

Explore how React strict mode wraps the app to detect errors by rendering twice in development, and how to remove it to render the quiz in root.

Learn how the useState hook drives state management in React by declaring a current question index with a setter, starting at zero, and updating it to trigger renders.

Learn to replace multiple useState calls with useReducer in a quiz component, using an initial state object, a reducer, and dispatched actions like next question.

Move quiz state into a React context provider, access it with use context, and share state and dispatch across nested components using a reducer for scalable global state.

Render quiz questions by subscribing to a centralized quiz state via React context, using a questions array and the current question index to display the current question and total questions.

Dispatch the next question action from the quiz onClick to update the state and advance the current question index, illustrating declarative React rendering from state changes.

Implement a results page at the quiz end using a show results flag and current index, displaying 'you've got X of Y' and a restart action.

Learn to render quiz answers by merging correct and incorrect options, shuffling with a helper function, and mapping them with unique keys in the quiz context.

Implement on select answer with a callback, dispatch a select answer action with payload in a context store, highlight the answer, and track the final score and correct answer count.

Fetch real trivia questions from the trivia API in a React app, decode encoded strings, normalize API data, and update state with useEffect and dispatch to render the quiz.

Learn to handle API errors by catching fetch failures, dispatching a server error, updating quiz state with the error, and rendering a user-friendly error block instead of a broken UI.

deploy a React project to production by renting a cheap Hetzner server (€3/month), creating an Ubuntu standard instance, and preparing SSH login and password setup for deployment.

Configure nginx to serve a React app's static files from var/www/react-quiz.com/html, create a react-quiz.com.conf, test the configuration with nginx -t, and restart nginx to serve index.html for all routes.

Deploy a React app to production by building with yarn build or npm run build, uploading the build folder to server, and configuring a domain or hosts file with react-quiz.com.

Develop your React quiz app further by adding a screen to select quiz type and category using the Trivia API. Start the quiz with the chosen configuration.