Set up your app
Start by setting up the tools and dependencies that you’ll need to build and run your app.
-
Download and install Node.js.You can check to see if you have Node.js installed by running:Terminal
node -v
If it’s already installed, then make sure that you’re using version 8.1.0 or later.
You’ll need a folder to store the contents of your app.
- Create a project folder named after your app. For example, sample-embedded-app.
-
Navigate to your project folder:Terminal
cd sample-embedded-app
Node.js includes a tool called npm that manages Node.js packages to make development easier. The package.json file contains metadata that tell npm about your app’s dependencies. It also helps people who find your package understand its purpose. It’s unlikely that your app’s package will need to be shared publicly, so you can use default values and leave the descriptive fields blank.
-
Create a package.json file using default values:Terminal
npm init -y
You’ll use a React framework called Next.js to build your app. Next.js takes care of some of the things that you’d normally have to do when building a React app, including:
- webpack configuration
- hot module replacement
- server-side rendering
- client-side routing
- updating babel configuration
- code splitting
Install React, ReactDOM, and Next.js
-
From your root project folder, install React, ReactDOM, and Next.JS:Terminal
npm install --save react react-dom next
Views are the pages that hold the frontend components that display the data your app queries and mutates. Next.js automatically routes views that are stored in a pages directory using the file name. This makes it easier to build your app navigation later in the tutorial.
- Create a pages folder in your project folder.
- Create an index.js file in the pages folder.
Add your first React component
The index.js file will become the main page of your app, so you’ll add a React component that will act as a hub to build the rest of your app around. Next.js takes care of React imports and exports, which means you don’t need to import React components, and exports should always be set to default.
- Open pages/index.js in your text editor.
-
Add the following constant and sample div:
/pages/index.js
code contained in /pages/index.jsconst Index = () => ( <div> <p>Sample app using React and Next.js</p> </div> ); export default Index;
Add scripts to your package.json to tell npm to run your app through Next.js.
- Open package.json in your text editor.
-
Add the dev, build, and start scripts to the file:
/package.json
code contained in /package.json{ "scripts": { Remove: "test": "echo \"Error: no test specified\" && exit 1" Add: "test": "echo \"Error: no test specified\" && exit 1", Add: "dev": "next", Add: "build": "next build", Add: "start": "next start" } }
Now that you’ve got your scaffold and a way to run it, test your app.
-
From your root project folder, start your server:Terminal
npm run dev
-
Visit http://localhost:3000.
You should see your app running on localhost:3000 with the text “Sample app using React and Next.js“.