The purpose of this class is to expand your JavaScript skills by exploring native applications built with JS.
Goals -
Two goals will bring you success: building portfolio projects and mastering learning objectives.
During this class, you will build two portfolio projects that show off your front end skills. I will present ideas and projects, you need to take them to completion.
If you have ideas that are outside the description of the project talk to the instructor. We will always be willing to work with you. My only request will be the projects include the learning objectives and the scope of the project to be reasonable.
What are the learning objectives?
I’ll present ideas in class and give them a descriptor. These are learning objectives, concepts, and ideas that you need to know to claim mastery of the subject. Learning Objectives are often skills that are related to success at job interviews and on the job.
When you understand a learning objective you will be able to explain it and put it into practice. There will be learning objectives for each class. You should test your knowledge by explaining the concepts to someone else. Implement the learning objectives in code when the learning objectives are code. Some objectives are larger overarching concepts, in these cases, you should identify the learning objective in your code, your project as a whole, or in the larger software ecosystem or the world at large.
If you are having trouble understanding a learning objective you need to take action. Discuss the topic with another student, talk with a TA, bring questions to the class, talk to an instructor during lab or office hours.
- Define Components with Class and function syntax
- Component Architecture
- Props and State
- JSX
- Compare and contrast Web and Native Applications
- Compare and contrast Mobile vs Desktop experiences
- Discussion:
- What is native?
- Native vs Web
- What makes a good native app?
- What makes a good web app?
- Desktop vs Mobile?
- What makes a good desktop app?
- What makes a good mobile app?
Think of some ideas for native apps:
- Games
- Chess timer
- Chess Board
React is one of the most popular libraries around today. Seriously, you should know it! React is good to learn now since it has huge and well-deserved popularity.
Hacker News Hiring Trends: React, Vue, Angular, Angular 2
NPM Downloads: React, Vue, Svelte, Angular
Here is a good look at the reasons to learn React, Vue, or Angular.
Check out the state of JavaScript 2019:
Looks to me like it's a good time to learn React. That said, it won't be here forever and you are capable of learning any framework. React is a good place to invest your time right now.
React seems to be a popular tool, it can also be used to make native mobile applications. This makes it a good choice for this class.
Native applications hold and manage their own data. We need a tool and a strategy for this! I'm going to propose Redux. You've used it before, it's mature and popular.
Let's answer a couple questions about redux.
Why use Redux? Is redux still used in 2021? Can't you replace Redux with one of those new hooks?
https://dev.to/alexandrudanpop/why-react-projects-still-use-redux-in-2020-395p
Build a Cookie Clicker in class?
Redux would be a great way to create a complex cookie clicker game.
Build the following components
-
Counter Display
-
Counter
- Button add to count
- Upgrade button
-
Auto Counter
- Upgrade button
-
import dependencies
npm install redux react-redux -
create actions
-
create reducers
-
Setup the store and provider component
Challenges: Clicker
Try and solve these challenges with the clicker game.
- Create a component that counts with each click "Clicker".
- Create a button that adds a new "Clicker".
- Create a component that displays the total clicks from all clickers.
- Create a bigger clicker. This should add more than 1 with each click. Each click could be 5, 10, 25, 50, or 100. You can use a component and configure it with props to set the amount.
- Create an "AutoClicker". AutoClickers count without a manual click. Use
setInterval - Create a button that "buys" an auto clicker for 10 clicks. Clicking this should subtract 10 from the total and add an auto clicker.