React From The Beginning: Create Your First React App
Introduction
React is one of the most popular Javascript front-end frameworks for building web applications. It is developed by Facebook and a community of individual developers and companies. React is constantly evolving and new features are added constantly.
Starting with React from scratch might be a challenge at first. There are many features and concepts which need to cover when starting to learn React.
Why Use React.js?
1. Easy to Learn: Since it requires a minimal understanding of Javascript and HTML, the learning curve is fairly low. In some cases, we will even be using the “vanilla DOM JavaScript API”, which means that the programmer doesn’t need to learn anything new before getting started.
2. Reusable Components: If you’ve developed simple websites in HTML, there might’ve been times where you wanted to group a bunch of HTML elements and then save them into some sort of ‘variable’ so that it could be re-used later on. For a developer, this is a lifesaver. React has the ability to implement such a facility.
Before really starting with React we first need to make sure that the basic system setup is available.
System Setup
The first prerequisite which needs to be installed on the development system is Node.js and NPM (Node package manager). Npm comes bundled with Node.js.
You can quickly check if an up-to-date version of Node.js is already installed on your system by executing the following command:
$ node — — version or node -v
Getting Started: Installing React
First, go to the terminal and then type,
npx create-react-app app-name
This instruction creates a template of a React application with the name of app-name .
Note: npx is not a typo. It is a package runner command included within npm .
Now, you need to navigate to the directory of this application and then view it in your browser like so:
cd app-name
npm start
This will start up a little development web server and give you a place to start working on your application. Running this will start up a development server at http://localhost:3000/ and give you a nice little starter template:
npm run build
“Bundles the app into static files for production.” If you’re comfortable with webpack/brunch and the build process for production sites, then you probably know what this all means. However, if all of this is Greek to you, then we’ll explain a little more. Basically, this means it’s going to take all of the Javascript code that the browser can’t interpret without any help and turn it into a smaller (“minified”) version that the browser can read and understand. It shrinks the file down as much as it possibly can to reduce the download time (probably doesn’t matter when you’re sitting on a good internet connection, but the minute you drop to 3G or worse speeds you’ll be very thankful for this!) while keeping your application running!
npm run eject
“Starts the test runner.” create-react-app now ships with a bunch of tools all ready to go for you to start testing your app as you’re building it via Jest. The first time you run it you’ll probably see something like:
PASS src/App.test.js
✓ renders without crashing (18ms)Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.277s
Ran all test suites related to changed files.Watch Usage
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.It’s always a great idea to run your tests as you go along, and now you get a really nice built-in way to do so (and trust me, trying to set all of this up on your own is a huge pain in the butt, so major props to the create-react-app team for this!)
npm run eject
“Removes this tool and copies build dependencies, configuration files, and scripts into the app directory. If you do this, you can’t go back!” What this does is pulls your application out of the context of the create-react-app framework and into a standard webpack build. This allows you to tweak the base create-react-app framework, either adding/removing dependencies and perform more advanced manipulations of your app as necessary. You can think of this as a way to remove the scaffolding that create-react-app creates for you and look at the underlying project and dependency structure.
Exploring Our First App
Let’s start by looking at the first application that is created by create-react-app:
It helpfully generates a readme for your project (README.md) which is in Markdown format, as well as a favicon (the icon that shows up in your browser’s address bar and is used as the icon for bookmarks and whatnot). public/index.html is the main HTML file that includes your React code and application and provides a context for React to render to. Specifically, it includes a div that your react app will show up inside. Let’s take a look at the file:
The <div id=”root”> the bit is the important part: this is where your react application gets rendered in your browser!
Next, we have our package.json file. This is what stores the lists of dependencies for your application, as well as what describes your application (the name, the version number, etc). Similarly, we also have a yarn.lock file, which is basically a locked list of all dependencies of our app.
The node_modules/ the directory is where all of the dependencies get built/stored. For the most part, you shouldn’t have to fiddle with this too much.
The important directory for us as developers is the src/ directory. This stores all of our modifiable code. We’ll explore the contents of that file really quickly, too.
index.js stores our main Render call from ReactDOM (more on that later). It imports the App.js component that we start off with and tells React where to render it (remember that div with an id of root?). index.css stores the base styling for our application.
App.js is a sample React component called “App” that we get for free when creating a new app? We’ll actually be deleting the entire contents of the file and starting over! App.css stores styling targeting that component specifically. Finally, logo.svg is just the React logo.
App.test.js is our first set of tests to run against our sample App component that we start off with.
Creating Our First Component
First, open up your code in your editor of choice and also run npm start in that directory. Next, we’ll do something fun: deleting the entire contents of App.js and App.css. Open up both files, and delete every line of them! Now that we have a nice blank start, it’s time to start learning React with ES2015!
There are two primary ways to create components in React when you’re working with ES2015 code: through functions or through ES2015 classes. We’re actually going to start off by using functions to create our components and then work our way up to using classes, explaining the differences between the two/when to choose which/etc.
Either creation method requires that React actually be imported into our component, so let’s do that first. At the top (in src/App.js), we’re going to add:
import React from 'react';One line in and we’re already neck-deep in ES2015 code! This tells Javascript that we want to import the React library from the installed ‘react’ NPM module. That’s all! This gives us React support, JSX support, and everything we need from React to get started! Now, let’s write our hello world component!
const App = () => {
return (<div className="App">Hello World!</div>);
};Again, some more ES2015 syntax. This creates a constant (thus the const) function (so we cannot change it) called “App”, which takes no function arguments. Any functional components that we write need to return the JSX that tells React how to create the component. Note that we wrap the JSX inside of parentheses! This is a good practice to just always do, even though you only technically need it for multi-line JSX statements. We also tell React that our component has a CSS class name of “App”. (Note: You need to use, not className since the class is a reserved word in Javascript)
Wait, What Is JSX?
If you already know what JSX is, you can skip this, but if not, here’s a quick summary:
JSX is a templating language that looks VERY similar to HTML. This allows you to write templates for your components in a way that’s very comfortable to developers already familiar with HTML, but there are a few extra things that it provides. First, you can embed any javascript inside of a JSX template by wrapping it in curly braces (these: {}). Second, some words are special and reserved, such as class, so there are JSX-specific properties/attributes/etc you need to use (such as className).
In addition, React components must only return a SINGLE JSX node at its root, so it’s very common to wrap up your components into a single div that might have multiple children underneath it.
Returning To Our Component
We have our component written, but if you look at the browser, everything is blank right now! We need to do one more thing in ES2015 to make sure other files can take advantage of any code written in this file: export.
At the bottom of our file, add the following line:
export default App;Now, when we save the file and our app reloads automatically, you’ll see our first component show up!
Our first (very basic) component!
Embedding Stylesheets In Our Component
One trick that create-react-app does by default that is a nice thing to learn is embedded stylesheets for your components. Since we have a blank App.css file, let’s throw something in there to make our component more noticeable. Back at the top of our component (in src/App.js), below our import React line, add the following:
import './App.css';This imports the CSS file into our component. Next, open up src/App.css and add the following:
.App {
border: 2px solid black;
text-align: center;
background: #f5f5f5;
color: #333;
margin: 20px;
padding: 20px;
}Save the file, and then head back to your browser window and you should see something like the following:
Not a bad start for very little work!
That’s a good place to start in our application, so we’ll hop over to index.js and very quickly figure out precisely how the component gets into the browser. Open up src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
We already know the “import React” line, so we’ll skip that. The next bit is import ReactDOM from ‘react-dom’. This tells Javascript that we want the ReactDOM library out of the ‘react-dom NPM module. ReactDOM has one function in particular that we want to use: render(). Render tells React precisely HOW to throw a component into your browser. Following that we have index.css, which acts as our main global CSS file. The next line is import App from './App'. This tells Javascript that we want to import the App component from a local file called “App.js”. The “.js” can be left off completely; ES2015 is smart enough to assume that’s where it is coming from. Also, any “from” statements where the module name starts with a “./” means that you’re importing from a local file/directory, not from a module that’s installed via NPM. App.js is a local file inside of src/, so that’s why we’re using “./App” here. We also import a CSS file for the index js file. We end with a new line, import registerServiceWorker from './registerServiceWorker' which allows us access to implementing service workers for progressive web apps in our create react app! Progressive web apps are a bit outside of the scope of this tutorial series, so that’s something we’ll save for a future post, perhaps!
Now we have our render call. Render is a function that takes two arguments:
- Which component to render
- Where to render that component
In our case, we declare the component using JSX. Since our component name was imported as “App”, we can reference that app inside of a JSX template as if it were an HTML tag:
<App />Note: All tags in JSX need to be closed, either inside of the tag such as above or like this:
<App></App>Finally, we look up where to render the component on the page with the call to document.getElementById('root'), which tells javascript to find an element on the page that has an ID of “root”
Conclusion
Congratulations! You now have the start of a basic functional component in React with very little work! You have webpack and babel and everything else all figured out and installed for you but without a lot of fuss or bother! This is a very nice, very clean way to get started with React development.
