How To Get Started In React: Part 1

To get started with React, you will need to have Node.js installed on your computer. You can download Node.js from here.

Next, to get your first React project up and running, you are going to want to use a tool like Create React App or Vite to scaffold your project. Create React App used to be very popular, however it is losing support and becoming deprecated, so I recommend using Vite.

On the Vite home page, click “Get Started” and scroll down to where it says “Scaffold Your Project”. You have several options to choose from, but just note that if you are using npm then you will need to verify which version you have as that will affect the scaffold process. For example, if I use the command npm create vite@latest then it will freeze for me halfway through because I have a newer version of npm installed. So I have to use npm create vite@latest my-first-react-app - - template react.

Follow the prompts according to which install method you chose. Then, make sure you run npm i to install the initial packages. After the installs, open up your project in your code editor.

What Files and Folders are inside your React App?

You will notice that you have some folders and files setup already in your project from the scaffolding process. In the package.json file, there are some packages related to React that come pre-installed so that you are ready to develop in React.

You also have a config file that you probably haven’t seen before called vite.config. This file will become important for things like modifying your code for production, setting up a proxy server, and other tasks like that. However, you can mostly ignore that file at the start of your development process.

Inside the index.html file, you will notice that it looks rather bare. That’s because React acts like a Single Page Web Application and all of your React code is pulled in by a script tag and the target div with an id of “root”.

Inside the src folder is where you will do most of your development. You should see a main.jsx file and an App.jsx file. The main.jsx file is the entry point into your React application code. Ultimately, the main.jsx file is what’s exported into the html file via the line ReactDOM.createRoot(document.getElementById('root')).render().

You’ll notice that main.jsx pulls in App.jsx at the top via import App from './App.jsx'. Then, inside the render function of main.jsx it references App in the syntax < App /> . So you can see that essentially main.jsx is a vehicle to render the code from App.jsx into the index.html file. You can safely ignore main.jsx for the time being as it won’t be where you’ll do most of your development.

Inside the App.jsx file is where we will begin writing our own code. You’ll notice that Vite has some placeholder code inside the App.jsx file. Just to see what that looks like, go ahead and run the script npm run dev in your terminal. That will run the development server of your app and you can see the React logo with a basic counter.

That’s nice and all, but we want to write our own code, so let’s delete everything inside of the return statement of App.jsx.

Additionally, there are some pre-loaded styles inside of the App.css file. I recommend you go in there and delete everything so we can have full control over our web app.

React Components

Before you start writing code, it’s vital to understand at least one React concept: components.

“Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML”
-W3Schools.

A React component has a few basic properties to it’s structure:

1. They are JS functions. They will start with a function syntax like function MyComponent() {}
2. They have a return statement. Your component can’t display anything that isn’t inside of the return statement.
3. They have an export statement. At the bottom you will see export default MyComponent.

App.jsx is a perfect example of a component. It is defined as function App(){}, it has a return, and it has an export.

Components can also be nested inside of each other. You can think of App.jsx as the parent component inside which you will place all of your other components. Nested components are referred to as either a parent or child component.

Creating Our First Component

Let’s start off by creating a simple hello world component. To do this, let’s create a file called HelloWorld.jsx. Open the file up, and let’s create the HelloWorld function by typing function HelloWorld() {}. Next, add the return statement and put inside of it an h1 tag with the inner text of "Hello World".

To finish our component, make sure to add export default HelloWorld at the bottom of the file.

Now, let’s import this component to our App.jsx component to render it. At the top of the file type import HelloWorld from ‘./HelloWorld.jsx’ .

Great! Now our component is imported to our App.jsx file. To render the component, place it inside the <> of the return statement by typing < HelloWorld />. Save the file, and then run npm run dev in the terminal.

We should see our Hello World text pop up on the page. Congratulations! You’ve just created your first React component. You now know enough to start building some simple web apps in React.

There’s a lot more to learn however, so be sure to follow along my next post How to Get Started In React Part 2.