This article (and the others that follow) are basically brain dumps of things I wish I’d known before starting on my first React/Typescript project. This first one is a very high level overview of some key concepts.
So what should you already know? I reckon these are probably the minimum prerequisites:
- Setting up your dev environment and installing NPM packages
- Ideally, some experience using a typed language such as C, C# or Java
I’m going to cover React in conjunction with Typescript. You don’t have to use them together but personally I think it makes for more robust code thanks to its compile time type checking. I’m not intending to regurgitate stuff you can find elsewhere so I’ll link out to documentation sources which you might want to consult.
The first thing you want to do is set up a basic project structure. To do this we use a package called, sensibly enough, Create React App. As per the Quickstart, run the following at your command line :
npx create-react-app my-app --template typescript cd my-app npm start
Two things just happened. One, we created a new React project and, two, we started a development server to run the project. That development server will keep monitoring the project directory and rebuild it any time one of your source files change.
React works with a concept of components. Components are self-contained bits of functionality that combine presentation and function. You as developer decide how big a chunk of functionality each component represents but, in general, if you find you’re losing track of what a component is for or you’re repeating yourself, you probably need to break things down into smaller components.
A key principle of React is that we favour composition over inheritance. If you have several components that share some common functionality, you might be tempted to have them inherit from a common base. Instead, create a component that handles the common stuff and takes a more specialised component as a child.
You usually pass data into components as props (there are other ways which we will discuss later). Props are just parameters but it is important to understand that they only go one way. You pass props into components. Components don’t change the props. This is not Angular JS with its two-way data binding.
When using HTML entities in JSX there are a couple of differences you should be aware of:
- The HTML
classattribute is renamed as
Functions, classes and functional components
A React component can be created in one of three ways : as a function, as a class or as a functional component. Pretend you haven’t heard about functions and classes. The modern way of using React is to use functional components and something called Hooks.
Calling a function to spit out some JSX is great but what happens when we want our component to do something more involved, like maintaining its own state? That’s where hooks come in. According to the official tutorial :
Hooks are functions that let you “hook into” React state and lifecycle features from function componentshttps://reactjs.org/docs/hooks-overview.html#but-what-is-a-hook
Personally, I don’t think “hooks” is a great name but it’s what we’re stuck with so let’s just run with it. Hooks are just functions that you can import into your components. By convention their names all start with the word use but apart from that there isn’t really anything special about them.
What you do need to be aware of though are the so-called “rules of hooks“. Namely:
- Only Call Hooks at the Top Level
- Only Call Hooks from React Functions
Now’s probably a good time to skim read the official overview of hooks if you haven’t already.
Things to drop-in to your project
React has a massive ecosystem of open source components, frameworks and libraries. You can quickly end up facing the paradox of choice. These are the libraries I wish I’d known about at the beginning of my React journey:
- React Router – handles single page app navigation
- React Hook Form – easy and powerful form validation
- React Query – easily fetch data from your backend servers. Transparently handles caching, refetching, long polling etc
- React Table – hooks for handling HTML tables. Bring your own UI and use the hooks to give you things like sortable, editable, filterable columns
One thing you might encounter quite a lot if you read other articles about React is Redux. For some people, React and Redux are one and the same. This is not the case. Redux is a state management library which can be really useful in large projects but for beginning React users it just adds complexity. Don’t feel pressured into using it. Even the creator of Redux says
don’t use Redux until you have problems with vanilla React.https://redux.js.org/faq/general#when-should-i-use-redux
Coming up in subsequent posts : a quick overview of Typescript and starting to build a site with those drop-ins I mentioned above.