Congratulations, you have made it to the very first React project. In this project, you will be creating a small CV application. It’s a great project to get you started because it includes many of the basic concepts you’ve learned so far, without a huge overhead of complexity.
- Create a new React project.
- Think about how to structure your application into components. Your application should include:
- A section to add general information like name, email and phone number.
- A section to add your educational experience (school name, title of study and date of study)
- A section to add practical experience (company name, position title, main responsibilities of your jobs, date from and until when you worked for that company)
- Be sure to include an edit and submit button for each section or for the whole CV. The submit button should submit your form and display the value of your input fields in HTML elements. The edit button should add back (display) the input fields, with the previously displayed information as values. In those input fields, you should be able to edit and resubmit the content. You’re going to make heavy use of state and props, so make sure you understood those concepts.
- Create a
componentsdirectory under your
srcdirectory and add your components.
- Include a
stylesdirectory under your
srcdirectory for your CSS files. You’ll need to import these in the component files to use them.
- Push the results and deploy them with any of the options mentioned below!
While we have been using GitHub Pages to deploy our static webpages till now, and we can definitely continue to do so with hacky ways, it’s far easier to let a PaaS (Platform as a Service) do the same for us! There are a lot of options to host such sites, and the Vite hosting docs go over the most popular ones among them.
Not only do some of these get rid of additional steps after pushing our code to GitHub as these services have tools that automatically deploy on push, but you also don’t have to worry about other issues further down the curriculum, like routers and build steps. We shall use a few selected options for now. Once you are done with the assignment, choose one of the following options, and deploy!
While there are many ways to deploy to Netlify, like uploading your
dist directly or using Netlify’s
netlify-cli CLI, the most convenient way would be to directly import your GitHub repository to Netlify.
- Push your React application to GitHub.
- Import your project to Netlify by logging in, and selecting your repository.
- Select the branch to deploy from (the default setting, from
main, works) and hit “Deploy site”!
- You can access more settings here if you need to!
- Documentation Website
- This section of the Vite docs has a similar brief guide for deployment
Similar to Netlify, Vercel also offers a few ways to deploy, but we will be importing our GitHub repository to get benefits like deploy-on-push.
- Again, push your React application to GitHub.
- Import your project to Vercel.
- Vercel will automatically detect that you are using Vite. Set your name as you like, and hit “Deploy”!
- Yes, push your React application to GitHub.
- Create a new Cloudflare account and log into it.
- Under “Account Home”, select “Workers & Pages” > “Pages” > “Connect to Git”.
- Connect to GitHub and select your GitHub repository.
- Under “Set up builds and deployments”, set
npm run buildas the build command, and
distas the build output directory.
- Under “Environment variables (advanced)” > “Add variable”, add a variable named
NODE_VERSIONand set its value to be the version number of Node that you are using. You can find this by executing
node -vin your terminal.
- Hit “Save and Deploy” and watch it come to life!