Create React App Tutorial

Create React App Tutorial

Create React App is a great tool to get you up and running with React.js very quickly. Front end development is complicated with so many build tools your head will spin. Create React App takes all that complexity and makes it simple. All you need to do is install the package using npm, and then run a few simple commands to get a new project created and up and running. Create React App uses Webpack, Babel, ESLint, and other fantastic projects to power your new app. If you ever want to tinker with detailed configuration, you can “eject” from Create React App and edit their config files directly. Let’s look at setting up Create React App and Visual Studio Code for some coding fun.


Setting Up visual Studio Code For React Development

First off, since we will be using Visual Studio Code in this round of tutorials on React, let’s get some extensions installed and configured to make things easier. The first extension to install is Prettier.
Prettier formatter for Visual Studio Code

Prettier will reformat your code so that it is well, Prettier. And who doesn’t want pretty code? Bonus: This extension is able to format the JSX markup we use with React. Next up, we can install the Simple React Snippets extension which gives us some awesome shortcuts to quickly set up class or function components in React.
Simple React Snippets

Here are the shortcuts and what they do for us.

Snippet Renders
imr Import React
imrc Import React / Component
impt Import PropTypes
impc Import React / PureComponent
cc Class Component
ccc Class Component With Constructor
sfc Stateless Function Component
cdm componentDidMount
cwm componentWillMount
cwrp componentWillReceiveProps
gds getDerivedStateFromProps
scu shouldComponentUpdate
cwu componentWillUpdate
cdu componentDidUpdate
cwu componentWillUpdate
cdc componentDidCatch
gsbu getSnapshotBeforeUpdate
ss setState
ssf Functional setState
ren render
rprop Render Prop
hoc Higher Order Component

Create A React App

In the introduction to React, we used the Create React App tool to quickly build out a React application. We’re going to use that tool again right now to create a new application again.

react $create-react-app reactable
Creating a new React app in C:\node\react\reactable.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

If all goes well, you should see something like this once the install completes.
npm create-react-app

Ok, with that out-of-the-way let’s start the application.

react $cd reactable
reactable $npm start

As the server boots up, it will launch a browser window automatically for you and load http://localhost:3000/ which should display the welcome splash page for the React application.
React_App_-_Google_Chrome

Now, we can open the folder which contains the react application. In our case, we called it reactable so we open that folder.
react application folder structure

Thee are a several files and folders in the react application root. Some of them are as follows:

  • node_modules Contains the React library and any other 3rd party libraries needed.
  • public Holds the public assets of the application. This is where the index.html file lives which is where React will mount the application by default on the <div id=”root”></div> element.
  • src Contains the App.css, App.js, App.test.js, index.css, index.js, logo.svg, and serviceWorker.js files. The App.js file is responsible for displaying the default welcome screen in React.
  • package-lock.json Is automatically generated for any operations where npm modifies either the node_modules tree, or package.json.
  • package.json Holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project’s dependencies.
  • README.md You’ll need to read it to find out.

Introduction To JSX

Now we can open up that App.js file and have a look at the contents inside.

So there are a few things happening in the code above. First off, we can see that an ES6 class is used to create a component. In that class is a render() method. In that method we return the highlighted markup. So this part looks a little funky. HTML inside of JavaScript? Well, this markup is not really JavaScript or HTML per so, but a special type of markup known as JSX, or JavaScript XML. In order for JSX to do its thing, it needs to be put through a compiler known as Babel. What Babel does it take the JSX syntax and converts it into plain JavaScript code that any browser understands. As an example, we manually take the highlighted code above and run it through Babel, this is the resulting JavaScript code.

So you can see that the way elements are created in React is by that React.createElement() function. Most people would rather write the JSX markup instead of the corresponding JavaScript code. Using JSX to describe what the UI should look like is definitely easier than having to manually write out all of those calls to React.createElement().

We also have the App.css file which is imported into the App.js file as we can see.
app-css for create react app

App.css uses this css code to style the main App component.


App.test.js

This file has some code to get you started with testing in React.


index.css

The index.css file is used for global css styling.


index.js

The index.js file is the entry point for the React application.


logo.svg

The logo.svg file has the SVG graphics for the App component.


serviceWorker.js

This is used for creating Progressive Web Apps.


Trying React Without A Build Step

Even though Create React App makes it fairly quick and easy to get started with React, maybe you just want to drop it into an HTML page and get going. It turns out this is possible as well and you can simply download this html file, or copy the contents listed below and you can begin with react in a single html file. Definitely worth it if you just want to kick the tires and learn a little bit about how React works.


Further Reading


Create React App Tutorial Summary

With this tutorial, we are now ready to start hacking together some front end applications using react. We’ll be doing just that in the coming tutorials.