About The Book
If you really want to learn some important concepts in React and TypeScript and have fun doing it, this is the book for you. The book dives into features of React such as React hooks, styled components, building utility modules, and using typescript to help you accomplish it all. Also you’ll learn best-practices along the way.
Chapter One
PART 1 Introduction
My family and I are kind of addicted to this new game called
Wordle. Wordle is the MasterMind of words, where you guess a
5-letter word and the program tells you which letters you guessed
right. The program lights up a clue for each letter: A green letter
indicates you got the right letter in the right position, yellow means
the right letter in the wrong position, and a dark grey background
means that letter is not used.
In this book, we will be showing you how to create your own
Wordle App using the power of React and Typescript.
There are a couple of approaches we could take with React to create
this application. We could go the class object-oriented route, or we
could go the functional component route. We are going to do the
latter for this article:
Setup
If you haven’t yet, you’ll need to install nodejs from here. You will
also want to install the latest version of npm and npx globally once
you have node installed nodejs.
npm install -g npm
npm install -g npx
To set up a blank react project with typescript run the following
command inside the folder you will be using for your Wordle
Project:
npx create-react-app wordle --template typescript
This may take a while, so be patient!
My favorite React editor is Visual Studio Code. I recommend
downloading this IDE (Integrated Development Environment) to
follow this tutorial.
For Free Chapter , subscribe our newsletter
Choose Your Preference
About The Author
Mike Gold has been developing software for over 20 years and worked as a consultant in banking, manufacturing, healthcare, finance, and defense industries. He is a former Microsoft MVP with a background in Electrical Engineering. Mike has contributed to over 200 articles on .NET/C# technology and has lately been working full stack with .NET Core and ReactJS.
Reader word for us
Great Tutorial
I wake up every morning and the first thing I do is play Wordle! I loved following along in this book to create the game. It really gave me a good feel for the power of react hooks and how to customize my components to look just like the game. Looking forward to more tutorials from this author.
John Doe
Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque laudantium, totam rem sit aperiam, eaque ipsa quae ab illo lor ame
John Doe
Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque laudantium, totam rem sit aperiam, eaque ipsa quae ab illo lor ame
John Doe
Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque laudantium, totam rem sit aperiam, eaque ipsa quae ab illo lor ame
John Doe
Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque laudantium, totam rem sit aperiam, eaque ipsa quae ab illo lor ame
John Doe
Sed ut perspiciatis unde omnis iste lore natus error sit voluptatem accusantium doloremque laudantium, totam rem sit aperiam, eaque ipsa quae ab illo lor ame
Why People Download This E-Book ?
eBooks can be downloaded and stored for later use. One can carry the eBook around and read them whenever they want. Students and employees can go through the learning material while at home and even while travelling. It is convenient for people on the go.
Our Blog
Taming Side Effects in React with useEffect and useState
React is a powerful JavaScript library for building user interfaces. One of its key features is the ability to manage component state through hooks, like useState and useEffect. In this blog post, we will explore a cool and useful example of how to use useEffect in conjunction with useState to...
Understanding useState in React
In the past, React components were more class based and had a built in state that could be set. Now components are functions in React so there needs to be a way to save the state of the component. Introducing useState! It allows you to save a particular state of...
