There's a lot more to React than we could cover in a week. It's worth reading through the official docs to reinforce your learning and learn more interesting new features. The links below are the most important concepts you should cover.
Your project this week is to build an interactive game-like thing using React.
Now that you're using a framework there is a bit more initial environment setup involved before you can start writing code. Make sure you get this setup done and deployed to Netlify at the beginning.
"Interactive game-like thing" is a bit vague, so here are some apps built previously:
If you're struggling for inspiration consider adapting a simple board/card/arcade game that you like.
We'll be using Vite to handle bundling our app and providing a local dev server. You can quickly scaffold a new app using their CLI:
npm create vite myapp -- --template react
cd myapp
npm install
to install the dependencies
npm run dev
start the dev server
Open the project in your editor—you should see an example app. Feel free to delete the logo/CSS files that you won't be using.
Vite supports importing static assets (like images or CSS). For example:
CSS files will automatically be copied to the final built site and included on the page. Images and other assets will provide the URL of the final asset to use in your components.
We strongly recommend you configure ESLint. This will help catch mistakes as you're coding and save you time debugging problems caused by simple typos.
You can use Oli's minimal React config (follow the instructions in the readme to install).
We'll be deploying our apps to Netlify.
Create your repo and push it to GitHub
Go to https://app.netlify.com and login with Github
Click the "New site from Git" button
Choose "Github" as your provider (and authorize it)
Choose the repo you want to deploy
Choose "Deploy site" (the build settings should be pre-filled)
Now every time you push to the main
branch your site will redeploy.
That said, if you have a token you want to keep off GitHub, but don't mind people potentially finding using dev tools (i.e. not a token attached to your credit card!) you can use a .env.local
file.
Vite will automatically read any environment variables prefixed with VITE_
and make them available to your code on import.meta.env
. E.g. if you have a .env.local
file like this:
You can access that using import.meta.env.VITE_APP_API_KEY
.
Vite also generates a .gitignore
that stops .local
files from ending up on GitHub.
You will also need to configure Netlify to inject this value when it deploys your site too (just like Heroku). You can do this under "Site settings" > "Build & deploy" > "Environment" > "Environment variables".
Web applications are an amalgamation of data and markup. Let's consider a personal landing page as an example. The data comprises the specific information about you, while the markup is the HTML that encapsulates this information.
There are generally two types of data we work with - static and dynamic. Static data doesn't undergo much change, enabling you to craft the HTML in advance. The server, yours or a third-party service like Netlify's, just responds with the pre-generated static .html
file when a request is made.
On the contrary, dynamic data changes with each request. With such data, you are required to generate each page on demand. This page generation can occur either on the server or the client.
Generating pages on the server is usually simpler and safer, but doing it on the client allows for more dynamic interaction. What if there was a way to do both, within the same application?
Next.js is a powerful framework for building websites using React. React, although an excellent library for building user interfaces, doesn't provide many necessities for websites such as routing, server-rendering, and data fetching. Next.js steps in to fill these gaps, creating "isomorphic" JavaScript applications that render both on the server and the client.
This dual-rendering process works as follows: initially, the page load is server-rendered HTML. Once the JavaScript loads, the whole application runs client-side. This balance is a compromise between initial performance (showing HTML quickly) and later interactivity on the client side.
To use Next.js, you create React components in a pages/
directory. Here's an example:
Next.js's Node server creates a route for this component:
The server initially renders your application to get the HTML. Then it renders your app again on the client to "hydrate" it. The hydration process instructs React to connect to existing DOM nodes.
Before hydration happens, the user can still see the HTML. Once hydration finishes, you have a fully functioning client-side app.
In addition to managing front-end rendering, Next.js also supports "API routes". These are routes that don't render React components but return JSON instead.
To implement this, you create files inside pages/api/
. These files are used as handlers for the matching route. For instance:
This enables you to build an API route that fetches JSON data, which is simpler than having to create and deploy a whole separate server.
In conclusion, Next.js presents an efficient way to develop full-stack applications, providing out-of-the-box solutions for some of the most common web development needs, all while leveraging the power of React. It offers an excellent bridge between server-side rendering for optimal performance and client-side rendering for dynamic interactivity.