Fullstack React: create-react-app

What is Create React App and how do I use it?  Day 12 of πŸŽ„ 30 Days of React πŸŽ„   #reactjs

  • Lets create a new app well call 30days using the create-react-app command we just installed.
  • With create-react-app installed globally, well be able to use the create-react-app command anywhere in our terminal.
  • Open a Terminal window in a directory where you want to create your app.
  • In terminal, we can create a new React application using the command and adding a name to the app we want to create.
  • The package is released as a Node Package and can be installed using npm .

Today, we’re going to add a build process to store common build actions so we can easily develop and deploy our applications.

@fullstackreact: What is Create React App and how do I use it? Day 12 of πŸŽ„ 30 Days of React πŸŽ„ #reactjs

Today, we’re going to add a build process to store common build actions so we can easily develop and deploy our applications.

The React team noticed that there is a lot of configuration required (and the community helped bloat — us included) to run a React app. Luckily, some smart folks in the React team/community got together and built/released an official generator app that makes it much easier to get up and running quickly.

The create-react-app project is released through Facebook helps us get up and running quickly with a React app on our system with no custom configuring required on our part.

The Node homepage has simple documentation on how to install node, if you don’t already have it installed on your system.

package:

command anywhere in our terminal.

command we just installed. Open a Terminal window in a directory where you want to create your app.

In terminal, we can create a new React application using the command and adding a name to the app we want to create.

command:

directory that comprise our running app.

file and we’ll see we have a very basic component that should all look familiar. It has a simple render function which returns the result we see in the Chrome window.

file.

We’ll get to deployment in a few weeks, but for the time being know that the generator created a build command so we can create minified, optimize versions of our app that we can upload to a server.

command in the root of our project:

With that, we now have a live-reloading single-page app (SPA) ready for development. Tomorrow, we’ll use this new app we built diving into rendering multiple components at run-time.

Fullstack React: create-react-app