Skip to content

Latest commit

 

History

History
47 lines (36 loc) · 2.24 KB

README.md

File metadata and controls

47 lines (36 loc) · 2.24 KB

What its all led to (4hrs +)

Now that we've created a react app together, its time for you to have a go yourself. Try out one of the ideas below, or come up with one yourself!

Spend as long (or short) as you want on this. Remember, be curious, and have some fun as you try stuff out.

Ideas

  1. CV page
  2. Todo App
  3. Tic Tac Toe
  4. Calculator
  5. Minesweeper

Creating a project

  1. Create a new repo on github
  2. Open the repo on your VS code
  3. Run the following command to create your react app, follow the prompts from the terminal. 
    npx create-next-app

    Follow this if you get stuck

  4. Run the project 
    cd my-app
npm run dev

    As you start creating your apps, you may run into some new concepts we haven't covered. Here's some resources that you can check out if you get stuck on them


If you find your self getting stuck, try scour youtube for some tutorials of your project. Eg react todo app.

Note: Some tutorial may still be using npx create-react-app, this is not recommended anymore (check out their explanation here). You will still be able to use the tutorials, but just be aware there will be some extra config files, some files might be in different places and or be named slightly differently.

Stretch

  1. Deploy the app. You can check the README.md from your generated project for instructions on deployment via the framework you used.
  2. What does your app look like on mobile? (Use flex box to make any adjustments)
    • Right click on your page and click inspect
    • Toggle on Device Toolbar. Here's instructions for chrome if you get stuck.
  3. The DOM, virtual DOM and DOM manipulation