Are you having trouble finding a job? Do you want to find a job? You might be wondering where to start. In this article, I will be discussing what you will need to get started to get a job. In this article, I will be discussing how to build a simple resume builder app using React ←.

In this blog post, we’re going to create a simple resume builder app using React, a popular JavaScript library for building user interfaces created by Facebook. React helps you build interfaces that are declarative and modular, making the code easy to read, understand, and maintain. It features one-way data flow, which means your UI is always in sync with your data, with automatic reconciliation. React’s composable components make it easy to build your app, encouraging separation of concerns and clean code.

A CV plays an important role in finding a job. First, the company checks the candidate’s resume. That’s why we have to build it carefully. It is helpful to have an online resume template. Here we will create a CV builder using React.

Condition

In this article we will discuss React, Material UI and JavaScript code. Thus, the reader must have a basic understanding of the whole. For a better understanding, check out the official React.js documentation and the official Material UI page.

What we will learn

After completing this lesson, we know:-

  • To make a project.
  • Create custom components
  • Using a tangible user interface in a React project
  • State management with the Context API.
  • Using NPM packages

What is a CV

Before we get started with the code, let’s learn a little more about Resume. A resume is a formal document that a job seeker prepares to describe their qualifications for a job.

To distinguish yourself from other candidates, write a resume that highlights your strengths and suitability for the job.

The summary should include,

  • Contact information.
  • Career Goal.
  • Skills and aptitudes
  • Professional experience
  • Education

We can add the information that best describes us. However, the summary that we will generate with our tool will only contain the fields mentioned above.

A demonstration and workflow of the application is shown below.

http://resume-builder.nilav.in/

Creating a CV application with React

Now let’s start creating a resume builder app in React using the create-react-app tool.

For a better understanding, I will give you the structure of the files of the application. Indeed, the structure of the file makes it easy to follow the next steps.

1. Create a new React project

The first step is to install the React application on your system. This can easily be done with the NPX tool.

So, first install Node.js on your system and create a React application with NPX. Don’t worry about the term NPX, because it’s a tool that comes with NPM (Node Package Manager) 5.2+ and above, and it gets installed on your system along with Node.js itself.

If you need help installing React on your system, use the links below.

Installing React on Windows, Ubuntu and macOS

npx create-react-app resume builder

This command creates a React application with the project name react-memorize-word

Now go to the project directory and start the application.

cd cv builder
npm start

It will open the React application we created in a browser window with the address https://localhost:3000. The port may change if the 3000 is busy.

We can now use our favorite code editor to modify our project. Personally, I recommend Visual Studio Code.

2. Installing and configuring the hardware user interface

In the previous articles, we used Bootstrap to style the React application. However, in this article we will be using the Material UI. So install the user interface hardware components with NPM.

npm i @material-ui/core
npm i @material-ui/lab
npm i @material-ui/icons

3. Make a part question

We can now install all the components we need for the application. We will make the child components first, then the parent components. All components are stored in the component directory.

We need to display an input field and a button to ask a question and get an answer. The question can be displayed as a cursor on the screen. This is coded in the demand component.

I provide an overview of the component below for better understanding.

It consists only of the TextField and Button fields, which are imported from Material UI. Reports and functions are passed through the application component via the content API.

Therefore, the role of the Demand component is to display the values passed by the App component and pass the input value to the App component.

We will discuss the function and state in step 8, when we discuss the application component. As defined in the application.

The full code for the Questions section is below.

4. Part of question

In the previous step, we created the Question component. After answering all the questions, he must show a summary with these input values.

Therefore, we can create a Questions.jsx component to switch from the question component to the summary component.

{questions.length === answers.length ? (

) : (

 

)}

The progress bar shown above is also encoded in this component.

The LinearProgressWithLabel() function is the display of the progress bar.

function LinearProgressWithLabel(props) {
return (

{`${Math.round(
props.value
)}%`}

);
}

After each question is answered, the answers are moved to a state called Answers. Changing the response array causes setProgress() to be executed.

useEffect() => {
setProgress(
(answers.length / questions.length) * 100
? (answers.length / questions.length) * 100
: 0
) ;
}, [answers]) ;

When all questions have been answered, the progress bar will disappear.

{ questions.length !== answers.length ? (
) : null}

The full code of the question component is shown below.

5. Make a summary using the answers

We answered all the questions and now we have to create a resume in pdf format. It is generated from the Resume.jsx component.

The data for creating a CV is transferred via the Context API.

We use the react-to-pdf package to generate the PDF file. So, install the package on our project.

npm i react-to-pdf

The contact information we collect is displayed at the top right. The other information is listed line by line.

{ reply.resumeFieldId === name ||
reply.resumeFieldId === email ||
reply.resumeFieldId == address ||
reply.resumeFieldId == phoneNumber ? (

{Answers}

) : (

{response.resumeField}

{Answers}

)}

We need two buttons at the bottom: Create new and Download resume. Rebuilding just refreshes the page and deletes the entire report. Download resume downloads a PDF copy of the resume created with the react-to-pdf package.

Create new

{({ toPdf }) => (

Load summary

)}

The generated CV looks like the one below.

After you download the PDF file, it will look like the one below.

The full code of the Resume.jsx component looks like this.

6. Save a table of questions in a constant folder

The questions displayed on the screen are stored as an array in the questionsArray.js file. It is located in the constant directory.

7. Creating a context

Create a file named AppContext.jsx in the src directory. From there, export a context called AppContext using the createContext API.

8. Application component

All reports that store questions and answers, or display a single question on screen, are declared in the application component.

let [questions, setQuestions] = useState([]);
let [answers, setAntions] = useState([]);
let [questionAnswer, setquestionAnswer] = useState({}) ;

After the application component is installed, the questions in questionsArray are placed in the question state. In addition, the first question changes to the status QuestionAnswer.

useEffect() => {
setQuestions(questionsArray);
setQuestionAnswer(questionsArray[0]);
}, []) ;

The answer of the question component entered in the input field is processed by the handleChangeInput function defined here. The answer is placed in the question/answer status with the current question.

let handleChangeInput = (e) => {
setQuestionAnswer({
…questionAnswer,
answer : e.target.value,
});
}

Clicking the Next button on the Question section takes you to the NextQuestion feature of the App section.

Here the answer is placed in the answer status and the next question in the question/answer status.

The progress bar then moves and the next question appears on the screen.

let nextQuestion = (e) => {e.preventDefault();questions.map((question) => {if (question.resumeFieldId == questionAnswer.resumeFieldId) {setAnswers([…answers,{ …question, answer : questionAnswer.answer },]);}

questions.map((qa, index) => {
if (index <= questions.length) {
if (qa.resumeFieldId == questionAnswer.resumeFieldId) {
setQuestionAnswer(questions[index + 1]);
}
}
});
}

The entire application is bundled into a component called AppContext.Provider to make use of the Context API.

We pass the necessary states and functions to the child components via the Context API.

 

The Header and Questions sections are displayed in the App section.

Cv-builder

Code

See the CodeSandbox link for a live view of the application.

GitHub Repository

You can always go to the GitHub repository to clone this project.

https://github.com/syamjayaraj/react-resume-builder

Summary

In this article, we have gone through the steps to create a simple resume builder with React, Material UI and Context API. We used the package react-to-pdf to create a PDF file of the resume.

May:

How do you load…

You might like this

This source has been very much helpful in doing our research. Read more about react resume template and let us know what you think.

react-resume builder githubcreate resume using reactresume-builder app githubreact resume templateresume using react jsreact hooks resume,People also search for,Privacy settings,How Search works,react-resume builder github,create resume using react,resume-builder app github,react resume template,resume using react js,react hooks resume,resume generator code,resume generator python

You May Also Like

Fix: Google Drive keeps crashing on Android

Using Google Drive is a must on Android devices, which is probably…

11 Best Hamachi Alternatives For Virtual Gaming

Hamachi is a VPN application that allows you to create a local…

🥇 Linux arguments  What are they? + Profit ▷ 2021

Hey there! Before reading the article which is about 🥇 Linux arguments  What…

How To Fix Windows 10 No Login Screen Issue

Windows 10 is known for its reputation for software and troubleshooting. A…