Explore

Scary Halloween React Project 🎃👻

For a Halloween-themed REACT app, here are some ideas for the concept, theme, and code:

Concept:

* Develop a mobile app that allows users to create their own virtual Halloween costumes. * Users can choose from a variety of backgrounds, shapes, and colors to create their own unique costume. * The app could also include a feature for users to take a photo of themselves in the costume and share it on social media.

Theme:

* Halloween Video Game Adventure: Create a REACT app that takes users on a spooky adventure through different levels, each with its own unique Halloween theme. * Users can collect candy, avoid ghosts, and solve puzzles to progress through the game. * The app could also include a leaderboard for users to compete with their friends to see who can complete the game the fastest.

Getting Setup:

To set up the "Haunted House Explorer" as a React project in Visual Studio Code, you can follow these steps:

Install Node.js and npm:

Before you can create a React project, you need to have Node.js and npm (Node Package Manager) installed on your computer. You can download and install them from the official website:

https://nodejs.org/⁠

⁠

Create a React App:

Make sure you start by doing npm i react

Open your terminal or command prompt and navigate to the directory where you want to create your React app. Then, run the following command to create a new React app using

Create React App:

///

Success! Created my-haunted-house at C:\lab_react_Oct31b\my-haunted-house\my-haunted-house Inside that directory, you can run several commands:

npm start Starts the development server.

npm run build Bundles the app into static files for production.

npm test Starts the test runner.

npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd my-haunted-house npm start

Happy hacking!

///

npx create-react-app my-haunted-house

This command will create a new directory named my-haunted-house containing all the necessary files and folders for your React app.

Navigate to the Project Directory:

After the project is created, navigate to the project directory using the terminal:

cd my-haunted-house

Open the Project in Visual Studio Code:

Open Visual Studio Code

This will open the current directory (your React app) in Visual Studio Code.

Start the Development Server:

In Visual Studio Code, open a new terminal inside the editor (Terminal -> New Terminal). Make sure you are in the project directory (my-haunted-house). Then, start the development server by running:

npm start

This will launch the development server, and your Haunted House Explorer app will be accessible at http://localhost:3000 in your web browser.

Code Implementation:

You can now create the components (HauntedHouse, RoomOne, RoomTwo, RoomThree, Door) and add the code you mentioned earlier for your Haunted House Explorer app. You can place these components in the src directory of your project. Solution:

⁠

https://github.com/computationalknowledge/hauntedhouse/blob/main/starterfile1.js⁠

⁠

Run the App:

As you make changes to your code, the app will automatically update in the browser. Open your web browser and navigate to http://localhost:3000 to see your Haunted House Explorer app in action.

That's it! You've successfully set up your Haunted House Explorer React project in Visual Studio Code. You can now start building and customizing your spooky haunted house adventure.

Note:

In your Door.js component, you can import the room components (e.g., RoomOne, RoomTwo, RoomThree) from their respective files. Here's how you can do it:

Assuming your Door.js, RoomOne.js, RoomTwo.js, and RoomThree.js components are located in the same directory (e.g., the src directory), you can import them like this:

jsxCopy code

import React from 'react';

import { Link } from 'react-router-dom'; // Import Link from React Router if not already imported

import RoomOne from './RoomOne'; // Import RoomOne component

import RoomTwo from './RoomTwo'; // Import RoomTwo component

import RoomThree from './RoomThree'; // Import RoomThree component

function Door() {

return (

<div className="door">

<h1>Choose a room to enter:</h1>

{/* Use Link to navigate to different rooms */}

<Link to="/room-one">Room One</Link>

<Link to="/room-two">Room Two</Link>

<Link to="/room-three">Room Three</Link>

</div>

);

}

export default Door;

In this example:

We import the RoomOne, RoomTwo, and RoomThree components using relative paths ('./RoomOne', './RoomTwo', './RoomThree') assuming they are in the same directory as Door.js.

We also import Link from react-router-dom to create navigation links.

Inside the component's JSX, we use the Link component to create links to navigate to the respective rooms. These links should match the routes defined in your React Router configuration.

Make sure you have set up your React Router routes to handle these paths (e.g., '/room-one', '/room-two', '/room-three') and render the corresponding room components.

Haunted House Activity 2:

* Using React Hooks to manage state and side effects * Using Redux to manage the global state of the app * Using React Router to manage the routing of the app * Using WebSockets to connect to a backend server and handle real-time updates

Here's a basic example of how the code for the Halloween Video Game Adventure app could look: ```jsx import React, { useState, useEffect } from 'react'; import { useHistory } from 'react-router-dom'; import { useWebSockets } from 'react-websocket';

function HalloweenGame() { const history = useHistory(); const [gameState, setGameState] = useState({ level: 1, score: 0, candies: 0, ghosts: [] }); const [websocket, setWebsocket] = useWebSockets();

useEffect(() => { // Connect to the backend server websocket.connect();

// Set up event listeners for message and error websocket.addEventListener('message', (event) => { const data = JSON.parse(event.data); setGameState(data); });

websocket.addEventListener('error', (event) => { console.log('WebSocket connection error:', event); }); }, []);

const handlePress = () => { // Update player score and candies setGameState((prevState) => ({ ...prevState, score: prevState.score + 10, candies: prevState.candies + 5 })); };

const handleGhostPress = (ghost Index) => { // Update ghost list setGameState((prevState) => ({ ...prevState, ghosts: [...prevState.ghosts, { index: Index, score: 0 } ] })); };

return ( <div> <h1>Halloween Video Game Adventure</h1> <button onClick={handlePress}>Get more candies!</button> <ul> {gameState.ghosts.map((ghost, Index) => ( <li key={Index}>{ghost.index} - {ghost.score}</li> ))} </ul> <button onClick={() => history.push('/next-level')}>Go to next level</button> </div> ); }

export default HalloweenGame; ``` Of course, this is just one possible approach, and there are many ways to skin this cat. I hope this helps give you an idea of how to get started with your project! 🎃👻

Also, here is a sample data for the Halloween costume creator: ```jsx import React from 'react';

function HalloweenCostumeCreator() { const [costume, setCostume] = useState({ name: '', background: 'medium', shape: 'pumpkin', color: 'orange', accessories: [] });

const handleInputChange = (event) => { setCostume({ ...costume, [event.target.name]: event.target.value }); };

const handleAddAccessory = () => { setCostume({ ...costume, accessories: [...costume.accessories, { name: ' Spooky Prop', description: 'A spooky prop to complete your costume' }] }); };

return ( <div> <h1>Create Your Halloween Costume</h1> <form> <label> Name: <input type="text" name="name" value={costume.name} onChange={handleInputChange} /> </label> <label> Background: <select value={costume.background} onChange={handleInputChange}> <option value="medium">Medium</option> <option value="light">Light</option> <option value="dark">Dark</option> </select> </label> <label> Shape: <select value={costume.shape} onChange={handleInputChange}> <option value="pumpkin">Pumpkin</option> <option value="skeleton">Skeleton</option> <option value="witch">Witch</option> </select> </label> <label> Color: <select value={costume.color} onChange={handleInputChange}> <option value="orange">Orange</option> <option value="green">Green</option> <option value="purple">Purple</option> </select> </label> <button onClick={handleAddAccessory}>Add Accessory</button> </form> <ul> {costume.accessories.map((accessory, Index) => ( <li key={Index}>{accessory.name}</li> ))} </ul> <button onClick={() => console.log('Your costume is:', costume)}>See Your Costume</button> </div> ); }

export default HalloweenCostumeCreator; ``` This is just a simple example, but you can add more features such as different accessories, hair styles, and makeup.

Lab 2 🎃👻 Here's a fun Halloween-themed React app idea: The Halloween Candy Counter.

Concept:

The app allows users to "collect" candies as they click on a "Trick or Treat" button. Each click randomly selects a candy from a predefined list and displays it on the screen. The user can see a list of all the candies they've collected, and the total count of each candy.

Theme:

The app should have a dark, spooky background, perhaps with silhouettes of haunted houses, bats, and a full moon. The "Trick or Treat" button can be styled like a carved pumpkin.

Libraries:

create-react-app for bootstrapping the app.

styled-components for styling.

Code:

Setup:

bashCopy code

npx create-react-app halloween-candy-counter cd halloween-candy-counter npm install styled-components

App.js:

jsxCopy code

import React, { useState } from 'react';

import styled from 'styled-components';

const candies = [

'Snickers',

'Kit Kat',

'Twix',

'M&Ms',

'Reese’s',

'Skittles'

];

const AppContainer = styled.div`

background-color: black;

color: white;

height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background-image: url('path_to_spooky_background.jpg'); // Replace with your spooky background

background-size: cover;

const TrickOrTreatButton = styled.button`

background-color: orange;

border: none;

padding: 10px 20px;

font-size: 1.5em;

border-radius: 10px;

cursor: pointer;

margin-top: 20px;

const CandyList = styled.ul`

list-style-type: none;

padding: 0;

const CandyItem = styled.li`

margin: 5px 0;

function App() {

const [candyCollection, setCandyCollection] = useState({});

const handleTrickOrTreat = () => {

const randomCandy = candies[Math.floor(Math.random() * candies.length)];

setCandyCollection(prev => ({

...prev,

[randomCandy]: (prev[randomCandy] || 0) + 1

}));

};

return (

<h1>Halloween Candy Counter</h1>

Trick or Treat!

</TrickOrTreatButton>

{Object.entries(candyCollection).map(([candy, count]) => (

{candy}: {count}

</CandyItem>

))}

</CandyList>

</AppContainer>

);

}

export default App;

index.css (reset some default styles):

cssCopy code

body {

margin: 0;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

code {

font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

monospace;

}

Explanation:

The app uses the useState hook to manage the state of the candy collection.

Each time the "Trick or Treat" button is clicked, a random candy is selected from the candies array and added to the candyCollection state.

The candyCollection state is an object where the keys are candy names and the values are the counts of each candy.

The app displays a list of candies and their counts using the Object.entries() method to iterate over the candyCollection object.

The app is styled using styled-components for a Halloween theme.

This app provides a fun way for students to practice React state management and styling with styled-components. They can further enhance the app by adding animations, sounds, or even integrating with a backend to store the candy collection.

Lab 3 Create a Halloween-themed React app.

We'll create a simple yet fun app that changes the face of a pumpkin when clicked. This project will help students understand the concept of states in React and how to handle events.

Concept

The app will display a pumpkin with a default face. When the pumpkin is clicked, its face will change randomly. This will be achieved by using different images for the pumpkin faces and changing the state of the image source on each click.

Theme

The theme of the app is Halloween, so we'll use pumpkin images. The background of the app can be a Halloween-themed image or video to enhance the festive feel. We can also add sound effects that play when the pumpkin is clicked to make the app more interactive and fun

1⁠

Code

Here's a basic outline of the code for the app:

javascript

import React, { useState } from 'react';

import './App.css';

function App() {

const [pumpkinFace, setPumpkinFace] = useState('defaultFace.png');

const changeFace = () => {

const faces = ['face1.png', 'face2.png', 'face3.png', 'face4.png'];

const randomFace = faces[Math.floor(Math.random() * faces.length)];

setPumpkinFace(randomFace);

};

return (

</div>

);

}

export default App;

In this code, we're using the useState hook to manage the state of the pumpkin face. The changeFace function is called when the pumpkin image is clicked, changing the face to a random one from the faces array

3⁠

⁠

6⁠

Libraries

For this project, we can use Create React App to set up the project structure quickly and efficiently

8⁠

. We can also use a UI library like Material UI to style the app and make it look more appealing

8⁠

Next Steps

To make the app more interesting, you could consider adding more features. For example, you could add a counter that keeps track of how many times the pumpkin has been clicked, or add different sound effects for each face. You could also add a reset button that sets the pumpkin face back to the default

1⁠

Lab Haunted House Explorer

Here's a fun project that your students can work on today:

Project Name: Haunted House Explorer

Concept:

Create a React app that allows users to explore a haunted house. The app should have different rooms, each with its own spooky atmosphere and interactive elements. Users can navigate through the house by clicking on doors or objects in each room.Theme: Halloween, Spooky, Haunted House

Theme: Halloween, Spooky, Haunted House

Code: 1. Set up a basic React app using create-react-app: ```bash npx create-react-app my-haunted-house ``` 2. Create a new component called `HauntedHouse` in the `src` folder: ```jsx // src/HauntedHouse.js import React from 'react'; function HauntedHouse() { return ( <div className="haunted-house"> <h1>Welcome to the Haunted House!</h1> <Door /> <RoomOne /> <RoomTwo /> <RoomThree /> </div> ); } export default HauntedHouse; ``` 3. Create three separate components for each room in the house: ```jsx // src/RoomOne.js import React from 'react'; function RoomOne() { return ( <div className="room one"> <h2>Room One</h2> <p>This is the first room in the haunted house.</p> <button onClick={() => console.log("You've entered Room One!")}>Click me!</button> </div> ); } export default RoomOne; ``` ```jsx // src/RoomTwo.js import React from 'react'; function RoomTwo() { return ( <div className="room two"> <h2>Room Two</h2> <p>This is the second room in the haunted house.</p> <button onClick={() => console.log("You've entered Room Two!")}>Click me!</button> </div> ); } export default RoomTwo; ``` ```jsx // src/RoomThree.js import React from 'react'; function RoomThree() { return ( <div className="room three"> <h2>Room Three</h2> <p>This is the third and final room in the haunted house.</p> <button onClick={() => console.log("You've entered Room Three!")}>Click me!</button> </div> ); } export default RoomThree; ``` 4. Create a `Door` component that will serve as a navigational element between rooms: ```jsx // src/Door.js import React from 'react'; function Door() { return ( <div className="door"> <h1>Choose a room to enter:</h1> <button onClick={() => props.onClick(RoomOne)}>Room One</button> <button onClick={() => props.onClick(RoomTwo)}>Room Two</button> <button onClick={() => props.onClick(RoomThree)}>Room Three</button> </div> ); } export default Door

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.