How to Generate a React App

How to generate a React app.

This is really simple. Make sure that you have a modern version of NodeJS installed.

Then, simply type the command `npx create-react-app my-new-app` into the terminal. This will generate a new React app with the name you provided.

In this application I'm going to do a deep dive into what JSX is and how it works inside of a React app, so I'm going to call it "working-with-jsx". I'll generate the app with the following command:

npx create-react-app working-with-jsx


This command will generate a new directory called '/working-with-jsx' that includes all of the necessary dependencies and boilerplate to get an application up and running.

To start the application, cd into the directory and then type `npm start`.

cd working-with-jsx
npm start

Launching the program will open a new tab in your internet browser welcoming you to React. Congratulations! Now let's head into the code and break stuff.

Open the project directory in your code editor of choice. I'm using Visual Studio Code, but it doesn't really matter. Use what you're comfortable with.

Inside of the directory you'll see various files and folders. Some of these are essential for the application to run as expected, but "create-react-app" also comes with a lot of boilerplate code.

Let's wipe out this non-essential boilerplate code and start from scratch.

Inside of the `/src` folder, erase EVERYTHING.

Inside of that now-empty `/src` folder, create a new file called `index.js` to serve as our starting point.

This file needs to import React and ReactDOM, and to do that we can simply type the following at the top of the file:


import React from 'react'
import ReactDOM from 'react-dom'

We're going to use ReactDOM to render our application inside of the `root` div in our HTML. This div already exists in our HTML thanks to the magic of React, but it's our job to decide what to render in there.

Let's create a component called App to get rendered to the page. Inside of `/src`, create a new folder called `/components`, and then create a file inside of that called `App.js`.

This file will be a functional component that returns some JSX.

You might be thinking to yourself, "What the heck is JSX?!?"

Well, I'm glad you asked. Because that's what this whole application and tutorial blog post is about.

JSX is a syntax that allows us to write HTML elements and put them into the DOM without having to use `createElement()` or `appendChild()` methods. It looks and behaves like HTML, but uses vanilla JavaScript under the hood to show things on the DOM.

This is made possible thanks to Babel, which is a dependency of React and the main reason we have to import React at the top of all of our components.

Babel is a JavaScript compiler that converts JavaScript that we write, including JSX, into a backwards compatible version that can work with a wider variety of browsers and environments.

JSX that looks like this...


<h1>App</h1>

gets translated behind the scenes into this...


"use strict";
/*#__PURE__*/
React.createElement("h1", null, "App");


It's technically not required to use JSX in your React app. You could write your entire application in vanilla JavaScript, but that would be unnecessarily complicating your life.

JSX is easy to use, and we'll dive into it much deeper as we build out this application.

Creating the App component

In the `App.js` file, the first thing that we need to do is import React. This gives us access to Babel and allows us to write JSX.

Then, we define an arrow function called App. It doesn't have to be an arrow function -- it could be a regular function or even a JavaScript class -- but we're going to use an arrow function because the syntax and functionality work well for our current purposes.

Our App function will return some JSX, and that JSX will get compiled and rendered to the DOM wherever this component gets placed.

Finally, we can export the function and call it elsewhere in our app


import React from 'react'
const App = () => {
return (
<div>
<h1>App</h1>
</div>
)
}
export default App

We've got our first component built and now we're ready to render it to the page!

Back in the `index.js` file, let's finish getting everything set up. First things first, let's import that App component that we just built.

Since this is a file and not a package in our node_modules, we can import it by referencing a path to it's location. For us, it looks like this:


import App from './components/App'

Remember how we imported `ReactDOM` from the `react-dom` library? It's time to put that module to use.

In React, the ReactDOM is only used to "glue" our React application to the DOM. To do that, we use a built-in method called `render()` and pass it two arguments.

The first argument is the component that we want to render to the page, and the second argument is the DOM node that we want to put our application in.

Here it is in all its glory:


ReactDOM.render(<App />, document.getElementById("root"))

In this instance, we're passing our App component, which looks like `<App />` as the first argument, and then we're querying the DOM to find an element with the ID of 'root'.

If we head into the `/public` folder and click on `index.html` we can see that our html document already has a div inside the body with the ID of 'root'. This is where our entire App will get rendered.

Save everything and, if it didn't automatically update, refresh your browser with the React app running. You should see "App" displayed on the page!

Congratulations. This is the equivalent of a "Hello World" application. We've figured out how to create a React app, remove the boilerplate, write a functional component, and render it to the page. That's a lot to be proud of.